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 |