Button

Button Variants

button-default

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

button-full-width

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

button-icon-positions

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

button-circles

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

button-sizes

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

reaction-button

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