Dialog

Summary

Simple

PBDialog(
            title: "This is some informative text",
            message: infoMessage,
            cancelButton: ("Cancel", closeToast),
            confirmButton: ("Okay", closeToast)
          )

Sizes

    @State private var presentSmallDialog: Bool = false
    @State private var presentMediumDialog: Bool = false
    @State private var presentLargeDialog: Bool = false
    let infoMessage = "This is a message for informational purposes only and requires no action."

     PBDialog(
            title: "Large",
            message: infoMessage,
            variant: .default,
            isStacked: false,
            cancelButton: ("Cancel", {}),
            confirmButton: ("Okay", {}),
            size: .large
          )

Status


 PBDialog(
              title: "Success!",
              message: infoMessage,
              variant: .status(.success),
              isStacked: true,
              cancelButton: ("Cancel", closeToast),
              confirmButton: ("Okay", closeToast),
              size: .small
            )

Props

Name	Type	Description	Default	Values
content	`Content`	Sets the View content
title	`String`	Sets title for dialog header
message	`String`	Sets dialog message
variant	`DialogVariant`	Changes variant of dialog	`.default`	`.default` `.status()`
isStacked	`isStacked`	Changes whether the dialog buttons are stacked or inline	`false`	`true` `false`
cancelButton	`Action`	Dismisses the dialog
confirmButton	`Action`	Confirms dialog message was received
onClose	`Action`	Starts action when dialog is closed
size	`DialogSize`	Determines size of dialog	`.medium`	`.small` `.medium` `large`
shouldCloseOnOverlay	`Bool`	Determines if overlay should close	`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