Buttons

Button

Button Variants

VStack(alignment: .leading, spacing: Spacing.small) {
   PBButton(
     title: "Button Primary",
     action: {}
    )
    PBButton(
      variant: .secondary,
      title: "Button Secondary",
      action: {})
    PBButton(
      variant: .link,
      title: "Button Link",
      action: {}
    )
    PBButton(
      variant: .disabled,
      title: "Button Disabled"
    )
 }

Button Full Width

PBButton(
  fullWidth: true,
  title: "Full Width",
  action: {}
 )

Button Icon Options

VStack(alignment: .leading, spacing: Spacing.small) {
  PBButton(
    title: "Button with Icon on Left",
    icon: PBIcon.fontAwesome(.user, size: .x1),
    action: {}
  )
  PBButton(
    title: "Button with Icon on Right",
    icon: PBIcon.fontAwesome(.user, size: .x1),
    iconPosition: .right,
    action: {}
  )
 }

Circle Button

VStack(alignment: .leading, spacing: Spacing.small) {
  PBButton(
    shape: .circle,
    icon: PBIcon.fontAwesome(.plus, size: .x1),
    action: {}
  )
  PBButton(
    variant: .secondary,
    shape: .circle,
    icon: PBIcon.fontAwesome(.pen, size: .x1),
    action: {}
  )
  PBButton(
    variant: .disabled,
    shape: .circle,
    icon: PBIcon.fontAwesome(.times, size: .x1)
  )
  PBButton(
    variant: .link,
    shape: .circle,
    icon: PBIcon.fontAwesome(.user, size: .x1),
    action: {}
  )
 }

Button Size

VStack(alignment: .leading, spacing: Spacing.small) {
  PBButton(
    size: .small,
    title: "Button sm",
    action: {}
  )
  PBButton(
    title: "Button md",
    action: {}
  )
  PBButton(
    size: .large,
    title: "Button lg",
    action: {}
  )
 }

Button Reaction

@State private var count: Int = 153
@State private var count1: Int = 5

HStack(alignment: .center, spacing: 12) {
            PBReactionButton(
              count: $count,
              icon: "\u{1F389}",
              isInteractive: true
            )
            PBReactionButton(
              count: $count1,
              icon: "1️⃣",
              isInteractive: false
            )
            PBReactionButton(
              isInteractive: false
            )
            PBReactionButton(
              pbIcon: PBIcon(FontAwesome.user),
              isInteractive: false
            )
}

Props

Name	Type	Description	Default	Values
Full Width	`Bool`	Sets Button to full width	`false`	`true` `false`
Variant	`PBButtonVariant`	Changes the color of the Button	`.primary`	`.primary` `.secondary` `.link` `.disabled`
Size	`Size`	Adjusts Button size	`.medium`	`.small` `.medium` `.large`
Shape	`Shape`	Changes the shape of the Button	`.primary`	`.primary` `.circle`
Title	`String`	Sets Button text	`nil`
Icon	`PBIcon`	Adds an icon to the Button	`nil`
Icon Position	`IconPosition`	Adjusts the icon's position	`.left`	`.left` `.right`
Action	`(() -> Void)`	Adds an action for the Button to perform	`{}`

Reaction Button Props

Name	Type	Description	Default	Values
count	`Int`	Tracks number of times a reaction button has been pressed	`0`
isHighlighted	`Bool`	Boolean for whether or not a reaction button has a highlight	`false`	`true` `false`
isHovering	`Bool`	Boolean for whether or not a mouse is hovering over the reaction button	`false`	`true` `false`
icon	`String`	Allows user to use a unicode string for an emoji reaction button
pbIcon	`PBIcon`	A PlayBook Icon option for reaction button
isInteractive	`Bool`	Boolean for whether or not a reaction button is interactive	`false`	`true` `false`

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