Four types of button are used in the app.
Primary
The primary button is a DCB component.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 DCB component.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 component.
Usage
TBC“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 component“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