Button [Text Link]

Overview

The Text Link is an inline navigation and action element that lives within body copy, UI labels, and standalone contexts. It signals clickability through color, underline, and interaction states, guiding users to related content or triggering lightweight actions without the visual weight of a full button, with 6 semantic variants and 4 sizes.

When should you use them?

Use a text link for inline navigation or lightweight actions, like linking to a related page within a paragraph or a 'Learn more' inside a UI label. Choose a text link over a button when the action is secondary and shouldn't compete with primary controls for attention.

How should you use them?

• Use text links for navigation and lightweight actions; use buttons for primary commitments.
• Keep underline on within body copy so the link is distinguishable by more than color alone.
• Turn underline off in UI contexts where color and placement already signal clickability.
• Use the Visited state in navigation-heavy interfaces so users can track where they've been.
• Match the variant to context: Danger for destructive links, Info for informational, Primary for default.
• Write descriptive link text that makes sense out of context, since screen reader users often navigate by links alone.