Button
Buttons are interactive elements that allow users to perform actions or navigate to different parts of an application.
Loading Code Block...Installation
Section titled “Installation”To get started, install Butterfly DS via aqua:
Loading Code Block...Loading Code Block...Loading Code Block...Variants
Section titled “Variants”Loading Code Block...Outline
Section titled “Outline”Loading Code Block...Disabled
Section titled “Disabled”Loading Code Block...Loading
Section titled “Loading”Loading Code Block...Button with Icon
Section titled “Button with Icon”Loading Code Block...| Props | Default | Type | Description |
|---|---|---|---|
| variant | default | 'default ' | 'secondary' | 'ghost' | 'link' | The visual style variant of the button |
| size | md | 'xs' | 'sm' | 'md' | 'lg' | The size of the button |
| disabled | false | boolean | Disables the button, preventing user interaction |
| isOutline | false | boolean | Applies an outline style to the button |
| icon | - | ReactNode | Icon to display on the button |
| iconPosition | 'left' | 'left' | 'right' | Position of the icon relative to the text |
| fullWidth | false | boolean | Makes the button take the full width of its container |
| text | - | string | Text content of the button |
| onClick | - | function | Function to call when the button is clicked |
| fontCase | - | 'uppercase' | 'sentence' | Controls the text casing of the button |
| isLoading | false | boolean | Shows a loading spinner on the button |
| loadingText | - | string | Text to display when the button is in loading state |
| hideLoadingSpinner | false | boolean | Hides the loading spinner while keeping the loading state |
| href | - | string | URL to navigate to when the button is clicked |
| destructive | false | boolean | Applies a destructive style to the button, typically used for delete actions |