Actions
Button
The basic control for running an action. Pair variant (how it looks) with status (the color and meaning) to suit it.
ReactVueWeb Components
View in Storybook Playground
Examples
<Button status="danger" variant="outline" onClick={remove}>Delete</Button>
<Button as="a" href="/docs">Read the docs</Button>Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | ButtonVariant | solid | Visual style. @default 'solid' |
status | ButtonStatus | primary | Semantic intent / color. @default 'primary' |
size | ButtonSize | md | Size. @default 'md' |
block | boolean | false | Stretch to fill the container width. @default false |
loading | boolean | false | Show a spinner and disable interaction. @default false |
loadingLabel | string | Loading | Accessible label announced while `loading` is true. @default 'Loading' |
startIcon | ReactNode | — | Icon rendered before the label. |
endIcon | ReactNode | — | Icon rendered after the label. |
disabled | boolean | — | Disable the button. |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.