Link

v1.5.7Edit this page

Links are text that is highlighted and clickable. This component renders text that looks like a link using a <a> tag or <button> tag depending on props.

Usage

This component is a stateless wrapper around <a> or <button>, providing link visual styling.

Loading...

Loading examples...

Props

<Link>

Name

Description

Type

Default

bold

Bold styling.

bool

false

children

Children string or components to render between <span>, or in place of <span>.

node

null

chronicle

Use Chronicle font. Font is inherited if not specified.

bool

false

className

string

null

color

Renders link in a selection of colors and applies a specific border and hover color.

string

null

component

Allows you to provide a React component or other HTML element, overriding the default `a` and `button` options.

any

null

decorated

Renders a link with a bottom border.

bool

false

href

The URL to visit.

string

null

gotham

Use Gotham font. Font is inherited if not specified.

bool

false

inline

By default <Link> is inline. If the inline is set to false

bool

true

italic

Italic styling.

bool

false

size

Font size: 1=smallest, 5=biggest. Size is inherited if not specified.

number

or

string

null

unstyled

Renders unstyled link with no styling, affordances or states.

bool

false

uppercase

Turn text uppercase and spaces out letters.

bool

false

When to Use <Link>

The <Link> component provides visual styling for text link (blue text with an underline on hover). If you are trying to make something clickable that does not necessarily fall into this category (e.g., linking an image), use <a> directly and apply your own styling instead.

Adding affordances to <Link>

Links don't come with an underline by default. To show an affordance on a link so it looks more clickable, add the decorated prop and it'll receive a border and appropriate hover styling. You'll generally need this prop when you set a link inside a passage of text.

Changing color of <Link>

You can specify the color of a Link by providing a color from base-styles as a string (e.g. color="neutral-dark").

Links That Look Like Buttons

You often want a link that looks like a button, or vice-versa a button that looks like a link. The <Link> and <Button> components can be used interchangeably, and which one you use should be determined by what you want it to look like. Both components can render either <a> or <button> tags depending on the props used (href vs onClick), ensuring you get both the right styling and the right dom elements for semantics and accessibility.

  • Use this component (<Link>) when you want something that looks like a link.
  • Use <Button> when you want something that looks like a button.

Props

In addition to props defined by this component, any props <button> and <a> take are also accepted.

Maintainers

This component is maintained by the FEI team.

See Also