Versions Compared

Version Old Version 14 New Version 15
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
panelIconId1f517
panelIcon:link:
panelIconText🔗
bgColor#F4F5F7

Figma component

Panel
panelIconId1f517
panelIcon:link:
panelIconText🔗
bgColor#F4F5F7

Storybook component

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

Usage

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.

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.

Anatomy

Warning

Insert image here

Item

Component type

Content type

Notes

1

Leading icon

SVG file

Status
colourGreen
titleOptional

2

Trailing icon

SVG file

Status
colourGreen
titleOptional

3

Button label

Typography

Text

Status
colourRed
titleMandatory

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

  • 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 like “Read more“, “Learn more“, etc. should be avoided.

Behaviour

n/a

Accessibility

n/a

Related components

A very brief description