Button
Button Component
Playground
Props
| Prop | Type | Default | Value |
|---|---|---|---|
variant | | 'primary'
| 'tonal'
| 'secondary'
| 'outline'
| 'ghost'
| 'danger'
| 'dangerTonal'
| 'success'
| 'successTonal' | — | |
size | 'sm' | 'md' | 'lg' | 'xl' | — | |
fullWidth | boolean | — | |
disabled | boolean | — | |
isLoading | boolean | — | |
leftIcon | ReactNode | — | — |
rightIcon | ReactNode | — | — |
Usage
<Button variant="primary" size="md">
Click me
</Button>
<Button variant="outline" leftIcon={<Icon />} isLoading>
Loading...
</Button>Variants
Style Variants
primary
tonal
secondary
outline
ghost
danger
dangerTonal
success
successTonal
Disabled State
primary disabled
tonal disabled
secondary disabled
Sizes
sm
md
lg
xl