Variants
Primary and défault style
<Button variant="primary" leftIcon={Placeholder}>Button primary</Button>Secondary style
<Button variant="secondary" leftIcon={Placeholder}>Button secondary</Button>Tertiary style
<Button variant="tertiary" leftIcon={Placeholder}>Button tertiary</Button>Link primarry color style
<LinkButton href={"#"} variant="link-color" rightIcon={Placeholder}>link-color Button</LinkButton>Link gray style
<LinkButton href={"#"} variant="link-gray" rightIcon={Placeholder}>link-gray Button</LinkButton>For destructive or error actions
<Button variant="primary-destructive" leftIcon={Placeholder}>Button primary-destructive</Button>For destructive or error actions
<Button variant="secondary-destructive" leftIcon={Placeholder}>Button secondary-destructive</Button>For destructive or error actions
<Button variant="tertiary-destructive" leftIcon={Placeholder}>Button tertiary-destructive</Button>Link destructive
<LinkButton href={"#"} variant="link-destructive" rightIcon={Placeholder}>link-destructive Button</LinkButton>Icon Only Button
<Button leftIcon={Placeholder}/>Sizes
<Button size="sm|md|lg|xl">Button text</Button>States
<Button isLoading>Button</Button><Button isDisabled>Button</Button>API Reference
| Props | Type | Default | Description |
|---|---|---|---|
| variant? | 'primary' | 'secondary' | 'tertiary' | 'link-color' | 'link-gray' | 'primary-destructive' | 'secondary-destructive' | 'tertiary-destructive' | 'link-destructive' | primary | Primary button. |
| size? | 'sm' | 'md' | 'lg' | 'xl' | sm | The button size . |
| leftIcon? | Icon | - | The left icon. |
| rightIcon? | Icon | - | The right icon. |
| isLoading? | boolean | false | For loading state |
| isDisabled? | boolean | false | For disabled state |
| className? | string | - | Additional CSS classes to apply to the button. |