Button
React componentTrigger an action with clear hierarchy and immediate feedback.
Try it out
Use the live controls or open the Code tab to view and copy the example.
API reference
Generated from the package’s TypeScript exports. Standard React event and ARIA attributes are also accepted where the component wraps a native element.
| Prop | Type | Description |
|---|---|---|
variant | "primary" | "secondary" | "tertiary" | undefinedDefault: "secondary" | Visual emphasis appropriate to the action hierarchy. |
tone | "neutral" | "critical" | undefinedDefault: "neutral" | Semantic status treatment; always pair color with text. |
size | Size | undefinedDefault: "medium" | Size within the shared component scale. |
loading | boolean | undefined | Standard React / HTML attribute passed to the underlying element. |
icon | ReactNode | See the typed definition and working example for this option. |
fullWidth | boolean | undefined | See the typed definition and working example for this option. |
asChild | boolean | undefined | See the typed definition and working example for this option. |
disabled | boolean | undefined | Disables interaction (or date matchers for DatePicker). |
name | string | undefined | Field name used in form submission. |
type | "submit" | "reset" | "button" | undefinedDefault: "button" | Standard React / HTML attribute passed to the underlying element. |
value | string | number | readonly string[] | undefined | Controlled value. Pair with its change callback. |
defaultChecked | boolean | undefined | Standard React / HTML attribute passed to the underlying element. |
defaultValue | string | number | readonly string[] | undefined | Initial value for uncontrolled usage. |
className | string | undefined | Additional CSS class names. |
id | string | undefined | Standard React / HTML attribute passed to the underlying element. |
style | CSSProperties | undefined | Inline styles, including CSS custom property overrides. |
rel | string | undefined | Standard React / HTML attribute passed to the underlying element. |
children | ReactNode | Content rendered inside the component. |
onFocus | FocusEventHandler<HTMLButtonElement> | undefined | Standard React / HTML attribute passed to the underlying element. |
onBlur | FocusEventHandler<HTMLButtonElement> | undefined | Standard React / HTML attribute passed to the underlying element. |
onChange | ChangeEventHandler<HTMLButtonElement, Element> | undefined | Standard React / HTML attribute passed to the underlying element. |
onError | ReactEventHandler<HTMLButtonElement> | undefined | Standard React / HTML attribute passed to the underlying element. |
onClick | MouseEventHandler<HTMLButtonElement> | undefined | Standard React / HTML attribute passed to the underlying element. |
Accessibility & interaction
Maintain an understandable accessible name and preserve visible focus for all actions.
Visible focus, reduced motion, and both color themes are shared across staqui. Choose labels and document structure that make sense in your application; automated checks do not replace assistive-technology testing.
Variants & implementation notes
Pill-shaped buttons come in three variants. Use primary for the main action, secondary for supporting actions, and tertiary for quieter actions. Apply the critical tone to destructive actions at any level of emphasis. Small, medium, and large have minimum heights of 28px, 34px, and 42px. Use fullWidth to fill the available space. On native buttons, loading disables interaction and centers a spinner while preserving the button width. Use asChild with a single link for navigation.
Use the typed API above for the supported variants. The example demonstrates the primary composition; shared controls inherit hover, focus, active and disabled treatment where applicable.