Link
Last Updated: September 2026Links are navigational triggers that are ideally reserved for destinations either outside the application or in-app destinations that open in a new browser tab.
Source CodeAnatomy
link- 1Label
- 2Prefix icon
- 3Suffix icon
Variants
linkNeutral
Default tertiary text color for quieter links.
Accent
Accent-colored link for stronger emphasis.
With icons
prefixIcon and/or suffixIcon render Material Symbols.
Disabled
disabled sets aria-disabled, removes tab focus, and blocks activation.
As button
Use render to morph into another element while keeping link styles.
Sizes
linkLinks support 3 sizes: XS, S, and M.
Usage Guidelines
linkWhen to use
- •For navigation to another page, section, or external resource.
- •When the action is destination-oriented rather than a command.
- •Inline within body copy or supportive UI chrome.
When not to use
- •For actions that submit or mutate data — use Button.
- •For sidebar destinations with icon + label — prefer NavigationItem.
- •For menus of actions — use Menu.
Use descriptive destinations in the label.
Don't use vague labels like 'Click here'.
Mark external destinations with a suffix icon when helpful.
Don't use Link for destructive or form-submit actions — use Button.
Behaviors
linkDisabled
- •Native anchors cannot be truly disabled; Link sets aria-disabled and tabIndex={-1}.
- •Clicks are prevented while disabled.
Polymorphic render
- •render swaps the underlying element (e.g. button or router Link).
- •Styles and icons still apply to the rendered host.
Content Guidelines
linkLabels
- •Name the destination or document.
- •Sentence case; keep labels concise.
Accessibility
linkText & Labels
- •Visible text should describe the destination.
- •If using icon-only patterns, supply an accessible name on the host.
ARIA attributes
- •aria-disabled is set when disabled.
- •Prefer real href navigation for true links.
Keyboard Support
- •Tab → focus (unless disabled).
- •Enter → activate.
WCAG Compliance Standards
FAQs
linkLink vs Button?
Use Link for navigation. Use Button for actions that change data or trigger commands.
Link vs NavigationItem?
NavigationItem is for sidebar/rail destinations with icon + label. Link is for inline or compact navigation.
How do I use a router link?
Pass your router component via the render prop while keeping Link styles.