Link button

v3.1

Link buttons are primarily used for actions and triggers, using an underline as affordance.

Skin
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 do not navigate to new pages
Actions that follow a short description of contents

When not to use

Actions that manipulate data or how its displayed
Actions that change state
Navigating between pages

Link buttons vs text links

If an action results in a URL change or new browser tab use a Text link. Everything else is a Button.

Semantics

HTML text links and buttons have important differences in behaviors, interactions, and expectations. For example, a text link will perform its interaction when clicked and when the enter key is pressed. A button will perform its interaction when clicked or when the enter and spacebar keys are pressed. When holding the control or command key a text link will open a new browser tab, a button will not.

Buttons take action, links navigate

Use a link when you’re navigating to another place, such as: an item page, a seller profile, or a page "skip link".
Use a button when you are performing an action, such as: "bid," "add," "search".

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.