Display related but alternate actions for a button.
The basic ButtonDropdown usage.
Show friendly load indicator.
Disable all buttons.
You can change the color of the ButtonDropdown with the property type.
Specify the status of a button individually.
The color and size of the right icon will be set automatically.
Use icon on an item to show an icon before its label. Items in the list align to the left and the list grows to fit them.
Use align to place the label of the main button at the start, center or end. It shows when the button is wider than its text.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| type | button type | ButtonDropdownTypes | ButtonDropdownTypes | default |
| loading | display loading indicator | boolean | - | false |
| auto | autoscale width | boolean | - | false |
| align | main button label alignment | 'start' | 'center' | 'end' | - | center |
| disabled | disable button | boolean | - | false |
| icon | custom right icon | ReactNode | - | ButtonDropdownIcon |
| ... | native props | HTMLAttributes | 'autoFocus', 'name', 'className', ... | - |
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| type | button type | ButtonDropdownTypes | ButtonDropdownTypes | default |
| main | the main action | boolean | - | false |
| icon | icon before the label | ReactNode | - | - |
| onClick | event handler | MouseEventHandler | - | - |
| ... | native props | ButtonHTMLAttributes | 'id', 'name', 'className', ... | - |
type ButtonDropdownTypes =
| 'default'
| 'primary'
| 'secondary'
| 'success'
| 'warning'
| 'error'
| 'info'