Tags

Badge

Rectangle

HStack {
  PBBadge(text: "+1", variant: .primary)
  PBBadge(text: "+4", variant: .primary)
  PBBadge(text: "+1000", variant: .primary)
 }

Rounded

HStack {
  PBBadge(text: "+1", rounded: true, variant: .primary)
  PBBadge(text: "+4", rounded: true, variant: .primary)
  PBBadge(text: "+1000", rounded: true, variant: .primary)
 }

Colors

HStack {
  PBBadge(text: "1", rounded: true, variant: .chat)
  PBBadge(text: "4", variant: .chat)
  PBBadge(text: "1000", variant: .chat)

  PBBadge(text: "1", rounded: true, variant: .error)
  PBBadge(text: "4", variant: .error)
  PBBadge(text: "1000", variant: .error)

  PBBadge(text: "1", rounded: true, variant: .info)
  PBBadge(text: "4", variant: .info)
  PBBadge(text: "1000", variant: .info)

  PBBadge(text: "1", rounded: true, variant: .neutral)
  PBBadge(text: "4", variant: .neutral)
  PBBadge(text: "1000", variant: .neutral)

  PBBadge(text: "1", rounded: true, variant: .primary)
  PBBadge(text: "4", variant: .primary)
  PBBadge(text: "1000", variant: .primary)

  PBBadge(text: "1", rounded: true, variant: .success)
  PBBadge(text: "4", variant: .success)
  PBBadge(text: "1000", variant: .success)

  PBBadge(text: "1", rounded: true, variant: .warning)
  PBBadge(text: "4", variant: .warning)
  PBBadge(text: "1000", variant: .warning)
 }

Notification

HStack {
  PBBadge(text: "1", rounded: true, variant: .chat)
  PBBadge(text: "4", variant: .chat)
  PBBadge(text: "1000", variant: .chat)
 }

Props

Name	Type	Description	Default	Values
text	`String`	Specifies the value of the Badge
rounded	`Bool`	Displays the rounded variant	`false`
variant	`Variant`	Changes the color of the Badge	`.primary`	`.chat` `.error` `.info` `.neutral` `.primary` `.success` `.warning`

Pill

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`

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