component

Link

A link component that renders a <a> element.

Usage

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

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

API reference

Prop	Type	Default	Responsive
href	string	-	No
variant	title-largetitle-mediumtitle-smalltitle-x-smallbody-largebody-mediumbody-smallbody-x-small	body-medium	Yes
weight	regularbold	regular	Yes
color	primarysecondarydangerwarningsuccess	primary	Yes
className	string	-	No
style	CSSProperties	-	No

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.

Sign up for Backstage Sign up for Backstage Sign up for Backstage Sign up for Backstage Sign up for Backstage Sign up for Backstage Sign up for Backstage Sign up for Backstage

<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.

A fox A turtle

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

Colors

Here's a view when links have different colors.

I am primary I am secondary I am danger I am warning I am success

<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.

A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?

<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"]

Changelog

0.3.0 - Fix render prop on Link #29247