Button
The system's only button. Four variants, four sizes.
Variants
One primary per view. If two things on screen are both filled, neither reads as the thing to do. danger is the only red fill in the system — reserve it for irreversible actions, so red never becomes background noise.
Sizes
Loading
Shows a spinner, disables the control, and sets aria-busy — so a screen reader hears “busy” rather than the button simply going quiet.
Focus, in both themes
Tab into these. The ring is identical across variants on purpose: a keyboard user moving between two Averoa tools should not have to relearn where they are.
light
dark
Guidance
Use it when
- Something happens when it is clicked — submit, deploy, approve.
- A destructive action, with variant="danger".
Reach for something else when
- Navigation. That is a link, and it should be a link — middle-click and “open in new tab” have to work.
- A row of five equal buttons. If everything is primary, nothing is.
- An icon-only button without aria-label. It is unlabelled to a screen reader.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "outline" | "ghost" | "danger" | "default" | Visual weight. One default per view. |
| size | "default" | "sm" | "lg" | "icon" | "default" | Height and padding. |
| loading | boolean | false | Spinner, disabled, aria-busy. |
| … | ButtonHTMLAttributes | — | Everything a native button takes, including type and onClick. |