Linkv1.6.3Edit 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.
This component is a stateless wrapper around
<button>, providing link visual styling.
Children string or components to render between <span>, or in place of <span>.
Use Chronicle font. Font is inherited if not specified.
Renders link in a selection of colors and applies a specific border and hover color.
Allows you to provide a React component or other HTML element, overriding the default `a` and `button` options.
Renders a link with a bottom border.
The URL to visit.
Use Gotham font. Font is inherited if not specified.
Font size: 1=smallest, 5=biggest. Size is inherited if not specified.
Renders unstyled link with no styling, affordances or states.
Turn text uppercase and spaces out letters.
Force the component to use its hover styles.
Force the component to use its focus styles.
When to Use
<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
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
You can specify the color of a Link by providing a color from
base-styles as a string (e.g.
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
<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
<button> tags depending on the props used (
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.
<Button>when you want something that looks like a button.
In addition to props defined by this component, any props
<a> take are also accepted.
This component is maintained by the FEI team.