Versions Compared

Version Old Version 15 New Version Current
Changes made by

Nick Harris

Nick Harris

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
minLevel1
maxLevel2
typeflat
separatorpipe
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 to enable actions or decisions that are important to a user, such as:

  • submitting a form;

  • confirming a change;

  • triggering a new element to appear on the page;

  • specifying a new or next step in a process.

Button can be used for actions, like ‘Load more’, ‘Filters’ etc.

  • 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

warningImage Added

Insert image here

Item

Component type

Content type

Notes

1

Leading icon

Icon

SVG file

Status
colourGreen
titleOptional

2

Button label

Trailing icon

Typography

SVG file

Text

Status
colour

Green

Red
title

Optional

Mandatory

3

Button label

Typography

Text

Trailing icon (not shown)

Icon

SVG file

Status
colour

Red

Green
title

Mandatory

Optional

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.

Image Added

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 uppercasestandard 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.

  • Names Swap phrases like “Read more“, “Learn more“, etc. should be avoidedand “Click here“ for more specific action oriented phrases.

Behaviour

n/atbd

Accessibility

n/a

Related components

Image RemovedA very brief description

tbd