Link

Links are used to apply styles to hyperlink text.

Page navigation navigation

React

readyNot reviewed for a11y

Storybook|Source

Rails

readyNot reviewed for a11y

Docs|Lookbook|Source

Figma

View in Figma|

React examples

Default

Link

<Link href="#">Link</Link>

<Link href="#">Link</Link>

Inline with text

Do not click on this link because it goes nowhere.

<div data-a11y-link-underlines="true">
  <p>
    Do not click on this{' '}
    <Link href="#" inline>
      link
    </Link>{' '}
    because it goes nowhere.
  </p>
</div>

<div data-a11y-link-underlines="true">
  <p>
    Do not click on this{' '}
    <Link href="#" inline>
      link
    </Link>{' '}
    because it goes nowhere.
  </p>
</div>

Muted color variant

Link

<Link href="#" muted>
  Link
</Link>

<Link href="#" muted>
  Link
</Link>

Props

Link

Name	Default	Description
href		`string` URL to be used for the Link. (The `href` is passed to the underlying `<a>` element. If `as` is specified, the link behavior may need different props).
muted	`false`	`boolean` Uses a less prominent shade for Link color, and the default link shade on hover.
inline	`false`	`boolean` Set to true for links adjacent to text, underlining them for clear visibility and improved accessibility.
underline Deprecated	`false`	`boolean` Use `inline` instead.
hoverColor		`string` Color used when hovering over the link.
ref		`React.RefObject<HTMLAnchorElement>`
as	`"a"`	`React.ElementType`
sx		`SystemStyleObject`