Skip to content

Link

Status: Stable

Links indicate to a user that text is actionable (e.g., proceed to a new page, reveal more information via modal or accordion). Only one level of hierarchy is available for links at this time.

Best practices:

  • All actionable text must use the default blue link style.
  • Do not use other colors for links (gray, red, etc.).
  • Do not use decorated links (underline); underline is only used to communicate hover.
  • Do not apply styling to links (bold, italic, uppercase, etc).
  • Only apply links to Text, Text Small, or Text X-Small type styles.
  • All links should be Gotham; do not use Chronicle.
  • Be careful when stacking links, ensure each link allows a minimum target area of 44px.

Examples

Default

Accessibility

Users may quickly tab through a page to discover interactive elements, or use the VoiceOver rotor to get a list of all links on the page. This means it's important that the link's text is descriptive of what the link actually does, since it's not guaranteed that the user will encounter your link in the context of adjacent labels or descriptions. Instead of links like "Read more" or "Apply now", you should prefer more descriptive ones like "Read more about robo-advisors" or "Apply now on Chase's site".

Development

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

<Link>

bold

boolean
Bold styling.

chronicle

Deprecated
boolean
Use Chronicle font. Font is inherited if not specified.

className

Deprecated
string

color

"blue" | "blue-dark" | "blue-light" | "blue-lighter" | "blue-lightest" | "green" | "green-dark" | "green-light" | "green-lighter" | "green-lightest" | "neutral-dark" | "neutral-darker" | "neutral-darkest" | "neutral-light" | "neutral-lighter" | "neutral-lightest" | "nw-green" | "red" | "red-dark" | "red-light" | "red-lighter" | "red-lightest" | "teal" | "teal-light" | "transparent" | "white" | "yellow" | "yellow-dark" | "yellow-light" | "yellow-lighter" | "yellow-lightest"
Sets text to a color defined by base-styles (overrides `error` and `light` props).

component

"a" | "abbr" | "address" | "animate" | "animateMotion" | "animateTransform" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "circle" | "cite" | "clipPath" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "defs" | "del" | "desc" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "ellipse" | "em" | "embed" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "fieldset" | "figcaption" | "figure" | "filter" | "footer" | "foreignObject" | "form" | "g" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "image" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "line" | "linearGradient" | "link" | "main" | "map" | "mark" | "marker" | "mask" | "menu" | "menuitem" | "meta" | "metadata" | "meter" | "mpath" | "nav" | "noindex" | "noscript" | "object" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "path" | "pattern" | "picture" | "polygon" | "polyline" | "pre" | "progress" | "q" | "radialGradient" | "rect" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "stop" | "strong" | "style" | "sub" | "summary" | "sup" | "svg" | "switch" | "symbol" | "table" | "tbody" | "td" | "template" | "text" | "textPath" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "tspan" | "u" | "ul" | "use" | "var" | "video" | "view" | "wbr" | "webview" | ComponentClass<any, any> | FunctionComponent<any>
Allows you to provide a React component or other HTML element, overriding the default `a` and `button` options.

disabled

boolean
Whether or not to apply disabled styles. Note that this should only be used when this component is rendering a `button`.

gotham

boolean
Use Gotham font. Font is inherited if not specified.

href

string
The URL to visit.

italic

boolean
Italic styling.

size

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

uppercase

boolean
Turn text uppercase and spaces out letters.

align

"center" | "left" | "right"
Text alignment.

children

ReactNode

error

boolean
Flag to indicate if the color of the text will be color-red. Takes precedence over the `light` prop if used together.

fontFamily

"chronicle" | "gotham" | "gotham-medium"

id

string

inline

boolean
By default `<Type>` is block-level (renders a <p> tag). If the inline prop is used, `<Type>` is inline (renders a <span> tag).

light

boolean
Sets text to "neutral-darker" defined in base-styles.

style

CSSProperties

ref

(instance: any) => void | RefObject<any>