Button component

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.

Good example

Button

Bad example

Button

No icons may be included with the button label.

Good example

Button

Bad example

Button

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.

 

Button with a dropdown menu

This button allows you to have the primary action visible while all secondary actions are hidden under a menu dropdown.

 

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.

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 100%.