Button
Triggers an action or event
Category: inputs · WCAG 2.2-AA · action, form, interactive
Variants
- primary
- secondary
- ghost
- destructive
Sizes
- sm
- md
- lg
States
- idle
- loading
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'ghost' | 'destructive' | primary | Selects the visual style variant. |
size | 'sm' | 'md' | 'lg' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
loading | boolean | false | When true, shows a loading state. |
disabled | boolean | false | When true, disables the control and removes it from the tab order. |
asChild | boolean | false | When true, renders the child element as the root via Slot, merging props (polymorphic rendering). |
onClick | React.MouseEventHandler<HTMLButtonElement> | — | Called when the element is clicked. |
Design tokens
--cascivo-color-accent--cascivo-color-accent-hover--cascivo-color-accent-active--cascivo-color-text-on-accent--cascivo-color-destructive--cascivo-radius-button--cascivo-focus-ring--cascivo-disabled-opacity--cascivo-text-ui--cascivo-text-body
When to use
- Triggering an action or navigation the user initiates by click/press
- Submitting a form or confirming a decision
When not to use
- Navigation between pages where a real link is semantically correct — use an anchor
- Toggling a binary setting — use Toggle; persistent selection — use Checkbox/Radio
How to build an accessible Button in React →
Examples
Primary
<Button>Click me</Button>Loading
<Button loading>Saving…</Button>Destructive
<Button variant="destructive">Delete</Button>As link
Render button styling on a real anchor (keeps middle-click / open-in-new-tab).
<Button asChild><a href="/pricing">View pricing</a></Button>