Link
The one way to render an anchor. Five variants carry the intent of the link, and external hrefs get their rel and target handled for you.
import from ~/components/ui/link
Variants
The token contract lives in the color foundation, and every component reads from it.
inline (default)
Links inside running prose. Always underlined, because the sentence gives no other clue.
action
A link doing the work of a quiet call to action. Medium weight, underline on hover.
Filed under typography
subtle
Metadata links: authors, timestamps, sources. Muted, still underlined, brightens on hover.
nav
Navigation chrome. No underline, because the position already says it is a link.
inverse
For brand and dark surfaces, where the primary ink would disappear.
Internal and external
href decides
An href with a protocol (https:, mailto:, tel:) is treated as external. A new-tab link gets rel="noopener noreferrer" from the component, so a call site never has to remember it.
In context
a footer on brand
Inverse plus a nav row is the standard footer composition.
a card footer
One action link per card, pushed to the end of the row with a layout class.
Rules
Do
Don't