Link button
A link button navigates, but is drawn as a button.
When to use
- Going somewhere that needs the weight of a button, such as the main action on an empty state.
- A link that sits among buttons, where a plain link would look out of place.
When not to use
- Doing something. That is a button. They look the same, but they behave differently.
- A link inside a sentence. Use a plain link.
Guidance
Do
Browse components
Use it when the control takes people somewhere. It is a real link, so it can open in a new tab and has the usual link menu.
Don't
Save changes
Do not use it for an action. Save changes is not a place, and making it a link breaks middle click and the back button.
Intensity
How much attention each of this component's grounds uses, scored 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. Demanded is declared, and its use is limited. So neither of those two depends on the component alone. See intensity.
Content
What to write, and what to leave out.
- Name the destination. Browse components, not Go.
- Do not write click here. It says nothing about where the link goes.