Link
Underlined by default, quiet when inside navigation, and a button that looks like one.
Examples
Links
A default link, a quiet link, and .
Anatomy
a[href] | Every link: accent colour, a faint underline that firms up on hover. No class needed. |
a[data-quiet] | Quiet link: inherits the surrounding colour; the underline appears only on hover. |
button.link | A <button> that acts but reads as inline text. Strips the button padding, border and fill. |
API
| Attribute | Values | Description |
|---|---|---|
data-quieton a | boolean | Inherits the text colour and hides the underline until hover. For links in navigation, footers and dense lists. |
Accessibility
- Use
<a href>when it goes somewhere andbutton.linkwhen it does something; the look is the same, the semantics are not. - A quiet link has no colour cue and no underline at rest. Use it where the context already says "this is a link", such as a nav or a footer, not in running text.
- Link text should make sense on its own: screen readers list links out of context.
| Key | Effect |
|---|---|
| Enter | Follows an <a href>. A button.link also answers Space. |