Pill

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

Default

pill-default

PBPill("default")
Variants

pill-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.