Dialog

Modal dialog built on React Aria. While it's open, focus is trapped inside and the rest of the page is hidden from assistive tech; Esc and a click on the underlay close it.

import { Dialog } from "@pockets-ui/components"

Anatomy

Part	Role
`Dialog.Root`	Wires the trigger to the modal and owns open state.
`Dialog.Trigger`	Opens the dialog. Also usable inside, as an action button.
`Dialog.Content`	The modal surface. Takes children or a `({ close }) => …` render function.
`Dialog.Title`	The dialog's heading, used as its accessible name.
`Dialog.Close`	A button that dismisses the dialog.

Confirmation dialog

Dialog.Content accepts a render function so nested actions can reach close. Use it when a button needs to do something and then dismiss — as Confirm does here — while Dialog.Close covers plain dismissal.

Code

import { Dialog } from "@pockets-ui/components"
import { css } from "@/styled-system/css"
import { button } from "@/styled-system/recipes"

// Dialog.Trigger and Dialog.Close render their own elements, so style them
// with the button recipe rather than nesting a <Button> inside.
const solid = button({ variant: "solid" })

const body = css({ color: "fg.subtle", lineHeight: "relaxed" })
const actions = css({
  display: "flex",
  gap: "3",
  justifyContent: "flex-end",
  marginTop: "2",
})

export default function DialogConfirmation() {
  return (
    <Dialog.Root>
      <Dialog.Trigger className={solid}>Delete item</Dialog.Trigger>
      <Dialog.Content>
        {({ close }) => (
          <>
            <Dialog.Title>Delete item?</Dialog.Title>
            <p className={body}>
              This action cannot be undone. The item will be permanently removed
              from your collection.
            </p>
            <div className={actions}>
              <Dialog.Close>Cancel</Dialog.Close>
              <Dialog.Trigger
                className={solid}
                onPress={() => {
                  // In a real app you'd run the destructive action here.
                  close()
                }}
              >
                Confirm
              </Dialog.Trigger>
            </div>
          </>
        )}
      </Dialog.Content>
    </Dialog.Root>
  )
}