Usage notes
- Baseline button styling and spacing.
- Start here before choosing a semantic variant.
Usage notes
- Adjust density and hierarchy without changing style.
- Default is preferred unless space is tight.
Usage notes
- Primary action in neutral contexts.
- Strong emphasis without brand color.
- Limit to one per section.
Usage notes
- Secondary actions or alternatives.
- Lower emphasis while keeping structure.
- Pair with default or primary for hierarchy.
Usage notes
- Tertiary actions or toolbar controls.
- Minimal chrome keeps focus on content.
- Give it breathing room.
Usage notes
- Irreversible or risky actions.
- Signals danger clearly.
- Use with confirmation or undo.
Usage notes
- Inline actions in text.
- Matches link affordance.
- Avoid for primary call-to-action.
Usage notes
- Space-constrained actions.
- Icon carries meaning; add aria-label.
- Pair with tooltip when needed.
Usage notes
- Icon improves recognition.
- Keep icon leading and label short.
Usage notes
- Friendly or pill-like UI.
- Softens emphasis.
- Keep radius consistent within a section.
Usage notes
- Shows progress during async actions.
- Keep label visible or swap only on submit.
Usage notes
- Indicates an action is unavailable or blocked.
- Pair with helper text so users know how to enable it.
- Prefer loading states for in-progress actions.
Usage notes
- Brand-primary emphasis.
- Use for the single most important action.
- Avoid multiple primaries in the same view.
Usage notes
- Supporting actions.
- Medium emphasis.
- Pair with primary or outline.
Usage notes
- Neutral, low-priority actions.
- Adds variety without heavy emphasis.
- Keep hierarchy clear with other variants.
Usage notes
- Accent actions that need contrast.
- Use sparingly to avoid noise.
Usage notes
- Cautionary actions.
- Use clear, specific labels.
Usage notes
- High-risk actions.
- Pair with confirmation.
Usage notes
- Positive or confirming actions.
- Avoid overuse to keep impact.