Link
Navigation. fg-signal, underline, offset 0.18em. Inherit font.
Spec
- Color
--fg-signal. Underline offset 0.18em. - Inherits font size and family. Multiline wraps; underline stays.
- Icon after the text, never icon-only. Icon-only is a Button.
- Disabled:
aria-disabled="true", nohref. - Actions (submit, save, delete) are Buttons, not Links.
- External: the accessible name includes that it opens a new window.
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
Inherit font, underline offset 0.18em, icon after
See the Button spec for the filled action. External example: WCAG 2.2 quick reference (opens in a new window) .
Disabled trail has no href.
Do / Don't
| Do | Don't |
|---|---|
| Underlined signal text. | Color-only links. |
| Icon after. | Icon-only “link”. |
| “Export guide (opens in a new window)”. | A naked external icon with no name change. |
Motion
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
transform: scale(0.97) | 120ms --dur-fast | --ease-out | :active | instant |
| color / border | 120ms --dur-fast | --ease-out | :hover | instant |
| outline | 80ms --dur-micro | --ease-out | :focus-visible | instant |
Accessibility
- Contrast:
--fg-signalon paper is#0F6E5C(AA). Brand teal#1AA68Aon paper is not a text color. - Disabled has no href. Don't leave a dead href and point-events none.
- Keyboard: native focus. 2px
--focusoffset 2px. - These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.