<Button variant="secondary">Button</Button>
<Button variant="secondary" shape="square" icon={PlusIcon} />Installation
Copy and paste the following code into your project.
import { Button } from "~/components/button/button";Usage
import { Button } from "~/components/button/button";
export default function Example() {
return <Button variant="secondary">Click me</Button>;
}Examples
Variants
Primary
<Button variant="primary">Primary</Button>
Secondary
<Button variant="secondary">Secondary</Button>
Ghost
<Button variant="ghost">Ghost</Button>
Destructive
<Button variant="destructive">Destructive</Button>
Outline
<Button variant="outline">Outline</Button>
Sizes
<Button size="xs" variant="secondary">Extra Small</Button> <Button size="sm" variant="secondary">Small</Button> <Button size="base" variant="secondary">Base</Button> <Button size="lg" variant="secondary">Large</Button>
With Icon
<Button variant="secondary" icon={PlusIcon}>
Create Worker
</Button>Icon Only
<Button variant="secondary" shape="square" icon={PlusIcon} />
<Button variant="secondary" shape="circle" icon={PlusIcon} />Loading State
<Button variant="primary" loading> Loading... </Button>
Disabled State
<Button variant="secondary" disabled> Disabled </Button>
API Reference
| Prop | Type | Default |
|---|---|---|
| variant | "primary" | "secondary" | "ghost" | "destructive" | "outline" | "secondary" |
| size | "xs" | "sm" | "base" | "lg" | "base" |
| shape | "base" | "square" | "circle" | "base" |
| icon | Icon | React.ReactNode | undefined |
| loading | boolean | false |
| disabled | boolean | false |