Fixed Confirmation Toast

Fixed Confirmation Toast is used as an alert. Success is used when a user successfully completes an action. Error is used when there is an error and the user cannot proceed. Neutral is used to display information to a user to complete a task.

NOTE: z index for Fixed Confirmation Toast is set to 'max' by default which has the value of 999999. the z Index global prop can be used to override this if you want to set it to a different value.

Summary

Uses Icons

Javascript Enhanced

Default

VStack(alignment: .leading) {
  PBToast(text: "Error Message", variant: .error, dismissAction: closeToast)
  PBToast(text: "Items Successfully Moved", variant: .success, dismissAction: closeToast)
  PBToast(text: "Scan to Assign Selected Items", variant: .neutral, dismissAction: closeToast)
}

Multi Line

PBToast(
  text: message,
  variant: .custom(.infoCircle, .pbPrimary),
  dismissAction: closeToast
)

Children

VStack(alignment: .leading) {
  PBToast(
    text: message,
    variant: .success,
    actionView: .custom(AnyView(Text("Undo").pbFont(.title4, color: .white))),
    dismissAction: closeToast
  )
  PBToast(
    variant: .custom(nil, .pbPrimary),
    actionView: .custom(
    AnyView(
      HStack {
        Text("Undo action").pbFont(.caption, color: .white)
        PBButton(variant: .primary, title: "Undo").disabled(true)
      }
    )),
    dismissAction: closeToast
  )
}

Props

Name	Type	Description	Default	Values
text	`String`	`Value for the toast message`	`nil`
font	`PBFont`	`Value for the toast message font style`	`.title4`
animatedIcon	`AnyView`	`Value for the option to use an animated icon`	`nil`
variant	`Variant`	`Determines the type pf toast message being displayed`	`.custom()`	`error` `success` `neutral` `custom()`
actionView	`dismissAction`	Dismisses the toast message	`.default`	`default` `custom()` `withTimer()`
dismissAction	`(() -> Void)`	`Triggers the dismiss action`

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

Github

Connect Chat