/
Button

*This site is a work-in-progress and some pages are more complete than others. If you have any questions or issues, please email nick.harris@reckitt.com. *

Button

Owned by Nick Harris
Last updated: Sept 01, 2022
2 min read

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

Usage

 

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.

Anatomy

 

Item

Component type

Content type

Notes

 

Item

Component type

Content type

Notes

1

Leading icon

Icon

SVG file

Optional

2

Button label

Typography

Text

Mandatory

3

Trailing icon (not shown)

Icon

SVG file

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.

Button states for the primary button style

Variants

Button props

Name

Control

Description

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