<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


Inspect on Sketch Cloud →


Button guidance

When to use

When to consider something else

Content best practices

Button structure


  1. 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.
  2. Button text—A short label indicating what action the button performs.
  3. Arrow—An optional element to add additional emphasis to the button. There should be no more than one button with an arrow per page.