# Alert Dialog Primitive

Alert Dialog is a Starwind Runtime primitive in the dialog-native-overlay contract family.
Astro and React share one semantic component API. React coordinates reactive state through controlled and default props plus callbacks. Astro renders initial state and coordinates later changes through DOM events and Runtime methods. Raw HTML uses Runtime attributes, DOM events, and imperative methods.
## Anatomy
### Astro
Use the Astro primitive adapter to render AlertDialog anatomy with the Runtime wiring included.
```astro
---
import { AlertDialog } from "@starwind-ui/astro/alert-dialog";
---

<AlertDialog.Root>
  <AlertDialog.Trigger>Delete item</AlertDialog.Trigger>
  <AlertDialog.Backdrop />
  <AlertDialog.Viewport>
    <AlertDialog.Popup>
      <AlertDialog.Title>Delete item?</AlertDialog.Title>
      <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
      <AlertDialog.Close>Cancel</AlertDialog.Close>
    </AlertDialog.Popup>
  </AlertDialog.Viewport>
</AlertDialog.Root>
```

### React
Use the React primitive adapter when AlertDialog state participates in React rendering.
```tsx
import { AlertDialog } from "@starwind-ui/react/alert-dialog";

export function Example() {
  return (
    <AlertDialog.Root>
      <AlertDialog.Trigger>Delete item</AlertDialog.Trigger>
      <AlertDialog.Backdrop />
      <AlertDialog.Viewport>
        <AlertDialog.Popup>
          <AlertDialog.Title>Delete item?</AlertDialog.Title>
          <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
          <AlertDialog.Close>Cancel</AlertDialog.Close>
        </AlertDialog.Popup>
      </AlertDialog.Viewport>
    </AlertDialog.Root>
  );
}
```

### HTML
Render the AlertDialog data-sw-* contract yourself, then initialize createAlertDialog.
```html
<div data-sw-alert-dialog>
  <button data-sw-alert-dialog-trigger type="button" aria-haspopup="dialog">Delete item</button>
  <div data-sw-alert-dialog-backdrop hidden></div>
  <div data-sw-alert-dialog-viewport>
    <dialog data-sw-alert-dialog-popup role="alertdialog">
      <h2 data-sw-alert-dialog-title>Delete item?</h2>
      <p data-sw-alert-dialog-description>This action cannot be undone.</p>
      <button data-sw-alert-dialog-close type="button">Cancel</button>
    </dialog>
  </div>
</div>

<script type="module">
  import { createAlertDialog } from "@starwind-ui/runtime/alert-dialog";

  const root = document.querySelector("[data-sw-alert-dialog]");
  if (root) {
    createAlertDialog(root);
  }
</script>
```

### Vue
Use the Vue 3.5 beta adapter to render AlertDialog anatomy.
```vue
<script setup lang="ts">
import AlertDialog from "@starwind-ui/vue/alert-dialog";
</script>

<template>
  <AlertDialog.Root>
    <AlertDialog.Trigger>Delete item</AlertDialog.Trigger>
    <AlertDialog.Backdrop />
    <AlertDialog.Viewport>
      <AlertDialog.Popup>
        <AlertDialog.Title>Delete item?</AlertDialog.Title>
        <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
        <AlertDialog.Close>Cancel</AlertDialog.Close>
      </AlertDialog.Popup>
    </AlertDialog.Viewport>
  </AlertDialog.Root>
</template>
```
## API Reference
### Root
The main element that owns the Alert Dialog Runtime instance.
| Fact | Value |
| --- | --- |
| Default element | `div` |
| Discovery hook | `data-sw-alert-dialog` |
| Role | - |
#### Props
| Prop | Type | Default | Kind | Description | Framework Behavior |
| --- | --- | --- | --- | --- | --- |
| open | `boolean` | - | control | Controls whether Alert Dialog is open. | **React:** Use open for controlled state and defaultOpen for default state, and onOpenChange for change proposals.<br>**Astro:** Use open or defaultOpen for initial state, listen for starwind:open-change, and call setOpen for later updates.<br>**Runtime / HTML:** Use data-default-open for initial state, listen for starwind:open-change, and call setOpen for later updates. |
| defaultOpen | `boolean` | false | control | Sets whether Alert Dialog starts open. | **React:** Use open for controlled state and defaultOpen for default state, and onOpenChange for change proposals.<br>**Astro:** Use open or defaultOpen for initial state, listen for starwind:open-change, and call setOpen for later updates.<br>**Runtime / HTML:** Use data-default-open for initial state, listen for starwind:open-change, and call setOpen for later updates. |
| closeOnEscape | `boolean` | true | option | Closes Alert Dialog when Escape is pressed. | - |
| closeOnOutsideInteract | `boolean` | false | option | Closes Alert Dialog when the user interacts outside it. | - |
| modal | `boolean` | true | option | Makes Alert Dialog behave as a modal overlay. | - |
| onCloseComplete | `(open: boolean, details: AlertDialogCloseCompleteDetails) => void` | - | callback | Runs after Alert Dialog has finished closing. | - |
| onOpenChange | `(open: boolean, details: AlertDialogOpenChangeDetails) => void` | - | callback | Runs when Alert Dialog opens or closes. | **React:** Use open for controlled state and defaultOpen for default state, and onOpenChange for change proposals.<br>**Astro:** Use open or defaultOpen for initial state, listen for starwind:open-change, and call setOpen for later updates.<br>**Runtime / HTML:** Use data-default-open for initial state, listen for starwind:open-change, and call setOpen for later updates. |
#### Data Attributes
| Attribute | Source | Value | Description |
| --- | --- | --- | --- |
| `data-sw-alert-dialog` | runtime | - | Marks the Root part so Starwind Runtime can find it. |
| `data-default-open` | prop | - | Reflects the default open prop on the Root part. |
| `data-close-on-escape` | prop | - | Reflects the close on escape prop on the Root part. |
| `data-close-on-outside-interact` | prop | - | Reflects the close on outside interact prop on the Root part. |
| `data-modal` | prop | - | Reflects the modal prop on the Root part. |
| `data-state` | state | - | Reflects the current state on the Root part. |
#### State
| State | Value Type | Controlled Prop | Default Prop | Initial Attribute | Runtime Getter | Runtime Setter | Description | State Control Support |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| open | `boolean` | open | defaultOpen | `data-default-open` | `getOpen` | `setOpen` | Tracks whether Alert Dialog is open. | **React:** Use open for controlled state and defaultOpen for default state, and onOpenChange for change proposals.<br>**Astro:** Use open or defaultOpen for initial state, listen for starwind:open-change, and call setOpen for later updates.<br>**Runtime / HTML:** Use data-default-open for initial state, listen for starwind:open-change, and call setOpen for later updates. |
#### Events
| Event | Callback | DOM Event | Value | Details | Timing | Cancelable | Description | Cancellation Sequence |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| closeComplete | onCloseComplete | starwind:close-complete | open: `boolean` | AlertDialogCloseCompleteDetails | after-state-commit | No | Fires after Alert Dialog has finished closing. | - |
| openChange | onOpenChange | starwind:open-change | open: `boolean` | AlertDialogOpenChangeDetails | before-state-commit | Yes | Fires when Alert Dialog opens or closes. | 1. Check internal eligibility and intent.<br>2. Create one details object for the proposal.<br>3. Call the Runtime callback with the details object when the controller exposes one.<br>4. Dispatch the cancelable DOM event with the same details object, including when the callback canceled it.<br>5. Read details.isCanceled, including cancellation caused by preventDefault().<br>6. Apply the accepted state.<br>7. Notify Runtime subscribers and other accepted-only observers. |
#### Runtime Setters
| Method | Target | Options | Suppresses Emit | Description |
| --- | --- | --- | --- | --- |
| `setOpen` | state: open | emit: false | Yes | Opens or closes Alert Dialog from Runtime code. |
#### Refs
| Part | Public |
| --- | --- |
| root | Yes |
#### Initial Markup
| Attributes | Reason |
| --- | --- |
| `data-sw-alert-dialog`, `data-default-open`, `data-close-on-escape`, `data-close-on-outside-interact`, `data-modal`, `data-state` | The alert dialog root needs default-open, dismissal, modality, and initial state markers before hydration. |
#### Presence
| Fact | Value |
| --- | --- |
| Initial hidden | No |
| Unmount policy | runtime-owned |
| Keep mounted prop | - |

### Trigger
The control that opens, closes, or targets the Alert Dialog content.
| Fact | Value |
| --- | --- |
| Default element | `button` |
| Discovery hook | `data-sw-alert-dialog-trigger` |
| Role | - |
#### Props
| Prop | Type | Default | Kind | Description | Framework Behavior |
| --- | --- | --- | --- | --- | --- |
| targetId | `string` | - | attribute | Targets a specific root element by id. | - |
#### Data Attributes
| Attribute | Source | Value | Description |
| --- | --- | --- | --- |
| `data-sw-alert-dialog-trigger` | runtime | - | Marks the Trigger part so Starwind Runtime can find it. |
| `data-sw-alert-dialog-target-id` | prop | - | Reflects the sw alert dialog target id prop on the Trigger part. |
| `data-state` | state | - | Reflects the current state on the Trigger part. |
#### Refs
| Part | Public |
| --- | --- |
| trigger | Yes |
#### Initial Markup
| Attributes | Reason |
| --- | --- |
| `data-sw-alert-dialog-trigger`, `type`, `aria-haspopup`, `data-sw-alert-dialog-target-id`, `data-state` | Triggers need button semantics, dialog affordances, and initial closed state before activation listeners attach. |

### Portal
Moves Alert Dialog overlay content to the document body when needed.
| Fact | Value |
| --- | --- |
| Default element | `div` |
| Discovery hook | `data-sw-alert-dialog-portal` |
| Role | - |
#### Data Attributes
| Attribute | Source | Value | Description |
| --- | --- | --- | --- |
| `data-sw-alert-dialog-portal` | runtime | - | Marks the Portal part so Starwind Runtime can find it. |
| `data-container` | prop | - | Reflects the container prop on the Portal part. |
| `data-disabled` | prop | - | Reflects the disabled prop on the Portal part. |
| `data-sw-portal-placement` | constant | `runtime` | Identifies Portal metadata for styling and selectors. |
| `data-placement` | runtime | - | Marks the Portal part so Starwind Runtime can find it. |
#### Refs
| Part | Public |
| --- | --- |
| portal | Yes |

### Backdrop
The backdrop shown behind the Alert Dialog overlay.
| Fact | Value |
| --- | --- |
| Default element | `div` |
| Discovery hook | `data-sw-alert-dialog-backdrop` |
| Role | - |
#### Data Attributes
| Attribute | Source | Value | Description |
| --- | --- | --- | --- |
| `data-sw-alert-dialog-backdrop` | runtime | - | Marks the Backdrop part so Starwind Runtime can find it. |
| `data-state` | state | - | Reflects the current state on the Backdrop part. |
#### Refs
| Part | Public |
| --- | --- |
| backdrop | Yes |
#### Initial Markup
| Attributes | Reason |
| --- | --- |
| `data-sw-alert-dialog-backdrop`, `data-state`, `hidden` | The backdrop starts hidden and receives runtime-owned open/close visibility. |
#### Presence
| Fact | Value |
| --- | --- |
| Initial hidden | Yes |
| Unmount policy | runtime-owned |
| Keep mounted prop | - |

### Viewport
The visible viewport for Alert Dialog content.
| Fact | Value |
| --- | --- |
| Default element | `div` |
| Discovery hook | `data-sw-alert-dialog-viewport` |
| Role | - |
#### Data Attributes
| Attribute | Source | Value | Description |
| --- | --- | --- | --- |
| `data-sw-alert-dialog-viewport` | runtime | - | Marks the Viewport part so Starwind Runtime can find it. |
#### Refs
| Part | Public |
| --- | --- |
| viewport | Yes |

### Popup
The floating content container for Alert Dialog.
| Fact | Value |
| --- | --- |
| Default element | `dialog` |
| Discovery hook | `data-sw-alert-dialog-popup` |
| Role | `alertdialog` |
#### Data Attributes
| Attribute | Source | Value | Description |
| --- | --- | --- | --- |
| `data-sw-alert-dialog-popup` | runtime | - | Marks the Popup part so Starwind Runtime can find it. |
| `data-state` | state | - | Reflects the current state on the Popup part. |
#### Refs
| Part | Public |
| --- | --- |
| popup | Yes |
#### Initial Markup
| Attributes | Reason |
| --- | --- |
| `data-sw-alert-dialog-popup`, `role`, `data-state` | The native popup starts closed with alertdialog semantics before runtime normalization maps it onto the Dialog controller. |

### Title
The accessible title for Alert Dialog.
| Fact | Value |
| --- | --- |
| Default element | `h2` |
| Discovery hook | `data-sw-alert-dialog-title` |
| Role | - |
#### Data Attributes
| Attribute | Source | Value | Description |
| --- | --- | --- | --- |
| `data-sw-alert-dialog-title` | runtime | - | Marks the Title part so Starwind Runtime can find it. |
#### Refs
| Part | Public |
| --- | --- |
| title | Yes |

### Description
Supporting description text for Alert Dialog.
| Fact | Value |
| --- | --- |
| Default element | `p` |
| Discovery hook | `data-sw-alert-dialog-description` |
| Role | - |
#### Data Attributes
| Attribute | Source | Value | Description |
| --- | --- | --- | --- |
| `data-sw-alert-dialog-description` | runtime | - | Marks the Description part so Starwind Runtime can find it. |
#### Refs
| Part | Public |
| --- | --- |
| description | Yes |

### Close
A control that closes Alert Dialog.
| Fact | Value |
| --- | --- |
| Default element | `button` |
| Discovery hook | `data-sw-alert-dialog-close` |
| Role | - |
#### Data Attributes
| Attribute | Source | Value | Description |
| --- | --- | --- | --- |
| `data-sw-alert-dialog-close` | runtime | - | Marks the Close part so Starwind Runtime can find it. |
#### Refs
| Part | Public |
| --- | --- |
| close | Yes |
#### Initial Markup
| Attributes | Reason |
| --- | --- |
| `data-sw-alert-dialog-close`, `type` | Action/cancel controls need button semantics before runtime listeners attach. |
## Runtime API
| Fact | Value |
| --- | --- |
| Factory | [`createAlertDialog`](/docs/runtime/#create-alert-dialog) |
| Import | `@starwind-ui/runtime/alert-dialog` |
| Root part | root |
| Option props | closeOnEscape, closeOnOutsideInteract, defaultOpen, modal, onCloseComplete, onOpenChange, open |
| Option lifecycles | closeOnEscape: constructor-only, closeOnOutsideInteract: constructor-only, defaultOpen: constructor-only, modal: constructor-only, onCloseComplete: constructor-only, onOpenChange: constructor-only, open: setter-backed |
## Related Styled Components
| Component | Relationship |
| --- | --- |
| [Alert Dialog](/docs/components/alert-dialog/) | Direct Primitive |
## Exports
| Group | Import | Exports |
| --- | --- | --- |
| Runtime | `@starwind-ui/runtime/alert-dialog` | `createAlertDialog` |
| Astro Primitive | `@starwind-ui/astro/alert-dialog` | `AlertDialog`, `AlertDialogRoot`, `AlertDialogTrigger`, `AlertDialogPortal`, `AlertDialogBackdrop`, `AlertDialogViewport`, `AlertDialogPopup`, `AlertDialogTitle`, `AlertDialogDescription`, `AlertDialogClose` |
| React Primitive | `@starwind-ui/react/alert-dialog` | `AlertDialog`, `AlertDialogRoot`, `AlertDialogTrigger`, `AlertDialogPortal`, `AlertDialogBackdrop`, `AlertDialogViewport`, `AlertDialogPopup`, `AlertDialogTitle`, `AlertDialogDescription`, `AlertDialogClose` |
## Canonical Names
| Kind | Name |
| --- | --- |
| namespace | `AlertDialog` |
| runtime-factory | `createAlertDialog` |
| part | `AlertDialog.Root` |
| part | `AlertDialog.Trigger` |
| part | `AlertDialog.Portal` |
| part | `AlertDialog.Backdrop` |
| part | `AlertDialog.Viewport` |
| part | `AlertDialog.Popup` |
| part | `AlertDialog.Title` |
| part | `AlertDialog.Description` |
| part | `AlertDialog.Close` |
## Changelog
### v1.1.1
- Removed obsolete private-release warnings from generated Vue adapters and normalized the resulting blank line in vendored Primitive indexes.
### v1.1.0
- Added portable Portal container and disabled controls, with deterministic framework and Runtime placement reporting for nested floating content.
### v1.0.0
- Promoted this Primitive's vendoring version to the stable 1.0.0 baseline. Its existing API and Runtime behavior carry forward from the previous release.
### v0.1.1
- Marked generated React Primitive files as client modules so vendored installs preserve client boundaries in React server frameworks.
- Kept generated React state-change callbacks and DOM events cancelable until the Runtime accepts the proposed state, then synchronized rendered state.
### v0.1.0
- Introduced modal confirmation state with focus management, dismissal rules, and accessible alert-dialog semantics.