Link

Examples

.quietLinks {
  --component-link-color: var(--color-text-default);
  --component-link-color-hover: var(--color-link-hover);
}

Props

Any native prop not listed here goes to the root element unchanged.

Component tokens

Accessibility

• Always an <a> with an href; there is no disabled link.
• Always named: inline links need text, and a button-styled link with no text needs an icon plus aria-label or aria-labelledby (a type error otherwise). Types can't see empty children such as {undefined} or a lone decorative icon, so those still need care.
• Routed inline links mark the current page with aria-current="page", and with currentMatch="section", pages below it with "true". Pass aria-current to override, including false. Button-styled links are only marked when you pass it.
• The current page is shown by weight as well as color.
• Inline links are underlined, so they're told apart from text by more than color. Hover thickens the underline.
• underline="hover" drops the underline at rest. Use it only where the position marks the links (a nav, a site name), since color alone can't (WCAG 1.4.1). A current link keeps its underline.
• underline="none" never underlines, even when current or hovered. Use it only where the position marks the links and something besides color marks the current one, such as the site bar's brackets (WCAG 1.4.1). A current link is still bold.
• The visited color is opt-in and color-only, so nothing depends on it.
• New-tab links end their name with “, opens in new tab”, also when named by aria-label or aria-labelledby, and the icon stays on the line of the last word.
• The focus ring uses component.link.focus-ring-color.