Buttons allow users to interact with the interface, selecting options and triggering actions. This guide explains how to use them.

  • Usage
  • Examples
  • Related component
  • Download


Primary Buttons

Primary Buttons exist to guide the user in the interface. Therefore, they should not be used excessively, otherwise the user might get confused on what to do next.

Secondary Buttons

Secondary  Buttons support primary buttons but are lower in the hierarchy and therefore not as important. They should not be used for the most important (inter-)actions.

Text Buttons

Text Buttons simply consist of text and can be used as secondary buttons to display hierarchy.


Buttons can also be used in groups that contain related actions. Ensure there is only one primary button to help focus and avoid confusing users. Grouping isn’t required, but sometimes it makes visual sense to separate related buttons from unrelated buttons.


Related component


If you download any document, you accept our Terms and Conditions.

Sketch UI Library
85.98 MB