Button
In progress
ARIA
RTL
Buttons allow users to take actions, and make choices, with a single tap.
Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:
- Modal windows
- Forms
- Cards
- Toolbars
Default
Button as a link HTML element
Variants
Sizes
Icons
Full width
Disabled
Animations
Button props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| animation | 'progress' | 'success' | 'error' | 'pulse' | boolean | No | - | Animation of button |
| as | a | button | No | button | Rendered HTML element |
| children | React.ReactNode; | No | - | Children content |
| disabled | boolean | No | false | Disabled button |
| fullWidth | boolean | No | false | Full width button |
| iconLeft | JSX.Element | No | - | Left icon |
| iconRight | JSX.Element | No | - | Right icon |
| size | xs | sm | md | lg | xl | No | md | Size of button |
| variant | primary | secondary | tertiary | ghost | No | primary | Visual/Logical variant of button |