Link
An inline anchor with the primary color, underline, and hover tint.
Basic
Add .link to an <a> in app UI. Reboot strips anchor styling globally so a bare <a> renders as inherited text; .link opts back into the primary-colored underline.
With icon
The link is an inline flex row, so a leading or trailing icon lines up with the label and picks up the link color.
Retune color
Override --link-color on the element, a parent scope, or :root. The hover color derives from --link-color by default, so a single override moves both states. Set --link-color-hover directly to break that derivation.
Customization
These variables retune .link. The hover color resolves from --link-color at component definition, so overriding the color auto-moves the hover.
| Variable | Use |
|---|---|
--link-color | Resting text color and the source for the hover mix |
--link-gap | Space between the label and a leading or trailing icon |
--link-decoration-offset | Distance between the baseline and the underline |
--link-decoration-thickness | Underline weight |
--link-color-hover | Hover color; derives from --link-color by default, override to pin a literal |