Link

v1.7.1 Edit this page
Loading...

Usage

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

Loading examples...

Props

<Link>

Name

Description

Type

Default

children

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

node

null

className

string

null

component

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

any

null

href

The URL to visit.

string

null

gotham

Uses Gotham font. Font is inherited if both Gotham and Chronicle are set to false.

bool

true

size

Size of the link. Supports semantic "small" and "legal" or a numeric scale from size 0 to 5.

one of [[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]]

null

unstyled

Renders unstyled link with no styling, affordances or states.

bool

false

uppercase

@deprecated Turn text uppercase and spaces out letters.

bool

false

chronicle

@deprecated Use Chronicle font. Font is inherited if not specified.

bool

false

bold

@deprecated Bold styling.

bool

false

italic

@deprecated Italic styling.

bool

false

color

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

one of [[object Object],[object Object],[object Object],[object Object],[object Object]]

null

decorated

@deprecated Renders a link with a bottom border.

bool

false

dangerouslyForceHoverStyling

Force the component to use its hover styles.

bool

false

dangerouslyForceFocusStyling

Force the component to use its focus styles.

bool

false

dangerouslyForceActiveStyling

Force the component to use its click or active styles.

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.

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.