Buttons (Pill)

An pill button informs users of medium to lower emphasis actions

Variants

Variant Usage

Icon on right

Primarily used to navigate users to an intended action i.e. to guide users to Account Details dashboard

Icon on left

Used to emphasise an action with a coloured icon i.e. promotion campaign

Icon on left & right

Used to emphasise an action with a coloured icon and an navigation arrow

Disabled

Not available for use due to insufficient information or other business rules

Anatomy

All pill button types share the same anatomy and are made up of the following:


 

  1. Primary Icon: A visual shortcut for navigation
  2. Secondary Icon: A visual shortcut for emphasis
  3. Container: Used as a container for the icon
  4. Text: Descriptor of the destination or call-to-action

 

Size

  1. Pill button container has a responsive width with a fixed height of 44px.
  2. Secondary icon should have a bounding box of 24px.
  3. Primary Icon should always be an arrow and remains at 12px.

Text Style

Pill button has a text size of 12px and uses Title case. Use “ Label or Note” text style on Figma.

Dos and Don'ts

doimage
Succinct call-to-action
dontimg
Do not use Pill Buttons for primary call-to-actions