Versions Compared

Version Old Version 21 New Version Current
Changes made by

Nick Harris

Nick Harris

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
panelIconId1f517293035db-a48a-4d92-a968-8e1e6c7285d6
panelIcon:linkFigma:
panelIconText🔗:Figma:
bgColor#F4F5F7

Figma component

Panel
panelIconId1f517efa8ba60-1dab-4e63-8948-4ff4366ce32a
panelIcon:linkStorybook:
panelIconText🔗:Storybook:
bgColor#F4F5F7

Storybook component

Buttons are clickable elements that are used to perform an action.

Table of Contents
minLevel1
maxLevel2
indent0
stylecircle
separatorpipe

Usage

Tip

Do’s

  • Use a button when the user can perform an action without navigating to a new page.

  • Use a primary button to indicate the main action of a group button set.

  • Use action verbs or phrases to tell the user what will happen next.

Warning

Dont’s

  • Do not use buttons as navigational elements. Instead, use links when the desired action is to take the user to a new page (with the exception of the back and forward buttons).

  • Do not style Buttons as links

  • Do not use leading and trailing icons at the same time.

  • Don’t use long labels

Anatomy

Item

Component type

Content type

Notes

1

Leading icon

Icon

SVG file

Status
colourGreen
titleOptional

2

Button label

Typography

Text

Status
colourRed
titleMandatory

3

Trailing icon (not shown)

Icon

SVG file

Status
colourGreen
titleOptional

Visual style

Sizes

Buttons come with two sizes: large and small.

States

Buttons have five states that define their appearance: Default, Hover, Focus, Active and Disabled.

Variants

Button props

Name

Control

Description

variant

primary

secondary

primary-icon

secondary-icon

The variant to use.

size

small

large

The size of the component.

disabled

False

True

If true, the component is disabled.

children

 

The content of the component.

iconPrefix

iconPrefix : {

  • props : {

    • icon : "alert"

    }

}

Element placed before the children.

iconSuffix

iconSuffix : {

  • props : {

    • icon : "arrowDown"

    }

}

Element placed after the children.

aria-label

 

 

className

Set string

 

onClick

-

 

Editorial

  • Button labels should use standard case.

  • Button labels should be as short as possible, while clearly explaining the action the button triggers.

  • For maximum legibility, a text label should remain on a single line.

  • Swap phrases like “Read more“, “Learn more“, and “Click here“ for more specific action oriented phrases.

Behaviour

tbd

Accessibility

tbd