Link

Links navigate to another location or resource. Use them inside paragraphs or as standalone controls. 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 design system Links spec: Regular (size="m") and Large (size="l"), Inter medium text with an underline by default (underline="false" removes it for card-style or icon-only links), semantic link and link-hover colors, focus ring, and a disabled presentation that does not navigate (renders as role="link" with aria-disabled).

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 outline (2px, brand focus color, offset), aligned with the design spec.
• 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.