Button

Four types of button are used in the app.

Primary

The primary button is a MUI “contained” button. It has elevation and a solid fill colour.

Label text should be kept short and describe the action being performed and, if needed, the thing that the action is being performed on, e.g. “Import” or “Import mappings” are both good labels.

Label text:

should be sentence case
should begin with an action e.g. “Open …”, “Export … “, “Update …”. The exception is to this rule is “New” buttons e.g. “New group”

MUI documentation: Contained button

Usage

The primary button is intended to occur once on any page. It is designed to stand out visually. A button can be “primary” if the action preformed is either important or is the most common action a user would be likely to perform from that page. Multiple instances of a primary button should be avoided.

Example of use

TBC

Secondary

The secondary button is a MUI “outlined" button. It has an outline and no fill colour.

The guidelines for primary button labels should be followed for secondary buttons.

MUI documentation: Outlined button

Usage

The secondary button is to be used for less important or less frequent actions than the primary button on a page. It is designed to be less prominent than the primary button and can appear many times on a page.

Example of use

TBC

Text

The text button is a standard MUI “text” button.

Outline and fill: none
Label text: uppercase
Label colour: primary theme colour

Usage

The text button is used to control tool actions such as “EXPAND ALL” accordions and data grid “FILTERS”.

Example of use

TBC

Icon button

The text button is a standard MUI “icon” button.

TBC: tooltip

Usage

TBC

Example of use

TBC

Button states

Accessibility

All buttons on a page should be uniquely identifiable by a screen reader.

All icon buttons must have an aria-label.
When a button is repeated, e.g. an “edit” button, an aria-label should be added describing the unique action of the button, e.g. “Edit contact Alice May”

TBC: Tootltips