Button component is used to handle user interactions.
Colors
Pass in an object containing color tokens into colors prop. You can change color of border, background, danger color and more using primary, error, text, and so on.
Danger
Use danger prop to signal caution.
Disabled
Use disabled prop to show disabled UI of the button.
Icon
Pass in an svg icon component into icon prop. If props like stroke and fill have "currentColor" value, the svg icon will follow the text color of the button.
Variant & Size
Button components has default and primary variants. Size prop determines the paddings of the button.
Button props extends the button HTML attributes.
| Property | Description | Type | Default |
|---|---|---|---|
| variant | The variant of the button | 'primary' | 'default' | 'default' |
| colors | The color variables of the button, i.e. var(--primary) | { | undefined |
| danger | Signals that it should be used with caution. It is often used in a delete button or to show the error status. | boolean | false |
| size | The size of the button | 'sm' | 'md' | 'lg' | 'md' |
| icon | Icon of the button passed in as a form of ReactNode | React.ReactNode | undefined |
| ellipsis | Whether the button text should be truncated with an ellipsis. The button should have a width to be able to truncate the text. | boolean | false |
