In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Button

A button enables the user to perform an action with a single click.

General guidelines

Actions are either immediate and visible on the page, or initiate a redirection to another page.

Variants

1. The primary button helps to highlight the main action of the page.

2. The secondary button should be used for actions that are less important than the main action.

3. The ghost button (also known as text button) is a specific secondary action. It should be used when the action is recurring and linked to patterns or a group of elements (e.g.: a table, a card list, a visual, etc.)

Add an icon to the label when the words are not clear enough, help with understanding and give more meaning to the action. (Label + icon)

Use icons when their meaning is clear enough for the user. (Icon)

4. Feedback buttons are optional and allow you to give feedback to the user about the action. For example, to indicate that the action is dangerous (e.g.: delete a file).

Button01

5. Group button.

6. Float action button.

 

Best practices

Use only one primary button per page. Several types of button can be placed throughout one screen, use them wisely to indicate which action is the primary one.

Button02
Button order

When you have a primary button and a secondary button standing next to each other

  • According to the Gutenberg Principle, always place the primary button to the far bottom right and the secondary on its left (e.g.: in a modal, the primary button to confirm and the secondary button to cancel).
Button03
  • In case of a danger action, always place the primary action button on the left.
  • Always maintain a hierarchy between the various buttons on your page, guide users in their choices.
Button04

Button order on mobile devices.

Always place the primary button at the bottom of the screen. This placement follows the natural scan flow the user has. Also, placing the button at the bottom will make it more accessible/reachable, bringing efficiency to the interaction flow.

In specific cases you might want to consider a sticky primary button, this will make the call to action even more visible. (On browser based web app, remember to keep enough padding so there is no conflict with the browser bar).

Button05
Label
  • Opt for labels that are as short as possible using a strong verb describing the resulting action.
  • Avoid writing more than three words in a button.
  • Respect the nomenclature of the label (lower case starting with a capital letter).
  • An icon can be placed to support the label, this usage is only recommended when the icon is fairly understandable and/or the usage is fairly explicit (e.g.: settings button)
Feedback button

Feedback buttons are to express a certain state:

  • Green is for success actions (example: validate).
  • Yellow is used to warn the user.
  • Red is for dangerous actions (example: delete)
Button06
Group button

Use group button as an element of secondary navigation within a page. 

It behaves like a group of exclusive buttons allowing you to display different views (e.g.: a visual/a table or a specific set/element).

 

Best practices

  • Limit the number of segmented controls from 3 to 5 buttons maximum.
  • Buttons are exclusively enabled: enabling one, disables the others.
  • Always use brief labels (two words maximum) and uniform ones in terms of form and content.
  • It is possible to place an icon before the label, the only condition being to maintain uniformity among the labels of a group of buttons.
Button07
Float action button

The float action button is a variant of the primary button. Use this type of button when it is the most suitable way to present the primary action.

Always use only one float action button per screen.

Button08
Visual guidelines

Behaviours

Each type of button has 4 states: default, hover, focus and disable.

Always use the disable state when the button is not clickable.

White versions are available when the buttons are used on dark backgrounds or images and the necessary contrast for readability is lacking.

Button09

Sizes

Several sizes are available, use them wisely depending on the action priority and your targeted device size.

Big sizes like XL & L will better suit mobile devices usage but can be used on desktop landing pages as well.

Button10
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top