Buttons

The design system offers three different button sizes: Small 36px, Medium 44px & Large 56px, default being Medium. You can consider which size suits best your product.

As an example, if there are many actions in the same view, small buttons can be used as the standard button size.

By default, button width is defined by the text content, but this can be customized. For example, full width buttons may be used in mobile contexts. 

Brand button takes the primary color of the product color palette and should be used as the primary “call to action” button inside the product UI. It is reserved for the most crucial action and is typically mandatory or essential. Therefore, you should avoid using multiple primary buttons inside one screen. 

Fill button is similar to brand variant and it can be used either as a primary or secondary button for the product. This variant is particularly useful as a primary button, if your product does not have a defined brand color.

If used as a secondary button, use this for actions which are not mandatory or essential for the user. Often screens will include multiple secondary buttons alongside one primary button.  

Outline button should be used as a secondary button for the product. 

Text button should be used as a supplementary / tertiary button meant for actions which are intentionally wanted to be less visible to the user. These kinds of actions include i.e. cancel and dismiss functionalities.

Text buttons should use an accompanying icon to clearly distinguish them from links and other passive text elements. 

Reserved for destructive actions, or irreversible actions, like delete or remove. 

Button status helps to provide feedback to the user when they are hovering over, clicking or focusing on a button.

The buttons also communicate whether they are unavailable through loading and disabled states. Focus ring width is always 2px. 

• Buttons should be used to trigger an action. Refrain from using buttons for navigational purposes – use links for this. Examples of actions include: 

• • Beginning a new task 
  • Triggering a function within the same page 
  • Specifying a new or next step in a process 
  • Submitting a form 

• Button label should describe the action that the button will trigger. 
• Use different button variations to create visual priority. Define your primary, secondary and supplementary buttons. 

• Refrain from using too many button styles. Using all available styles can create clutter. 

• Use your button styles with clear intention. Think through how to arrange your “call to action” button and less important buttons in a specific scenario.