Pill

A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color here.

See this kit in action in our sample UI

Default

PBPill("default")

Variants

PBPill("success", variant: .success)
 PBPill("error", variant: .error)
 PBPill("warning", variant: .warning)
 PBPill("info", variant: .info)
 PBPill("neutral", variant: .neutral)
 PBPill("primary", variant: .primary)

Props

Name	Type	Description	Default	Values
title	`String`	Specifies the value of the Pill
variant	`Variant`	Changes the color of the Pill	`.neutral`	`.error` `.info` `.neutral` `.primary` `.success` `.warning`

UI Samples using Pill Kit

Get the full picture. See how this kit is used in our samples.

Crowdsourced Posts

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