Alert Dialog

• Comes with styling, completely customizable and themeable.
• Accepts animations, themes, size props and more.
• Accessible with dev-time checks to ensure ARIA props. AlertDialog is a modal dialog that interrupts the user with important content and expects a response. It's built on Dialog with stricter accessibility requirements, and automatically stacks above other content.

Installation

Alert Dialog is already installed in @hanzo/gui, or you can install it independently:

npm install @hanzogui/alert-dialog

Anatomy

import { AlertDialog } from '@hanzo/gui' // or '@hanzogui/alert-dialog'

export default () => (
  <AlertDialog>
    <AlertDialog.Trigger />
    <AlertDialog.Portal>
      <AlertDialog.Overlay />
      <AlertDialog.Content>
        <AlertDialog.Title />
        <AlertDialog.Description />
        <AlertDialog.Cancel />
        {/* ... */}
      </AlertDialog.Content>
    </AlertDialog.Portal>
  </AlertDialog>
)

API Reference

AlertDialog

Contains every component for the AlertDialog. Shares all Dialog Props, except modal which is on by default. Adds:

AlertDialog.Trigger

Just Hanzo GUI Props.

AlertDialog.Portal

Renders AlertDialog into appropriate container. Beyond Hanzo GUI Props, adds:

AlertDialog.Content

Main container for AlertDialog content, this is where you should apply animations.

Beyond Hanzo GUI Props, adds:

AlertDialog.Overlay

Displays behind Content. Beyond Hanzo GUI Props, adds:

AlertDialog.Title

Required. Can wrap in VisuallyHidden to hide.

Defaults to H2, see Headings.

AlertDialog.Description

Required. Can wrap in VisuallyHidden to hide.

Defaults to Paragraph, see Paragraph.

AlertDialog.Cancel

Closes the AlertDialog, accepts all YStack props. Recommended to use with your own component and asChild.

AlertDialog.Action

Confirms the AlertDialog action, accepts all YStack props. Recommended to use with your own component and asChild.

AlertDialog.Destructive

A destructive action button for the AlertDialog. When using native mode on iOS, this renders with the native red destructive button style. Accepts all YStack props.

<AlertDialog native>
  <AlertDialog.Trigger asChild>
    <Button>Delete Account</Button>
  </AlertDialog.Trigger>
  <AlertDialog.Portal>
    <AlertDialog.Overlay />
    <AlertDialog.Content>
      <AlertDialog.Title>Delete Account?</AlertDialog.Title>
      <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
      <AlertDialog.Cancel asChild>
        <Button>Cancel</Button>
      </AlertDialog.Cancel>
      <AlertDialog.Destructive asChild>
        <Button theme="red">Delete</Button>
      </AlertDialog.Destructive>
    </AlertDialog.Content>
  </AlertDialog.Portal>
</AlertDialog>

PortalProvider