Flint Components
Button
Buttons start an action. Flint has four: primary, secondary, danger and text.
Component tokens
Every value button uses, on every platform. Colors point at semantic tokens, so they follow light and dark on their own. The focus ring is shared by every component.
| Token | CSS | Swift | Points at | Light | Dark |
|---|---|---|---|---|---|
button.radius | --button-radius | Flint.Component.buttonRadius | radius.control | 8px | 8px |
button.height | --button-height | Flint.Component.buttonHeight | control.md | 40px | 40px |
button.primary.bg | --button-primary-bg | Flint.Component.buttonPrimaryBg | semantic.action.primary | #1550a0 | #93c5fd |
button.primary.bgHover | --button-primary-bg-hover | Flint.Component.buttonPrimaryBgHover | semantic.action.primaryHover | #0d3b6e | #bfdbfe |
button.primary.fg | --button-primary-fg | Flint.Component.buttonPrimaryFg | semantic.action.onPrimary | #ffffff | #0d1117 |
button.secondary.bg | --button-secondary-bg | Flint.Component.buttonSecondaryBg | semantic.surface.default | #ffffff | #161b22 |
button.secondary.bgHover | --button-secondary-bg-hover | Flint.Component.buttonSecondaryBgHover | semantic.surface.subtle | #f1f5f9 | #21262d |
button.secondary.fg | --button-secondary-fg | Flint.Component.buttonSecondaryFg | semantic.action.primary | #1550a0 | #93c5fd |
button.secondary.border | --button-secondary-border | Flint.Component.buttonSecondaryBorder | semantic.border.control | #64748b | #6e7681 |
button.danger.bg | --button-danger-bg | Flint.Component.buttonDangerBg | semantic.action.danger | #991b1b | #fca5a5 |
button.danger.bgHover | --button-danger-bg-hover | Flint.Component.buttonDangerBgHover | semantic.action.dangerHover | #7f1d1d | #fecaca |
button.danger.fg | --button-danger-fg | Flint.Component.buttonDangerFg | semantic.action.onDanger | #ffffff | #0d1117 |
button.text.bgHover | --button-text-bg-hover | Flint.Component.buttonTextBgHover | semantic.surface.subtle | #f1f5f9 | #21262d |
button.text.fg | --button-text-fg | Flint.Component.buttonTextFg | semantic.text.link | #1550a0 | #93c5fd |
button.disabled.bg | --button-disabled-bg | Flint.Component.buttonDisabledBg | semantic.action.disabledBg | #f1f5f9 | #21262d |
button.disabled.fg | --button-disabled-fg | Flint.Component.buttonDisabledFg | semantic.action.disabled | #64748b | #828b95 |
button.disabled.border | --button-disabled-border | Flint.Component.buttonDisabledBorder | semantic.border.disabled | #e2e8f0 | #545d68 |
focus.ring.color | --focus-ring-color | Flint.Component.focusRingColor | semantic.action.focusRing | #1550a0 | #60a5fa |
focus.ring.width | --focus-ring-width | Flint.Component.focusRingWidth | 2 | 2px | 2px |
focus.ring.offset | --focus-ring-offset | Flint.Component.focusRingOffset | 2 | 2px | 2px |
Contrast
Measured on every build. See Contrast for every pairing.
| Pairing | Needs | Light | Dark |
|---|---|---|---|
| button primary label | 7:1 | 7.82:1 Pass | 10.49:1 Pass |
| button primary hover label | 7:1 | 11.24:1 Pass | 13.32:1 Pass |
| button secondary label | 7:1 | 7.82:1 Pass | 9.59:1 Pass |
| button secondary hover label | 7:1 | 7.13:1 Pass | 8.44:1 Pass |
| button secondary edge | 3:1 | 4.55:1 Pass | 4.12:1 Pass |
| button danger label | 7:1 | 8.31:1 Pass | 9.97:1 Pass |
| button danger hover label | 7:1 | 10.02:1 Pass | 13.08:1 Pass |
| button text label | 7:1 | 7.47:1 Pass | 10.49:1 Pass |
| button text hover label | 7:1 | 7.13:1 Pass | 8.44:1 Pass |
| button disabled label | 4.5:1 | 4.34:1 Advisory | 4.40:1 Advisory |
| focus ring on page | 3:1 | 7.47:1 Pass | 7.44:1 Pass |
| focus ring on default | 3:1 | 7.82:1 Pass | 6.80:1 Pass |