Links
Components and patterns for navigation, links, and breadcrumbs.
Links are used as navigational elements. They navigate users to another location, such as a different site, resource, or section within the same page. To not make the link decoration too noisy, there is a 0.5px thickness and 4px offset. Use fun-link utility class.
When Not to Use Links
Avoid using links in the following situations to prevent confusion, maintain a clean interface, and ensure optimal accessibility:
-
Purely Informational Text: Don’t use links simply to emphasize text or highlight information that doesn’t lead to a new destination. If text is merely providing context or description, it shouldn’t be a clickable link. Use strong adjectives, verbs, or bolding for emphasis instead.
-
Elements for Status, Categorization, or Counts: Elements like tags (e.g., “Beta,” “New”) or badges (e.g., “3+,” “Deprecated”) are designed to label, categorize, or show status/counts. They are not interactive navigation elements. Making them clickable when they don’t lead anywhere specific can frustrate users.
-
Conflicting Interactions: Avoid placing links where they might visually or functionally conflict with other interactive UI elements (such as buttons, input fields, or icons with their own actions). This can lead to ambiguity about what action clicking an element will perform.
-
Over-linking: Don’t saturate the UI with too many links. Every link adds cognitive load. Ensure each link serves a clear navigational purpose and provides genuine value to the user.
