Button
Product-agnostic action component for forms, dialogs, and workflows.
Quick Preview
Usage
<Button>Apply now</Button>Examples
Variants
Use variant to set action priority and visual tone.
Sizes
Use size for dense controls, default form actions, large CTAs, and icon-only buttons.
Back Navigation
Use variant="back" with a leading chevron for back navigation. Choose Button
for history-driven navigation or ButtonLink when the destination has a stable URL.
The consuming app remains responsible for the navigation behavior.
<Button variant="back" onClick={() => history.back()}>
<ChevronLeftIcon />
Back
</Button>Use variant="whatsapp" for WhatsApp actions. Text-and-icon buttons keep the normal pill padding; icon-only buttons render as circles when the icon is the only child.
Loading and Disabled
Use isLoading when an action is in flight. It disables the button and shows progress without changing layout.
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
variant | button variant union | "primary" | Controls visual emphasis. |
size | button size union | "md" | Controls height, padding, and icon scale. |
isLoading | boolean | false | Shows a spinner and disables interaction. |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.