Design System
v4.9.5
⌘K

Link

Jump to Props

Enables links to other resources, pages or views.

On this page

Import

import { Link } from "@vitality-ds/components";

Usage

Use a link as a navigational element. Links can appear on their own, within a sentence or paragraph, or directly following the content. The <Link /> component is the same as Typography, except that it renders an a tag. You can use the same properties as Typography, plus all attributes that can be applied to an a element.

<Stack>
  <Typography>
    Here is <Link href="#">a link</Link> within text.
  </Typography>
  <Typography variant="sectionTitle">
    Here is <Link href="#">a link</Link> within other text. It inherits its
    parent by default.
  </Typography>
  <Link href="#" standalone>
    Here is a standalone link
  </Link>
  <Link href="#" variant="caption" standalone>
    Here is a standalone link with its variant set to caption
  </Link>
</Stack>

Standalone

By default, links that appear inline with text use an underline to differentiate it from the standard text. For cases where the link itself stands on its own, separate from other text, use the standalone prop.

<Link standalone href="#" variant="display300">
  Download <Download color="inherit" />
</Link>

Use the LinkButton component to make a link to resemble a button. With this component, you can apply various styles to the link such as appearanceandsize, which are available on the Button component.

<Stack>
  <Stack direction="horizontal" wrap="wrap">
    <LinkButton href="#" appearance="primary">
      Primary
    </LinkButton>
    <LinkButton href="#">Standard</LinkButton>
    <LinkButton href="#" appearance="ghost">
      Ghost
    </LinkButton>
  </Stack>
  <Stack direction="horizontal" wrap="wrap">
    <LinkButton size="compact" href="#" appearance="primary">
      Primary
    </LinkButton>
    <LinkButton size="compact" href="#">
      Standard
    </LinkButton>
    <LinkButton size="compact" href="#" appearance="ghost">
      Ghost
    </LinkButton>
  </Stack>
</Stack>

Props

This component takes all valid <a>attributes. Read more on MDN

color

Description

Sets the color of the text.

Type

"primary" | "accent" | "success" | "info" | "warning" | "critical" | "inherit" | "hiContrast" | "disabled" | "moderate" | "lowContrast"

href

Description

The URL that the link points to.

Type

string

maxLines

Description

Sets a limit on the maximum number of lines to display.

Type

1 | 2 | 3 | "1" | "2" | "3"

standalone

Type

boolean

textAlign

Description

Set the text element's text alignment

Type

"left" | "right" | "center" | "end" | "start" | "justify" | "matchParent"

textOverflow

Description

Allows you to handle CSS text overflow behaviour

Type

"clip" | "ellipsis"

variant

Description

Customises the font size and weight to a pre-set option.

Type

"body" | "caption" | "pageTitle" | "sectionTitle" | "sectionSubtitle" | "button" | "display100" | "display200" | "display300" | "display400" | "display500" | "display600" | "display700" | "display800" | "display900" | "inherit" | "paragraph"

wrap

Description

Allows you to handle CSS white space behaviour

Type

boolean

LinkButton

appearance

Description

The visual appearance of the component.

Type

"primary" | "warning" | "link" | "onSurface" | "ghost" | "standard" | "destructive"

isLoading

Type

boolean

shouldFitContainer

Type

boolean

size

Description

The size of the button

Type

"default" | "compact"

Default Value

default

© 2025