Flint Components
Button
Buttons start an action. Flint has four: primary, secondary, danger and text.
Keyboard
| Key | What it does |
|---|---|
| Tab | Moves focus to the button. A solid 2px ring shows where focus is. |
| Enter or Space | Activates the button. |
Screen readers
- The visible label is the accessible name. Don't override it with a different aria-label.
- An icon-only button needs an aria-label, and its icon is aria-hidden.
- A toggle button uses aria-pressed. A button that opens a menu uses aria-expanded.
- Use a real <button>. A <div> with a click handler is not reachable by keyboard.
Contrast
- Button primary label: 7.82:1 light, 10.49:1 dark (needs 7:1).
- Button primary hover label: 11.24:1 light, 13.32:1 dark (needs 7:1).
- Button secondary label: 7.82:1 light, 9.59:1 dark (needs 7:1).
- Button secondary hover label: 7.13:1 light, 8.44:1 dark (needs 7:1).
- Button secondary edge: 4.55:1 light, 4.12:1 dark (needs 3:1).
- Button danger label: 8.31:1 light, 9.97:1 dark (needs 7:1).
- Button danger hover label: 10.02:1 light, 13.08:1 dark (needs 7:1).
- Button text label: 7.47:1 light, 10.49:1 dark (needs 7:1).
- Button text hover label: 7.13:1 light, 8.44:1 dark (needs 7:1).
- Focus ring on page: 7.47:1 light, 7.44:1 dark (needs 3:1).
- Focus ring on default: 7.82:1 light, 6.80:1 dark (needs 3:1).
Target size
Buttons are 40px tall (control.md), above the 24px minimum. On iOS, at least 44pt.
The test for every component: can someone finish the task with a keyboard alone, and with VoiceOver or NVDA alone?