Button
Primary action control that can render as a button or link.
Add it to your project
Eject the complete button group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject buttonbash
npx toucan eject buttonapp.tsx
import { Button } from '@/components/toucan/button';Use when
A user triggers an action, submits a form, or follows a styled call to action.
Avoid when
The interaction is ordinary inline navigation; use Link.
Example
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Button
Button
Props type: ButtonProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
as | "button" | "a" | 'button' | No | The HTML element rendered by the component. |
disabled | boolean | false | No | Prevents interaction when true. |
iconOnly | boolean | false | No | Use icon-only sizing; provide an accessible name. |
loading | boolean | false | No | Show the loading state and prevent interaction. |
pressed | boolean | undefined | No | Controlled pressed state. |
size | "sm" | "md" | "lg" | 'md' | No | Visual size variant. |
toggle | boolean | false | No | Enable controlled toggle-button semantics. |
variant | "primary" | "secondary" | "ghost" | 'primary' | No | Semantic visual variant. |
Also accepts the native button or anchor attributes that are not replaced by a Toucan prop.
Type exports
ButtonProps
Accessibility
- Defaults to type="button".
- Icon-only buttons require aria-label or aria-labelledby.
- Loading and disabled states prevent interaction.
Token families
buttoncolor.primary