Link
A styled anchor for a link inside text. Four colour treatments, three underline rules, an automatic rel for a link that opens in a new tab, and a focus ring that follows the text across a line break.
Link or Button?
ButtonVariant.Link looks like a link but keeps a button's height and padding, so it breaks
the rhythm of a paragraph. BbLink renders a bare <a> that sits on the
text baseline. Use the button variant for an action, and this for navigation.
Variants
Inherit takes the surrounding text colour, for a link that should not stand out. Muted suits a footer, and Destructive a link to a removal.Underline
Hover is the default: it keeps a paragraph legible and still marks the link on hover and on focus.
An underline is the only cue that survives a colour-blind reading, so None is worth avoiding in prose.
External Links
Target="_blank" adds rel="noopener noreferrer" on its own, which stops the opened page
reaching back into this one. Supplying your own Rel replaces that default entirely.
ShowExternalIcon adds the icon and a screen-reader note, so the destination is announced rather than only drawn.
In Prose
decoration-from-font, so it clears a descender.
Click Handler
OnClick runs before the navigation. It does not fire while the link is disabled.Disabled
disabled attribute. The component drops the href,
sets tabindex="-1" and aria-disabled="true", turns off pointer events and renders at 50% opacity.
Behaviour
The rel default only applies to _blank. Any other Target, or no target at all,
leaves rel unset unless you supply one. When you do supply one it replaces the default rather than adding to it.
The focus ring follows the text. It is drawn round the text rather than round a box, so a link that wraps across a line break still reads as a single link instead of two.
Disabled is not a native anchor state. There is no disabled attribute on an
<a>, so the component removes the href, sets tabindex="-1" and
aria-disabled="true", and turns off pointer events. OnClick does not fire.
The external icon is never alone. It is always paired with screen-reader-only text from the
localized Link.OpensInNewTab key, so the destination is announced and not only drawn.