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.
- 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 Body, Body Small, or Legal 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.
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".
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.
Applies bold styling.
Children string or components to render between <span>, or in place of <span>.
Allows you to provide a React component or other HTML element, overriding the default `a` and `button` options.
Whether or not to apply disabled styles. Note that this should only be used when this component is rendering a `button`.
The URL to visit.
0 | 1 | 2 | 3 | 4 | 5 | ...Object.keys(linkLevelSizeMap)
Size of the link. Supports semantic "small" and "legal" or a numeric scale from size 0 to 5.
Force the component to use its hover styles.
Force the component to use its focus styles.
Force the component to use its click or active styles.