Buttons
Buttons
Section titled “Buttons”Buttons communicate actions and guide users through flows. Following patterns from Atlassian DS and Helsinki DS.
Variants
Section titled “Variants”Button variants
| Variant | Purpose | Style |
|---|---|---|
| Primary | Main action | Filled brand color, white text |
| Secondary | Alternative action | Outlined, brand border & text |
| Ghost | Tertiary action | No border, subtle hover bg |
| Danger | Destructive action | Red fill, white text |
Button sizes
| Size | Height | Padding X |
|---|---|---|
| sm | 32px | 12px |
| md | 40px | 20px |
| lg | 48px | 24px |
States
Section titled “States”Each button variant supports these states:
| State | Description |
|---|---|
| Default | Normal resting state |
| Hover | Slightly darker background |
| Active | Darker still, subtle inset shadow |
| Focus | Visible focus ring (2px, brand color) |
| Disabled | 50% opacity, cursor: not-allowed |
| Loading | Spinner replaces or accompanies text |
- One primary button per section for the main action
- Secondary for alternative or cancel actions
- Ghost for low-priority in dense UIs
- Button labels should be verbs: “Save changes”, “Delete item”
- Minimum 44x44px touch target on mobile