Sidera/Components/Button
Button
Buttons trigger an action or a change of state. They are the most direct expression of intent in the interface — deliberate, legible, and never ambiguous.
CategoryActions
StatusStable
Version2.0
01 —Overview
Use a button to let people perform an action and commit to it — submit, confirm, continue. Each screen carries a single primary button; everything else steps down to secondary or ghost so the most important action is never in question.
02 —Variants
Four variants express a clear hierarchy of intent: primary for the main path, secondary for alternatives, ghost for low-emphasis actions, and danger for destructive ones.
03 —Sizes
04 —States
05 —Usage
Do
- Keep one primary action per view.
- Lead labels with a verb: "Save changes".
- Reserve the filled style for the main path.
Don't
- Stack multiple filled buttons together.
- Use vague labels like "OK" or "Click here".
- Disable without explaining why.
06 —Properties
PropTypeDefault
variantprimary | secondary | ghost | dangerprimary
sizesm | md | lgmd
loadingbooleanfalse
disabledbooleanfalse
07 —Accessibility
- Rendered as a native <button> with a clear, descriptive label.
- Visible focus ring (3px, AA contrast) on keyboard focus.
- Operable with Enter and Space; disabled buttons are skipped in tab order.
- Loading state announces busy via aria-busy.