Link button
Link buttons are primarily used for actions and triggers, using an underline as affordance.
- CSS
- Marko
- React
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.
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".
Large
Large standalone links are Subtitle 2 (16/24) type size in regular weight.
Medium
Medium standalone links are Body (14/20) type size in regular weight.
Small
Small standalone links are Caption (12/16) type size in regular weight.
