AlertDialog

Default

Delete project

import { AlertDialog, Button } from '@eekodigital/raster';

<AlertDialog.Root>
  <AlertDialog.Trigger>
    {(props) => <Button variant="danger" {...props}>Delete project</Button>}
  </AlertDialog.Trigger>
  <AlertDialog.Portal>
    <AlertDialog.Overlay />
    <AlertDialog.Content>
      <AlertDialog.Title>Delete project?</AlertDialog.Title>
      <AlertDialog.Description>
        This will permanently delete the project and all its audits.
        This action cannot be undone.
      </AlertDialog.Description>
      <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
      <AlertDialog.Action>Delete project</AlertDialog.Action>
    </AlertDialog.Content>
  </AlertDialog.Portal>
</AlertDialog.Root>

Submitting a form on confirm

When the confirmed action needs to submit to a server, use useSubmit from React Router in the AlertDialog.Action’s onClick handler. This avoids a hidden form and keeps the intent explicit.

import { useSubmit } from 'react-router';
import { AlertDialog, Button } from '@eekodigital/raster';

function DeleteProjectButton({ project }) {
const submit = useSubmit();
return (

<AlertDialog.Root>
<AlertDialog.Trigger>
{(props) => <Button variant="danger" size="sm" {...props}>Delete project</Button>}
</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay />
<AlertDialog.Content>
<AlertDialog.Title>Delete project?</AlertDialog.Title>
<AlertDialog.Description>
"{project.name}" and all its audits will be permanently
deleted. This cannot be undone.
</AlertDialog.Description>
<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
<AlertDialog.Action
onClick={() =>
submit({ _intent: 'delete' }, { method: 'post' })
} >
Delete project
</AlertDialog.Action>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
);
}

When to use

Use AlertDialog for: deleting records, revoking access, bulk destructive operations, publishing irreversible changes.

Don’t use AlertDialog for: routine confirmations, navigating away from unsaved forms (use a beforeunload guard instead), or anything reversible — those suit a Toast undo pattern better.

Sub-components

Component	Description
AlertDialog.Root	State provider. No visual output.
AlertDialog.Trigger	The element that opens the dialog. Pass a render prop to render as a Button.
AlertDialog.Portal	Renders overlay and content into document.body.
AlertDialog.Overlay	Dimmed backdrop. Clicking it does not close the dialog.
AlertDialog.Content	The dialog panel. Focus is trapped here while open.
AlertDialog.Title	Required. Names the dialog for assistive technology.
AlertDialog.Description	Required. Explains the consequences of the action.
AlertDialog.Cancel	Styled dismiss button. Closes without taking action.
AlertDialog.Action	Styled confirm button. Wire up your action in onClick.