Key
Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.
Kit parts
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.
Seats open in 11 days. Want one email that morning?
Anatomy
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.
Variants
- In running text
- Wrapping over two lines
- External · the arrow
- Navigation · current page keeps its rule
- Label · printed legend
- Inside a card
States
- Rest
- Hover
- Pressed
- Visited · current
- Focus
- Disabled
Props and options
| Name | Kind | Description |
|---|---|---|
| aria-current | attribute | On the navigation link for where you are: full ink and a full rule. |
| no href | attribute | A link that goes nowhere yet. |
Usage notes
Hover a link, press and hold it, Tab to it. The arrow marks the one that leaves the site; a visited link is one step quieter.
Accessibility
- 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.
