Link button
A link button navigates, but is drawn as a button.
When to use
- Navigating somewhere that deserves the weight of a button, such as the main action on an empty state.
- A destination sitting among real buttons, where a plain link would look out of place.
When not to use
- Doing something. That is a button. The difference matters even though they look the same.
- A link inside a sentence, which should be a link.
Guidance
Do
Browse components
Use it when the thing is genuinely navigation. It is a real link, so it opens in a new tab and offers the usual menu.
Don't
Save changes
Do not use it for an action. Save changes is not a place, and drawing it as a link breaks middle click and the back button.
Intensity
What each of this component's grounds spends, measured against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| button | neutral | 0.042Ambient | 0.066Substrate |
| button | disabled | 0.042Ambient | 0.129Ambient |
| button--danger | danger-bold | 0.443Marked | 0.617Marked |
| button--default | neutral | 0.042Ambient | 0.066Substrate |
| button--discovery | discovery-bold | 0.444Marked | 0.624Marked |
| button--primary | brand-bold | 0.460Marked | 0.598Marked |
| button--selected | selected | 0.042Ambient | 0.062Substrate |
| button--subtle | neutral-subtle | 0.000Substrate | 0.000Substrate |
| button--warning | warning-bold | 0.448Marked | 0.601Marked |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region, and Demanded is declared and rationed, so neither is a property this component carries by itself. See intensity.
Content
What to write, and what to leave out.
- Name the destination. Browse components, not Go.
- Do not write click here, for the same reason as on any link.