Components

ConfirmationDialog

ConfirmationDialog presents a stack of actions that asks the user to confirm an intent. It aligns with SwiftUI's `confirmationDialog` mental model while using web-native dialog semantics.

Examples

Default

Preview unavailable for this example in the static docs build.

Show code

function DefaultDialog() {
  const [isVisible, setIsVisible] = useState(false)

  return (
    <>
      <Button onClick={() => setIsVisible(true)}>Show Confirmation Dialog</Button>
      <ConfirmationDialog
        title="Delete draft?"
        message="This action cannot be undone."
        isVisible={isVisible}
        onDismiss={() => setIsVisible(false)}
        actions={[
          { label: 'Delete', style: 'destructive', action: () => setIsVisible(false) },
          { label: 'Cancel', style: 'cancel', action: () => setIsVisible(false) },
        ]}
      />
    </>
  )
}

API

Prop	Type	Required	Description
`title`	`string`	No	Optional title shown above the actions.
`message`	`string`	No	Optional supporting message.
`isVisible`	`boolean`	Yes	Whether the dialog is currently visible.
`onDismiss`	`() => void`	Yes	Called when the dialog should close.
`actions`	`IConfirmationDialogAction[]`	Yes	Available actions.

Inherits additional props from IBaseComponent.

Overview

ConfirmationDialog presents a stack of actions that asks the user to confirm an intent. It aligns with SwiftUI's confirmationDialog mental model while using web-native dialog semantics.

Notes

Use actions to declare the available choices.
cancel and destructive action styles mirror Apple's emphasis rules.
The dialog dismisses on action selection, backdrop click, or Escape.

ColorPicker

ColorPicker wraps the native color input while keeping SwiftUI-style label and value semantics.

ContainerBackground

ContainerBackground adapts SwiftUI's `containerBackground(_:for:)` modifier into an explicit surface wrapper for navigation and grouped content areas.

ConfirmationDialog

Examples

API

Overview

Notes

On this page