<aside>
<img src="https://img.icons8.com/ios/250/000000/info.png" alt="https://img.icons8.com/ios/250/000000/info.png" width="40px" /> Use buttons for the most important actions you want users to take on your site
</aside>
Button guidance
When to use
- Use buttons for the most important actions you want users to take on your site, such as "Log in", "Get your barcodes" or "Sign up".
When to consider something else
- Linking between a site’s pages. Use standalone links or inline links instead.
- If an action is less important than another action on that page.
Content best practices
- Avoid using too many buttons on a page, as this dilutes the emphasis a button has.
- Keep button text short while still indicating what the button does.
- Make the first word of a button's text a verb.
- When placing two buttons next to each other, make one much more prominent than the other to establish hierarchy. One way to do this is by placing a default button (primary action) next to an outline button (secondary action).
Button structure
- Container—Holds the button's content and is the interactive element or click target. Can either be solid (default) or outlined. There is also a small variant for use in smaller areas like in navigation or a modal.
- Button text—A short label indicating what action the button performs.
- Arrow—An optional element to add additional emphasis to the button. There should be no more than one button with an arrow per page.
Interaction
States
