Link

The Link component provides styled navigation that looks like a button but renders as a semantic <a> anchor element. Use it for navigation actions where you want button-like styling.

Link uses the same fixed geometry, label weight, icon size, gap, and padding as Button. Use jss only for exceptional layout overrides.

Props

PropTypeRequiredDefaultDescription
childrenReactNodeYes-Link text content
hrefstringYes-Navigation destination URL
colorInteractableColorYes-"primary", "secondary", "negative", "inverse"
barebooleanNofalseRemoves background and elevation
disabledbooleanNofalseDisables interaction
underlinebooleanNofalseAdds text underline decoration
iconIconTypeNo-Icon to display alongside text
iconPosition"left" | "right"No"left"Icon placement relative to text
inlinebooleanNotrueDisplay as inline-flex (true) or flex (false)
targetstringNo-Link target (e.g., "_blank" for new tab)

Color variants

Links share the same color system as buttons, providing visual consistency across your application.

Primary
Secondary
Negative
Inverse
<Link color="primary" href="/signup">Sign up</Link>
<Link color="secondary" href="/learn-more">Learn more</Link>
<Link color="negative" href="/delete">Delete account</Link>

Bare variant

The bare prop removes the background and elevation entirely, leaving only the label and optional icon.

Primary
Secondary
Negative
<Link bare color="primary" href="/docs">Documentation</Link>
<Link bare color="secondary" href="/about">About us</Link>

With underline

The underline prop adds a text decoration, useful for traditional link styling within paragraphs.

Learn more
Read docs
<Link bare underline color="primary" href="/docs">
  Learn more
</Link>

With icon

Add icons to reinforce the link's purpose or indicate external navigation.

External
Download
Back
<Link
  color="primary"
  icon="external-link"
  iconPosition="right"
  href="https://example.com"
  target="_blank"
>
  External link
</Link>

<Link color="secondary" icon="download" href="/file.pdf">
  Download PDF
</Link>

Disabled state

Disabled links prevent navigation and display a muted appearance.

Disabled
Disabled bare
<Link color="primary" disabled href="/premium">
  Premium only
</Link>

Use Link when:

  • The action navigates to a new page or URL
  • You want the browser's native link behaviors (right-click, cmd+click)
  • SEO matters for the destination

Use Button when:

  • The action triggers an in-page operation
  • No navigation occurs
  • Form submissions