Stalk UI

Component

AlertDialog

Interrupts with a modal that requires an explicit confirm or cancel.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/alert-dialog

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<AlertDialog.Root>
  <AlertDialog.Trigger asChild>
    <Button tone="danger" variant="outline">
      Delete project
    </Button>
  </AlertDialog.Trigger>
  <AlertDialog.Content>
    <AlertDialog.Header>
      <AlertDialog.Title>Delete this project?</AlertDialog.Title>
      <AlertDialog.Description>
        This permanently removes the project and all of its data. This action cannot be undone.
      </AlertDialog.Description>
    </AlertDialog.Header>
    <AlertDialog.Footer>
      <AlertDialog.Cancel asChild>
        <Button variant="outline">Cancel</Button>
      </AlertDialog.Cancel>
      <AlertDialog.Action asChild>
        <Button tone="danger">Delete</Button>
      </AlertDialog.Action>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>

Props

Public component props extracted from the source TypeScript types.

No component-specific props are documented yet — the component accepts the underlying element's standard props.

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

No recipe variants are documented for this component.

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/alert-dialog.json`
  • Recipe: `alertDialog`
  • Files: `src/components/ui/alert-dialog.tsx`