Inputs
Button
The main way to trigger an action. Filled gradient with a thin highlight stroke, pill corners, and a leading or trailing icon slot.
Examples
Large 44 · Medium 32 · Small 27
Styles
Icon slots · loading (click to try)
States
| Default | Hover | Focus visible | Pressed | Disabled | |
|---|---|---|---|---|---|
| Primary | |||||
| Secondary | |||||
| Outlined | |||||
| Neutral | |||||
| Delete |
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Container | Pill, 40px radius, gradient fill | Required |
| 2 | Leading icon | Optional 16px icon, decorative | Optional |
| 3 | Label | Manrope SemiBold, sentence case verb | Required |
| 4 | Trailing icon | Optional, decorative | Optional |
| 5 | Loading indicator | Replaces the leading icon, label stays | Optional |
Specifications
| Sizes | Large 44px · Medium 32px · Small 27px |
|---|---|
| Horizontal padding | 16px · 12px · 8px (vertical 0) |
| Type | Manrope SemiBold 16px · 14px · 11px |
| Corner radius | 40px (pill) |
| Slots | Leading icon · Label · Trailing icon |
| Styles | Filled primary (indigo) · Filled secondary (purple) · Outlined · Filled neutral (slate) |
| Status usage | Success · Delete · Alert |
Interaction
| Key | Result |
|---|---|
| Tab Shift+Tab | Moves focus to and from the control |
| Enter | Activates |
| Space | Activates on key up |
| Trigger | Response |
|---|---|
| Hover | Overlay at 10% (hover-overlay-opacity); cursor stays default on non-links |
| Press | Scale to 0.97 in 100ms; released on pointer up |
| Touch | Target at least 44px, with a halo if the visual is smaller |
| Loading | Set aria-busy and keep the label, so width does not jump; block repeat clicks |
Accessibility
role · button
1.4.3Contrast (Minimum)1.4.11Non-text Contrast2.1.1Keyboard2.4.7Focus Visible2.5.3Label in Name2.5.8Target Size (Minimum)4.1.2Name, Role, Value
| Requirement | How Rig meets it |
|---|---|
| Native element | Use <button type="button">. Never a div with a click handler. |
| Name | Visible label is the accessible name (WCAG 2.5.3). Icon-only needs aria-label. |
| Contrast | Label on fill at least 4.5:1. Filled styles in this site use darker stops than the Figma 500 tokens to meet it. |
| Focus | 2px ring offset by 2px, 3:1 against both the button and the page |
| Disabled | Prefer the disabled attribute. If the reason matters, keep it enabled and explain it in text. |
| Navigation | If it goes to another page it is a link, styled as a button |
Read the matching WAI pattern ↗
Usage
| Do | Don’t |
|---|---|
| One filled primary action per view | Do not use “Click here” or “Submit” as labels |
| Start the label with a verb: Save changes, Send invite | Do not disable a primary button with no explanation |
| Show a loading state for actions longer than 1 second | Do not nest interactive elements inside a button |
Notes from the Figma file
- Width is dynamic: the label sets it, auto-layout keeps the padding.
- Use one filled primary button per view. Everything else is outlined or neutral.
- Destructive confirmations pair a neutral Cancel with the error style.