Link

A link component that renders a <a> element.

Usage#

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

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

API reference#

Prop	Type	Default	Responsive
href	string	-	No
target	_self_blank_parent_top	-	No
variant	title-largetitle-mediumtitle-smalltitle-x-smallbody-largebody-mediumbody-smallbody-x-small	body-medium	Yes
color	primarysecondarytertiaryinherit	primary	No
underline	alwayshovernone	hover	No
children	ReactNode	-	No
className	string	-	No
style	CSSProperties	-	No

Examples#

External Link#

Here's how to create an external link that opens in a new tab.

<Link href="https://backstage.io" target="_blank">
  Sign up for Backstage
</Link>

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="https://ui.backstage.io" variant="title-large">
    Sign up for Backstage
  </Link>
  <Link href="https://ui.backstage.io" variant="title-medium">
    Sign up for Backstage
  </Link>
  <Link href="https://ui.backstage.io" variant="title-small">
    Sign up for Backstage
  </Link>
  <Link href="https://ui.backstage.io" variant="body-large">
    Sign up for Backstage
  </Link>
  <Link href="https://ui.backstage.io" variant="body-medium">
    Sign up for Backstage
  </Link>
</Flex>

Colors#

Here's a view when links have different colors.

I am primary I am secondary I am tertiary I am inherit

<Flex gap="4" direction="column">
  <Link href="https://ui.backstage.io" variant="title-small" color="primary">
    I am primary
  </Link>
  <Link href="https://ui.backstage.io" variant="title-small" color="secondary">
    I am secondary
  </Link>
  <Link href="https://ui.backstage.io" variant="title-small" color="tertiary">
    I am tertiary
  </Link>
  <Link href="https://ui.backstage.io" variant="title-small" color="inherit">
    I am inherit
  </Link>
</Flex>

Underline#

Here's a view when links have different underline styles.

Always underlined Underlined on hover Never underlined

<Flex gap="4" direction="column">
  <Link href="https://ui.backstage.io" underline="always">
    Always underlined
  </Link>
  <Link href="https://ui.backstage.io" underline="hover">
    Underlined on hover
  </Link>
  <Link href="https://ui.backstage.io" underline="none">
    Never underlined
  </Link>
</Flex>

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.9.0 - Improved the Link component structure in Backstage UI. #31524
0.7.0 - Breaking We are upgrading our Text component to support all font sizes making the Heading component redundant. The new Text component introduces 4 sizes for title and 4 sizes for body text. All of these work in multiple colors and font weights. We improved the as prop to include all possible values. The Link component has also been updated to match the new Text component. #30592
0.7.0 - Breaking We are upgrading our Text component to support all font sizes making the Heading component redundant. The new Text component introduces 4 sizes for title and 4 sizes for body text. All of these work in multiple colors and font weights. We improved the as prop to include all possible values. The Link component has also been updated to match the new Text component. #30592
0.3.0 - Fix render prop on Link #29247