Button
Button is used to start an instant operation and is used when triggers an action or event
Variant
There's few variant of appearance of the button, you can set the
variant prop
value to default, twoTone, solid, or plain.Size
Buttons come with four type of size,
xs, sm, md & lg, The default size is md.Color
You can customize button styles by overriding Tailwind CSS.
Disabled
Disabled Button prevents user interaction, set
disabled prop to true to disabled a button.Shape
Button shape can be set to
none or circle, the default shape is roundIcon
Button can contain an icon by insert an icon to
icon propButton With Icon
Icons also can be added to buttons and combined with text as the examples below.
Loading
Set
loading prop to true to shows a loading indicator, it will disabled the button as well.Block
Buttons can stretch to fill the width by adding
block propAPI
Button
| Prop | Description | Type | Default |
|---|---|---|---|
| variant | The variant of the button | 'solid' | 'plain' | 'default' | 'default' |
| size | Size of the button. | 'lg' | 'md' | 'sm' | 'xs' | 'md' |
| clickFeedback | Feedback effect upon button clicked | boolean | true |
| customColorClass | Callback function to create a custom color for button | (state: {active: boolean, unclickable: boolean}) => string | - |
| shape | Border radius of the button | 'round' | 'circle' | 'none' | 'round' |
| disabled | Prevents user interact with the button | boolean | false |
| icon | Render icon | string | ReactNode | - |
| active | Set button to active status | boolean | false |
| loading | Show a loading spinner & disable the button | boolean | false |
| block | Make button fill to its container width | boolean | false |