Link

Navigation

Use Link to navigate to a destination. Use Button for an action such as copying a value or pinning details. Link keeps the browser's Enter activation, modifier clicks, context menu, and open-in-new-tab behavior.

External destinations

Supply ordinary anchor attributes. Describe new-window behavior in the visible link text so keyboard and assistive technology users can anticipate it.

Wrapping

Authored names and prose retain their case. A link is inline, so it wraps with the sentence it is in, and a long destination breaks anywhere so it never widens its container.

A link that is a flex or grid item, such as one in a list or a row, is a block with a 24px minimum height and its text centered in it, so every link in a list is a comfortable target. An icon-only link, one icon and no text, is a 24px box of its own; an icon beside text flows with the text like a word.

Destinations

A destination is data, and a javascript: URL in an href runs script when it is clicked. A link renders only http, https, mailto, tel, relative and hash destinations. Any other scheme, in any spelling a browser would read (JaVaScRiPt:, a tab or newline inside the word, leading control characters), renders as plain text: not a link, not a Tab stop, with a structured error in development.

A blob: or data: destination is rendered when download is set, so a file your page generates can still be downloaded. Offer only files your page generates from content you trust. A file built from untrusted content, such as an HTML or SVG document, belongs behind a Button that starts the download, not behind a persistent link: a link can be opened in a new tab from its context menu, and that ignores download.

Props

Ordinary anchor props, including aria-label, onClick, download, target, and rel, pass through to the anchor. The forwarded ref targets the native anchor. The caller supplies an accessible name through content or aria-label.

Accessibility

• Native link semantics and browser keyboard navigation.
• Underline conveys navigation alongside accent color.
• Token focus treatment and a minimum token-based target footprint.
• Links are navigation destinations; unavailable navigation should be presented as text until a destination is available.

Manifest entry

<Link href="/equipment/pump-07">Pump 07</Link>

{
  "description": "Native anchor navigation with an evident link treatment and token-based keyboard focus. It is inline, so a link in a sentence wraps with the sentence; as a flex or grid item it is a 24px target. Only http, https, mailto, tel, relative and hash destinations are rendered.",
  "props": {
    "href": {
      "type": "string",
      "required": true,
      "description": "Native anchor destination; no click interception or router dependency. Only http, https, mailto, tel, relative and hash destinations are rendered; any other scheme (javascript:, vbscript:, data:, blob:, file:) renders as plain text, not a link and not a Tab stop. A blob: or data: destination is rendered when download is set; offer only files your page generates from content you trust, and give a file built from untrusted content to a Button that starts the download instead of a persistent link."
    },
    "children": {
      "type": "node",
      "description": "Accessible link name. Authored names and prose preserve their case; provide aria-label for icon-only links."
    },
    "target": {
      "type": "string",
      "description": "Native browsing context, such as _blank. Explain new-window behavior in the accessible name."
    },
    "rel": {
      "type": "string",
      "description": "Native relationship attributes; use noopener noreferrer for external new-window links."
    },
    "download": {
      "type": "union",
      "types": [
        "string",
        "boolean"
      ],
      "description": "Native download attribute, subject to browser behavior."
    },
    "className": {
      "type": "string"
    }
  },
  "composable_with": [
    "DescriptionList",
    "EntityPreview",
    "Popover",
    "Inspector",
    "Card"
  ],
  "never_inside": [
    "Button",
    "Link"
  ],
  "example": "<Link href=\"/equipment/pump-07\">Pump 07</Link>"
}