Button

See this kit in action in our sample UI

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`

UI Samples using Button Kit

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

Conference Statistics

Crm Client List

Trending Repositories

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