Status
The status of the component
Component checklist
Ready for use!
Figma component
A link to the Figma library where the component lives.
Anatomy
- Link text: describes what is being linked to.
- Icon: illustrates the destination or type of content that is referenced. Used only for standalone links.
Inline vs Standalone Links
The two main variants for links are inline and standalone. Inline links should be used within a body of text whereas standalone links should exist on their own or placed right after the content block.
Inline Link
✅ Should be used within the flow of text.
✅ Helps provide context and additional information.
✅ Best suited for quick references or supplementary details.
✅ Should always be styled with an underline.
❌ Do not pair with an icon.
❌ Do not use them on their own.
Standalone Link
✅ Can be used on their own or directly following content.
✅ Ideal for navigating to external resources.
✅ Use them within tables.
✅ Should be paired with an icon-end to better communicate the place of the resource.
❌ Do not style with an underline. (Only the hover state uses underline.)
❌ Do not place it within a block of text.
Best Practices
Placing Inline Links in Paragraphs
Inline links are usually placed within a paragraph. Consider using less links within a single sentence to reduce cognitive load.
Do
Add one meaningful link to a sentence.
Don't
Avoid overcrowding one sentence with multiple links.
Standalone Links in Breadcrumbs
The breadcrumbs component uses standalone links as sub-components. In this case the standalone links should be used without an icon.
Do
Use breadcrumbs as they come, with standalone links that have the icon-end hidden.
Don't
Avoid pairing standalone links within breadcrumbs with icons.
Link vs Button
Buttons should be used for initiating a specific action such as submit, whereas links should be used to navigate to a new section or page or for providing additional information.
Do
Use the standalone link to navigate to additional resources.