On this page

AlertDialog Primitive

AlertDialog is a Starwind Runtime primitive in the dialog-native-overlay contract family.

Anatomy

Use the Astro primitive adapter to render AlertDialog anatomy with the Runtime wiring included.

---
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>

Use the React primitive adapter when AlertDialog state participates in React rendering.

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>
  );
}

Render the AlertDialog data-sw-* contract yourself, then initialize createAlertDialog.

<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>

API Reference

Root

The main element that owns the AlertDialog Runtime instance.

Default element: div
Discovery hook: data-sw-alert-dialog
Role: -

Props

Prop Type Default

open boolean -

Description: Controls whether AlertDialog is open.
Kind: control
Targets: root
Full type: boolean

defaultOpen boolean false

Description: Sets whether AlertDialog starts open.
Kind: control
Targets: root
Full type: boolean

closeOnEscape boolean true

Description: Closes AlertDialog when Escape is pressed.
Kind: option
Targets: -
Full type: boolean

closeOnOutsideInteract boolean false

Description: Closes AlertDialog when the user interacts outside it.
Kind: option
Targets: -
Full type: boolean

modal boolean true

Description: Makes AlertDialog behave as a modal overlay.
Kind: option
Targets: -
Full type: boolean

onCloseComplete (open: boolean, details: AlertDialogCloseCompleteDetails) => void -

Description: Runs after AlertDialog has finished closing.
Kind: callback
Targets: -
Full type: (open: boolean, details: AlertDialogCloseCompleteDetails) => void

onOpenChange (open: boolean, details: AlertDialogOpenChangeDetails) => void -

Description: Runs when AlertDialog opens or closes.
Kind: callback
Targets: -
Full type: (open: boolean, details: AlertDialogOpenChangeDetails) => void

Events

Event Callback Value

closeComplete onCloseComplete open: boolean

Description: Fires after AlertDialog has finished closing.
DOM event: starwind:close-complete
Details type: AlertDialogCloseCompleteDetails
Timing: after-state-commit
Cancelable: No

openChange onOpenChange open: boolean

Description: Fires when AlertDialog opens or closes.
DOM event: starwind:open-change
Details type: AlertDialogOpenChangeDetails
Timing: before-state-commit
Cancelable: Yes

State

State Type Props

open boolean open / defaultOpen

Description: Tracks whether AlertDialog is open.
Initial attribute: data-default-open
Runtime getter: getOpen
Runtime setter: setOpen
State control support: React supports controlled and default state with open and defaultOpen props. Runtime/HTML reads initial state from data-default-open, emits starwind:close-complete and starwind:open-change, and updates with setOpen. Astro adapters render initial/default state, but do not expose reactive controlled-state props for this state.

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-alert-dialog - Marks the Root part so Starwind Runtime can find it.

State

Attribute Value Description

data-state - Reflects the current state on the Root part.

Metadata

Attribute Value Description

data-default-open - Reflects the default open prop on the Root part.

data-close-on-escape - Reflects the close on escape prop on the Root part.

data-close-on-outside-interact - Reflects the close on outside interact prop on the Root part.

data-modal - Reflects the modal prop on the Root part.

Trigger

The control that opens, closes, or targets the AlertDialog content.

Default element: button
Discovery hook: data-sw-alert-dialog-trigger
Role: -

Props

Prop Type Default

targetId string -

Description: Targets a specific root element by id.
Kind: attribute
Targets: trigger
Full type: string

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-alert-dialog-trigger - Marks the Trigger part so Starwind Runtime can find it.

State

Attribute Value Description

data-state - Reflects the current state on the Trigger part.

Metadata

Attribute Value Description

data-sw-alert-dialog-target-id - Reflects the sw alert dialog target id prop on the Trigger part.

Portal

Moves AlertDialog overlay content to the document body when needed.

Default element: div
Discovery hook: data-sw-alert-dialog-portal
Role: -

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-alert-dialog-portal - Marks the Portal part so Starwind Runtime can find it.

Backdrop

The backdrop shown behind the AlertDialog overlay.

Default element: div
Discovery hook: data-sw-alert-dialog-backdrop
Role: -

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-alert-dialog-backdrop - Marks the Backdrop part so Starwind Runtime can find it.

State

Attribute Value Description

data-state - Reflects the current state on the Backdrop part.

Viewport

The visible viewport for AlertDialog content.

Default element: div
Discovery hook: data-sw-alert-dialog-viewport
Role: -

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-alert-dialog-viewport - Marks the Viewport part so Starwind Runtime can find it.

The floating content container for AlertDialog.

Default element: dialog
Discovery hook: data-sw-alert-dialog-popup
Role: alertdialog

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-alert-dialog-popup - Marks the Popup part so Starwind Runtime can find it.

State

Attribute Value Description

data-state - Reflects the current state on the Popup part.

Title

The accessible title for AlertDialog.

Default element: h2
Discovery hook: data-sw-alert-dialog-title
Role: -

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-alert-dialog-title - Marks the Title part so Starwind Runtime can find it.

Description

Supporting description text for AlertDialog.

Default element: p
Discovery hook: data-sw-alert-dialog-description
Role: -

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-alert-dialog-description - Marks the Description part so Starwind Runtime can find it.

Close

A control that closes AlertDialog.

Default element: button
Discovery hook: data-sw-alert-dialog-close
Role: -

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-alert-dialog-close - Marks the Close part so Starwind Runtime can find it.

Runtime API

Factory: createAlertDialog
Import: @starwind-ui/runtime/alert-dialog
Root hook: root data-sw-alert-dialog
Option props: closeOnEscape, closeOnOutsideInteract, defaultOpen, modal, onCloseComplete, onOpenChange, open

Option Lifecycles

Option	Lifecycle
closeOnEscape	constructor-only
closeOnOutsideInteract	constructor-only
defaultOpen	constructor-only
modal	constructor-only
onCloseComplete	constructor-only
onOpenChange	constructor-only
open	setter-backed

Runtime Setters

Method Target Description

setOpen state: open Opens or closes AlertDialog from Runtime code.

Component Relationship

Alert Dialog Direct primitive

Layer Metadata

Alert Dialog Primitive uses createAlertDialog. Styled components: Alert Dialog.

primitive Alert Dialog Primitive Alert Dialog Primitive uses createAlertDialog. Styled components: Alert Dialog. Runtime primitive Primitive adapter Astro Primitive adapters React Primitive adapters alert-dialog Alert Dialog Dialog Native Overlay Native dialog-backed overlays with runtime-owned dismissal and presence. /docs/primitives/alert-dialog/ createAlertDialog @starwind-ui/runtime/alert-dialog /docs/runtime/#create-alert-dialog root closeOnEscape closeOnOutsideInteract defaultOpen modal onCloseComplete onOpenChange open raw-html astro react solid svelte vue HTML Astro React Solid Svelte Vue Raw HTML Render the AlertDialog data-sw-* contract yourself, then initialize createAlertDialog. html Use the Astro primitive adapter to render AlertDialog anatomy with the Runtime wiring included. Use the React primitive adapter when AlertDialog state participates in React rendering. tsx div data-sw-alert-dialog boolean Controls whether AlertDialog is open. Sets whether AlertDialog starts open. Closes AlertDialog when Escape is pressed. Closes AlertDialog when the user interacts outside it. Makes AlertDialog behave as a modal overlay. (open: boolean, details: AlertDialogCloseCompleteDetails) => void AlertDialogCloseCompleteDetails Runs after AlertDialog has finished closing. (open: boolean, details: AlertDialogOpenChangeDetails) => void AlertDialogOpenChangeDetails Runs when AlertDialog opens or closes. 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 Reflects the close on escape prop on the Root part. data-close-on-outside-interact Reflects the close on outside interact prop on the Root part. data-modal Reflects the modal prop on the Root part. data-state state Reflects the current state on the Root part. getOpen setOpen closeComplete starwind:close-complete openChange starwind:open-change trigger button data-sw-alert-dialog-trigger targetId string Targets a specific root element by id. Marks the Trigger part so Starwind Runtime can find it. data-sw-alert-dialog-target-id Reflects the sw alert dialog target id prop on the Trigger part. Reflects the current state on the Trigger part. portal data-sw-alert-dialog-portal Marks the Portal part so Starwind Runtime can find it. backdrop data-sw-alert-dialog-backdrop Marks the Backdrop part so Starwind Runtime can find it. Reflects the current state on the Backdrop part. viewport data-sw-alert-dialog-viewport Marks the Viewport part so Starwind Runtime can find it. popup dialog data-sw-alert-dialog-popup alertdialog Marks the Popup part so Starwind Runtime can find it. Reflects the current state on the Popup part. title h2 data-sw-alert-dialog-title Marks the Title part so Starwind Runtime can find it. description p data-sw-alert-dialog-description Marks the Description part so Starwind Runtime can find it. close data-sw-alert-dialog-close Marks the Close part so Starwind Runtime can find it. Root Trigger type aria-haspopup Portal Backdrop hidden Viewport Popup role Title Description Close @starwind-ui/astro @starwind-ui/astro/alert-dialog Render static alert-dialog anatomy and self-initialize; runtime normalizes Alert Dialog parts onto the shared Dialog controller. @starwind-ui/react @starwind-ui/react/alert-dialog Bridge controlled open state through setOpen, wire onOpenChange through the factory for cancellable before-commit callbacks, and recreate on constructor-only option changes. /docs/components/alert-dialog/ Direct primitive direct-primitive Styled component Alert Dialog

AlertDialog Primitive

Anatomy

API Reference

Root

Props

Events

State

Data Attributes

Runtime hooks

State

Metadata

Trigger

Props

Data Attributes

Runtime hooks

State

Metadata

Portal

Data Attributes

Runtime hooks

Backdrop

Data Attributes

Runtime hooks

State

Viewport

Data Attributes

Runtime hooks

Popup

Data Attributes

Runtime hooks

State

Title

Data Attributes

Runtime hooks

Description

Data Attributes

Runtime hooks

Close

Data Attributes

Runtime hooks

Runtime API

Option Lifecycles

Runtime Setters

Related Styled Components