Label Pill

This kit combines the caption and pill kit with all its variants.

Default

Use this kit to display a label and a value with a certain status or color to highlight its significance or meaning. It can be a good design use to highlight the value incase it is important.

import React from 'react'

import LabelPill from 'playbook-ui'

const LabelPillDefault = (props) => (

  <>
    <LabelPill
        label="Service Needed"
        pillValue="76"
    />

    <LabelPill
        label="Waiting"
        pillValue="69"
        variant="success"
    />

    <LabelPill
        label="In Service"
        pillValue="28"
        variant="error"
    />

    <LabelPill
        label="Fully Serviced"
        pillValue="101"
        variant="warning"
    />

    <LabelPill
        label="Inbox"
        pillValue="197"
        variant="info"
    />

    <LabelPill
        label="Outbox"
        pillValue="13"
        variant="neutral"
    />

    <LabelPill
        label="Inbox"
        pillValue="218"
        variant="primary"
    />
  </>
)

export default LabelPillDefault

Things to Avoid

Don’t overuse this kit. Try to keep it to a single use per row if implemented on a table. Make sure it’s not used in a way that may confuse the user to think it’s a button or clickable.

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat