Link

Links navigate to another location or resource. Use them as standalone controls or, with appearance="underline" and no trailing icon, inside paragraphs and data tables. Prefer a real <a href> for navigation; use a Button for actions that do not change location.

Overview

The catnip-link custom element matches the Figma Link spec: appearances primary, secondary, tertiary, and underline; sizes s, m, and l; optional leading/trailing Catnip icons; hover/pressed icon pills on primary and tertiary; a pill :focus-visible ring; and a disabled presentation that does not navigate (renders as role="link" with aria-disabled).

Icons are off by default. Pass right-icon="arrow-right" (or .rightIcon="'arrow-right'") for the Figma trailing arrow. Use appearance="underline" for inline body copy and table cells.

Live example

Accessibility

• Navigation: Enabled links use a native <a> with href. Disabled links use role="link", aria-disabled="true", and tabindex="-1" so they are not in the tab order and do not activate like a real link.
• Focus: Keyboard focus uses a visible :focus-visible 2px pill outline in the brand focus color.
• Icons: Built-in icons are decorative (aria-hidden on the wrappers). The accessible name comes from the default slot, or aria-label when the visible label is insufficient (including icon-only links).
• New tab: target="_blank" automatically adds noopener and noreferrer to rel when missing, reducing tab-nabbing risk.
• Color: Default and :visited use the same token color so the design stays predictable; ensure contrast still meets WCAG in your theme.