Link button

v3.1

Link buttons trigger actions that keep users on the current page.

CSS
Marko
React

Considerations

Clear

The text makes it clear where this action will take the user.

Identifiable

Link buttons are familiar and easily identifiable amongst other content.

Concise

Link button labels should be short. It’s best to aim for fewer than 5 words.

Usage guidelines

When to use

Actions that follow a short description of contents, like:
Tertiary actions within a component or form (e.g., Clear all, View details)
Actions that expand, collapse, or reveal content
Actions inside components like alert notices or banners (e.g., Learn more)

When not to use

Actions that manipulate data or how it's displayed
Actions that change state
Navigating between pages
Navigating to legal or policy documents

When do I use a link button versus text link?

Both use an underline as visual affordance, but they behave differently and serve different purposes.

Choose based on what happens when selected

It takes them somewhere new — a new page, external site, anchor point, or browser tab → use a text link
It performs an action on the current page — expands content, triggers a change, submits something → use a link button

Why it matters

Browsers and assistive technologies treat them differently: text links can be opened in a new tab, bookmarked, or copied as a URL. Link buttons can't. Using the wrong one creates unexpected behavior for keyboard and screen reader users.
Quick check: Does selecting it change the URL? Yes → text link. No → link button.

Anatomy

Title
Underline

Properties

Strong

Strong link buttons are the default treatment, used for tertiary/lower actions in an experience.

Subtle

Subtle link buttons are used for tertiary/lower actions and use secondary color to align with secondary text areas.

White

White is used within components that utilize a colored background like alert notices. This particular example uses the foreground onSuccess color token. Learn more about these token values in Color tokens.

Size

Link buttons are available in small, medium, and large sizes. Large is the default size and is preferred on smaller screens.

Behavior

Underline

Standalone link buttons are placed on their own line close to the relevant content and contain an underline by default.

States

States are used to indicate levels of interaction when hovering a link button. The available states are enabled, hover, focused, and disabled. They follow the same patterns as Text Links. Learn more about the state layer color values in Color tokens.