Button
Buttons trigger actions. They support multiple variants, sizes, loading states, and icons.
$cookest-ui add button
Variants
Four visual variants for different levels of emphasis.
Sizes
Buttons come in sm, md, and lg sizes.
States
Loading, disabled, and full-width button states.
With Icons
Buttons can include leading or trailing icons.
Interactive
Pick a variant and size to see a live preview.
Variant
Size
Loading
Disabled
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "ghost" | "danger" | "primary" | Visual style of the button. |
size | "sm" | "md" | "lg" | "md" | Size of the button. |
loading | boolean | false | Shows a spinner and disables interaction while loading. |
disabled | boolean | false | Prevents interaction when true. |
fullWidth | boolean | false | Stretches the button to fill its container. |
iconLeft | ReactNode | — | Icon rendered before the label. |
iconRight | ReactNode | — | Icon rendered after the label. |
children | ReactNode | — | Button label content. |
Related Components
Best Practices
✅ Do
- Use primary for the main CTA
- Use descriptive labels
- Show loading state during async operations
- Use iconLeft for actions like Save/Delete
❌ Don't
- Put multiple primary buttons next to each other
- Use vague labels like "Click Here"
- Disable without explanation
- Use ghost variant for important actions
Accessibility
| Feature | Support |
|---|---|
| Keyboard | Space/Enter to activate |
| Focus visible outline | Visible focus ring on keyboard navigation |
| aria-label | Required for icon-only buttons |
| aria-disabled | Communicated to assistive technologies |
| role="button" | Implicit on native button element |