A styled anchor with typography variants, colors, and weights.
import { Link } from '@backstage/ui';
<Link href="/">Sign up for Backstage</Link>| Prop | Type | Default | Description |
|---|---|---|---|
| href | string | - | URL the link navigates to. Supports internal and external URLs. |
| target | _self_blank_parent_top | - | Where to open the link. Use _blank for external links that open in new tabs. |
| title | string | - | Tooltip text shown on hover. Useful for accessibility. |
| variant | title-largetitle-mediumtitle-smalltitle-x-smallbody-largebody-mediumbody-smallbody-x-small | body | Typography style. Title variants for headings, body for paragraph text. |
| weight | regularbold | regular | Font weight. Use bold for emphasis. |
| color | primarysecondarydangerwarningsuccess | primary | Text color. Status colors (danger, warning, success) for contextual links. |
| truncate | boolean | false | Truncates text with ellipsis when it overflows its container. |
| standalone | boolean | false | Removes underline by default. Underline appears on hover. |
| children | ReactNode | - | |
| className | string | - | Additional CSS class name for custom styling. |
| style | CSSProperties | - | Inline CSS styles object. |
Inherits all React Aria Link props.
Use target="_blank" to open links in a new tab.
<Link href="#" target="_blank">
Sign up for Backstage
</Link>Status colors for contextual links.
<Flex gap="4">
<Link href="#" weight="regular">Regular</Link>
<Link href="#" weight="bold">Bold</Link>
</Flex>Use standalone to remove the underline by default. The underline will appear on hover.
<Flex gap="4">
<Link href="#">Default link</Link>
<Link href="#" standalone>Standalone link</Link>
</Flex>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-Linkbui-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-color="info"]bui-Link[data-truncate="true"]bui-Link[data-truncate="false"]bui-Link[data-standalone="true"]bui-Link[data-standalone="false"]