Basic Components
Button
The button component provides a variety of styles, sizes, and states, supporting icon and text combinations, as well as loading states.
Usage Examples
Button Variants
Set the variant property to switch between different button styles: primary (default), outline, ghost, and link.
Button Sizes
Use the size property to change button sizes: xs, sm, md (default), lg, and xl.
Button States
Buttons support disabled state and loading state, which automatically displays a loading indicator and disables clicking.
Buttons with Icons
Buttons support adding prefix and suffix icons with the prefix-icon and suffix-icon properties, accepting any iconify icon format like i-heroicons-plus.
Full Width Button
Add the full-width property to create buttons that occupy the full width of their parent container, commonly used on mobile devices or form submission scenarios.
Button Colors
Set different button colors with the color property: primary (default), secondary, success, warning, error, and info.
Primary Style with Different Colors
Outline Style with Different Colors
Outline button style combined with different colors. Set variant="outline" along with the color property.
Ghost Style with Different Colors
Ghost button style combined with different colors. Set variant="ghost" along with the color property.
Properties
| Property | Basic component module for translation keys shared across all component documentation pages | Type | Default |
|---|---|---|---|
| variant | The appearance variant of the button. Options: 'primary', 'outline', 'ghost', 'link' | string | primary |
| size | The size of the button. Options: 'xs', 'sm', 'md', 'lg', 'xl' | string | md |
| color | The color theme of the button. Options: 'primary', 'secondary', 'success', 'warning', 'error', 'info' | string | primary |
| disabled | Whether the button is disabled | boolean | false |
| loading | Whether to display loading state | boolean | false |
| full-width | Whether the button should take up the full width of its container | boolean | false |
| prefix-icon | Icon to display before the button text | string | |
| suffix-icon | Icon to display after the button text | string |