BumblebeeBumblebee

Pill

Contents

Live demoDesignCode

Live demo

Default Pill
Action Pill
Alert Pill
Success Pill
Warning Pill
Info Pill
No Value Pill
Super Long text example this one is
Icon
uk Flag
Barclays Bank

Design

Anatomy

The text is positioned to be optically centered in the pill. The pill is constructed with a Caption text style within 150 height works out at 34px tall. The size of the pill will depend of the content. Once it reaches 150px, it is truncated with an ellipsis.

Usage

Pills should be used in place of text when a little more visual context is required - such as for statuses. Use adjectives for the names of the pills. Do not use verbs, verbs might suggest that the pill is clickable and can be be used to perform actions.

Colour usage

The colours of the pill will vary depending on the status they represent. Using established color patterns will help users identify their status.

Use green for status to represent completed processes such as: funded, paid, completed, passed.

  • Background: Shieldpay/Secondary-200
  • Outline: Shieldpay/Secondary-500

Use grey to represent initiated processes such as created.

  • Background: Global/neutral-150
  • Outline: Global/neutral-500

Use red to represent critical status such as cancelled.

  • Background: Global/alert-200
  • Outline: Global/alert-500

Use purple to represent processes waiting for an action such as: pending, in progress, partially approved.

  • Background: Shieldpay/Primary-200
  • Outline: Shieldpay/Primary-500

Accessibility

Accessibility Use the appropriate ARIA attributes for screen readers where applicable.

Code

import { Pill } from '@shieldpay/bumblebee/pill';

<Pill>Default Pill </Pill>
<Pill variant="action">Action Pill</Pill>
<Pill variant="alert">Alert Pill</Pill>
<Pill variant="success">Success Pill</Pill>