A button is a clickable component that triggers an action when pressed.

Inventory app with a “new” button in the Result pane header.

Structure

A button shall only contain a short and descriptive label, stating what will happen on press and giving users confidence in selecting the right action. No icons may be included in a button.

Good example

Bad example

Go to the “Action language” section to have more info about button label and pick the right wording for your button. 

Type of buttons

Classic button

It is the most often used button. Also, its height makes it a perfect fit for pane headers.

 

Maxi button

It is almost twice the size of the classic button, making it more finger friendly.

 

Full-width button

Its width will take the app pane, making it impossible to miss.

 

Segmented button

This button is perfect to switch between different views and/or use as filters.

Behavior

By clicking on a button, users can perform the corresponding action.

Style

Color

Since a button is a clickable element, it has multiple states.

Each state is associated with a different color, providing visual feedback to users.

Format

Buttons are shown in a rectangle format with a corner radius of 25%.

Related pages

Duplicating When duplicating a record, the action should be labelled “Duplicate”.
An icon button is a small image that represents a command in a symbolic manner.   
A modal is a container triggered by a user’s action to give critical information about the action, to ask the user to take a decision ...
The pane header allows users to quickly understand the purpose of each pane and their relationship to each other.