← All matrices
Button
5 variants × 5 states + 3 sizes + loading. Pseudo-state via .is-hover / .is-focus / .is-active / .is-disabled.
Source react/src/atoms/Button.tsx
Bundle 1.30 KB min / 0.68 KB gz
LOC 66
Variant × State (size = md)
| Variant |
Default |
Hover |
Focus |
Active |
Disabled |
| primary |
|
|
|
|
|
| secondary |
|
|
|
|
|
| ghost |
|
|
|
|
|
| outline |
|
|
|
|
|
| danger |
|
|
|
|
|
Size axis (variant = primary)
| Size | Default | With loading |
|---|
| sm | | |
| md | | |
| lg | | |
Props: variant, size, loading, leftIcon, rightIcon + all native button attrs.
Disabled also triggered by: loading=true (auto-applies disabled attr).