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

Buttons

Buttons allow you to perform an action in only one click. These actions are either immediate and visible on the page, or initiate a redirection to another page. 

Usage

Buttons

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

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

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

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

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

The ghost button is available as an icon version without a label. This usage is only recommended when the icon is fairly understandable and/or the usage is fairly explicit (e.g.: settings button)

The success button is an option that allows you to give feedback to a user about an action just performed. For example, to indicate that the action was considered (e.g.: add an option to a configuration on the fly).

Button Types

Best practices

- Always use a button to perform an action or to change pages.

- Opt for labels that are as short as possible using a verb describing the resulting action.

- Do not write more than three words in a button.

- Respect the nomenclature of the label (lower case starting with a capital letter)

- When an icon is used, it should always help in understanding the label

- Use only one primary button per page

- Pay attention to always maintain a hierarchy between the various buttons on your page, to guide users in their choices.

- Always use the disabled state when the button is not clickable. 

 

Placement

Buttons are the most prominent elements on the various pages and patterns of a site or an application. It is advisable to place them to the bottom right of the element in which it is found (e.g.: a modal, a filter panel, a form, a card, etc.)

 

In situations where you have a group buttons. We recommend placing the primary button to the far right (e.g.: in a modal, the primary button to confirm and the secondary button to cancel).

Link buttons

Links are used to navigate within and among pages on a site or to access an external link (hyperlink). They are typically used within a text block. Links are also used to allow you to show more information on a page or in a card (e.g.: view more).

Links

Best practices

  • Opt for short and concise titles.
  • The link’s title should always be related to the resulting action. 
  • It is forbidden to use links with titles like: “Click here” or “Here”. 
  • Always open the hyperlink into a new tab or another window.
  • If the action allows you to change the page contents or to redirect the user to another page on the site (apart from a text block), opt for a button.

 

Placement

Links allow you to enlarge the reading area that is usually at the end or after a text block.

Group buttons

Use segmented control as an element of secondary navigation within a page, a card or a pattern. Segmented control behaves like a group of exclusive buttons allowing you to display different views (e.g.: a visual/a table or a specific set/element).

Segmented

Best practices

- Limit the number of segmented controls from 3 to 5 buttons maximum.

- The buttons are exclusively enabled: enabling one, disables the others.

- The buttons in the same segmented control must be the same height and width.

- The labels must be as brief as possible (two words maximum) and as uniform as possible in terms of form and content.

- It is possible to place icon before the label, the only condition being to maintain uniformity among the labels of a group of buttons.

 

Placement

Segmented control may be used on page, a card or a pattern. It is usually placed above the content to which it is connected. See the example below in a notification panel.

Visual

Buttons

Appearance

Primary buttons are used to call attention to an action, or highlight the most important call to action on a page. Primary button colors are always picked from the primary palette.

Secondary buttons are used for all other situations. White buttons should be used on black backgrounds.

 

Behavior

Each type of button has 4 behaviors: Normal, Hover, Focus and Disabled

 

Variations

Buttons also exist as icons.

Button States 1
Button States 2

Link buttons

Appearance

Follow the rules for margins and padding, especially for link lists. 

 

Behavior

Links have three behaviors: normal, hover and active.

Group buttons

Appearance

Each segment must have the same width based on the one that has the most content.  

 

Behavior

Segmented control has three behaviors: Active, inactive and hover.

Back to top