Link

Usage

import { Link } from '@backstage/ui';

<Link href="/sign-up">Sign up for Backstage</Link>

API reference

Router Integration

The Link component handles both internal and external navigation. It automatically detects whether the provided URL is internal (relative path) or external (absolute URL with protocol) and renders the appropriate element:

• Internal routes: Uses react-router-dom's Link component for client-side navigation
• External URLs: Renders a standard <a> element for traditional navigation

import { Link } from '@backstage/ui';

// Internal route
<Link href="/home">Home</Link>

// External URL
<Link href="https://backstage.io">Backstage</Link>

Examples

Variants

Here's a view when links have different variants.

<Flex gap="4" direction="column">
  <Link href="/" variant="title-large">...</Link>
  <Link href="/" variant="title-medium">...</Link>
  <Link href="/" variant="title-small">...</Link>
  <Link href="/" variant="title-x-small">...</Link>
  <Link href="/" variant="body-large">...</Link>
  <Link href="/" variant="body-medium">...</Link>
  <Link href="/" variant="body-small">...</Link>
  <Link href="/" variant="body-x-small">...</Link>
</Flex>

Weights

Here's a view when links have different weights.

<Flex gap="4" direction="column">
  <Link href="/" weight="regular" />
  <Link href="/" weight="bold" />
</Flex>

Colors

Here's a view when links have different colors.

<Flex gap="4" direction="column">
  <Link href="/" color="primary">I am primary</Link>
  <Link href="/" color="secondary">I am secondary</Link>
  <Link href="/" color="danger">I am danger</Link>
  <Link href="/" color="warning">I am warning</Link>
  <Link href="/" color="success">I am success</Link>
</Flex>

Truncate

The Link component has a truncate prop that can be used to truncate the text.

<Link href="/" truncate>...</Link>

Theming

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

• bui-Link
• bui-Link[data-variant="subtitle"]
• bui-Link[data-variant="body"]
• bui-Link[data-variant="caption"]
• bui-Link[data-variant="label"]
• bui-Link[data-weight="regular"]
• bui-Link[data-weight="bold"]
• bui-Link[data-color="primary"]
• bui-Link[data-color="secondary"]
• bui-Link[data-color="danger"]
• bui-Link[data-color="warning"]
• bui-Link[data-color="success"]
• bui-Link[data-truncate="true"]
• bui-Link[data-truncate="false"]

Changelog

• 0.3.0 - Fix render prop on Link #29247