Link

Usage

import { GlLink } from "gitlab-ui-react/link";

<GlLink href="#documentation">Read the documentation</GlLink>

Default

Use a link for navigation. Use a button when the interaction changes data or performs an action without navigating.

import { GlLink } from "gitlab-ui-react/link";

export default function LinkExample() {
  return <GlLink href="#documentation">Read the documentation</GlLink>;
}

Variants

Use inline inside prose, meta for secondary metadata, and mention variants for user references. The unstyled variant removes the component’s visual treatment and should be used only when another component supplies complete link styling.

import { GlLink } from "gitlab-ui-react/link";

export default function LinkVariantsExample() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <GlLink href="#default">Default link</GlLink>
      <p className="mb-0">
        Use an <GlLink href="#inline" variant="inline">inline link</GlLink> in a sentence.
      </p>
      <GlLink href="#metadata" variant="meta">Metadata link</GlLink>
      <GlLink href="#NriotHrreion" variant="mention">@NriotHrreion</GlLink>
      <GlLink href="#Norcleeh" variant="mentionCurrent">@Norcleeh</GlLink>
    </div>
  );
}

External links

When an external destination must open in a new tab, combine target="_blank" with showExternalIcon so the behavior is visible before activation.

import { GlLink } from "gitlab-ui-react/link";

export default function LinkExternalExample() {
  return (
    <GlLink href="https://design.gitlab.com/" showExternalIcon target="_blank">
      Pajamas Design System
    </GlLink>
  );
}

Accessibility

• Write link text that describes the destination without relying on nearby content.
• Avoid disabled links when the destination can instead be omitted or explained.
• Use target="_blank" only when opening a new tab is necessary. Set showExternalIcon for eligible external links so the behavior is visible.
• GlLink sanitizes URL protocols by default and adds noopener noreferrer to _blank links.

API

GlLink forwards supported anchor attributes and supports Base UI’s render prop for router-link composition.

Related resources

• Link in the Pajamas Design System
• Link stories in Storybook
• Link source and complete TypeScript props