Key
Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.
Kit part · Navigation
Link
Printed type that goes somewhere. The words stay in ink and the rule under them is engraved into the plate: cut darker when you hover, deeper when you press.
- Element
- <a href>
- Needs
- kit.css
- Rules
- link.rules.md · 5
- Finishes
- Aluminium · Graphite · Porcelain · Black
- Volumes
- Tactile · Quiet
Variants
Firmware 4.2
Installs tonight. What changed
Every state, at once
Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.
Aluminium
| Part | Rest | Hover | Pressed | Visited · current | Focus | Disabled |
|---|---|---|---|---|---|---|
| In text | Returns | Returns | Returns | Returns | Returns | Returns |
| External | Manual (opens in a new tab) | Manual (opens in a new tab) | Manual (opens in a new tab) | Manual (opens in a new tab) | Manual (opens in a new tab) | Manual |
| Navigation | Tour | Tour | Tour | Tour | Tour | Tour |
Graphite
| Part | Rest | Hover | Pressed | Visited · current | Focus | Disabled |
|---|---|---|---|---|---|---|
| In text | Returns | Returns | Returns | Returns | Returns | Returns |
| External | Manual (opens in a new tab) | Manual (opens in a new tab) | Manual (opens in a new tab) | Manual (opens in a new tab) | Manual (opens in a new tab) | Manual |
| Navigation | Tour | Tour | Tour | Tour | Tour | Tour |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-link | class | on <a href> | Ink type with an engraved rule: a 1px dark border and the lamp’s catch-light under it. |
| .tui-link--external · target="_blank" | class · attribute | — | Prints a small arrow after the words, in the link’s own ink. Either one draws it. |
| .tui-link__note | class | inside the link | The words a screen reader needs: “ (opens in a new tab)”. Not drawn. |
| .tui-link--nav | class | — | For a menu of places: second ink, no rule until hover, and the current page keeps its rule. |
| .tui-link--label | class | — | A printed legend: upper case, small, tracked. For a footer’s list or a caption’s source. |
| aria-current | attribute | "page" · "true" | On the navigation link for where you are: full ink and a full rule. |
| aria-disabled="true" · no href | attribute | — | A link that goes nowhere yet: 45%, no pointer. |
| rel="noopener" | attribute | with target="_blank" | Keeps the new page from reaching back into this one. |
| .is-hover · .is-down · .is-visited · .is-focus | class | docs only | Force a state, to show all of them side by side. |
Markup
<p>Every order ships with a <a class="tui-link" href="/returns">returns policy</a>
you can read before you buy.</p>
<!-- Leaves the site: the arrow, the rel, and the words a screen reader needs -->
<a class="tui-link tui-link--external" href="https://example.com/manual.pdf"
target="_blank" rel="noopener">Download the manual<span class="tui-link__note"> (opens in a new tab)</span></a>
<!-- A menu of places: no rule until you are on it -->
<nav aria-label="Product">
<a class="tui-link tui-link--nav" href="/tour" aria-current="page">Tour</a>
<a class="tui-link tui-link--nav" href="/specs">Specifications</a>
</nav>
<!-- A legend: a footer's list of places -->
<a class="tui-link tui-link--label" href="/privacy">Privacy</a>Needs kit.css only, no script. How to install the kit.
Accessibility
- It is a real
<a href>: it is in the tab order, the Enter key follows it, and the browser offers “open in a new tab” without help. - A link that opens a new tab says so in words a screen reader speaks, with
.tui-link__note; the arrow is only for eyes. - The rule is a second signal beside the ink, so a link is not found by colour alone, in either finish. Visited is a quieter ink, never the only difference between links that matter.
- The words carry the destination: a person listing the page’s links hears them out of context.
- Focus draws the kit’s 2px ring around the words; nothing removes it.
How it’s built
The rule is a border-bottom in the third ink with a box-shadow one pixel lower in the catch-light: a groove with its lower lip lit, the same way a recess is drawn. It is not a text-decoration because a visited link may change colours and nothing else, and this way the rule can change colour alone; box-decoration-break: clone keeps it whole across a wrapped line. Pressing widens the border to 2px, cutting deeper. The external arrow is a mask filled with currentColor, so it follows every state.
Rules
link.rules.mdIn the brain
A link says where it goes, keeps its rule in running text, and never wears a colour of its own.
5 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.