Link

🧭 When to Use a Link

Use a Link when you want to:

• Navigate to another page or external site

• Anchor to a section within the same page

• Trigger a lightweight action like “Learn More”

Avoid using a link when the action submits data, modifies content, or triggers a system state—use a Button in those cases.

🎨 Link Types

• Default – A standard link for most use cases

• Information – Used when linking to help content or documentation

• Success – Communicates a successful flow or confirmation follow-up

• Error – Directs the user to resolve an issue or retry a failed action

• Warning – Used for cautionary links that may lead to unsupported or deprecated content

These types rely on semantic color tokens and adjust for both light and dark themes automatically.

📏 Sizes

• Default – Standard size, works in most UI contexts

• Medium – Slightly larger for content-rich layouts

• Large – For callouts, hero sections, or marketing CTAs

Each size has consistent padding and type scaling to maintain hierarchy.

🎯 Statuses

• Default – The resting state, usually underlined or colored

• Hover – Provides visual feedback via underline or color shift

• Focus – Displays a visible outline for keyboard users; meets WCAG contrast guidelines

• Disabled – Indicates a link is unavailable. Use sparingly—if a link is disabled, consider hiding it instead

➕ Modifiers

Icon Left – Use when an icon precedes the text, like a back arrow or home icon. Ideal for navigation links or utility areas.

Icon Right – Use when an icon follows the text, often to suggest movement (like an arrow) or external links. Helpful for CTAs like “Learn More” or “View Report”.

Both modifiers are controlled through Figma’s layer properties and instance swaps. Icons automatically align with spacing and direction.

♿ Accessibility Considerations

From a design perspective:

• Always ensure sufficient contrast between the link color and the background

• Avoid relying on color alone—pair with an underline or hover state

• Use clear, descriptive link text. Avoid “Click here” or “Learn more” without context

From a code perspective (if implemented):

• Use semantic <a> tags with href

• If the link opens in a new tab, include a tooltip or visually hidden text that communicates this

• For icon-only links, include aria-label to describe the action

✅ Best Practices

• Keep link styles visually distinct from buttons

• Inline links work best inside body text or copy blocks

• Don’t overload UIs with too many different link types on one screen

• Reserve underlines for hover states unless clarity is needed upfront