Documentation
OverlaysGlass surface
AlertDialog
Confirms destructive or high-commitment actions.
01
See it in context
Preview
02
Copy a working example
Usage
---
import {
AlertDialog,
Button
} from '@santi020k/lumen-astro'
---
<Button variant="destructive" data-ui-alert-dialog-trigger="ex-alert-dialog">Delete project</Button>
<AlertDialog id="ex-alert-dialog">
<h2>Delete this project?</h2>
<p>This action cannot be undone. The project and its deployments will be removed.</p>
<footer>
<Button variant="ghost" data-ui-alert-dialog-close>Cancel</Button>
<Button variant="destructive" data-ui-alert-dialog-close>Delete</Button>
</footer>
</AlertDialog>---
import {
AlertDialog,
Button
} from '@santi020k/lumen-astro'
---
<Button variant="destructive" data-ui-alert-dialog-trigger="ex-alert-dialog">Delete project</Button>
<AlertDialog id="ex-alert-dialog">
<h2>Delete this project?</h2>
<p>This action cannot be undone. The project and its deployments will be removed.</p>
<footer>
<Button variant="ghost" data-ui-alert-dialog-close>Cancel</Button>
<Button variant="destructive" data-ui-alert-dialog-close>Delete</Button>
</footer>
</AlertDialog>import { AlertDialog, Button } from '@santi020k/lumen-react'
export const Example = () => (
<>
<Button variant="destructive" data-ui-alert-dialog-trigger="ex-alert-dialog">Delete project</Button>
<AlertDialog id="ex-alert-dialog">
<h2>Delete this project?</h2>
<p>This action cannot be undone. The project and its deployments will be removed.</p>
<footer>
<Button variant="ghost" data-ui-alert-dialog-close>Cancel</Button>
<Button variant="destructive" data-ui-alert-dialog-close>Delete</Button>
</footer>
</AlertDialog>
</>
)import { AlertDialog, Button } from '@santi020k/lumen-react'
export const Example = () => (
<>
<Button variant="destructive" data-ui-alert-dialog-trigger="ex-alert-dialog">Delete project</Button>
<AlertDialog id="ex-alert-dialog">
<h2>Delete this project?</h2>
<p>This action cannot be undone. The project and its deployments will be removed.</p>
<footer>
<Button variant="ghost" data-ui-alert-dialog-close>Cancel</Button>
<Button variant="destructive" data-ui-alert-dialog-close>Delete</Button>
</footer>
</AlertDialog>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-button variant="destructive" data-ui-alert-dialog-trigger="ex-alert-dialog">Delete project</lumen-button>
<lumen-alert-dialog id="ex-alert-dialog">
<h2>Delete this project?</h2>
<p>This action cannot be undone. The project and its deployments will be removed.</p>
<footer>
<lumen-button variant="ghost" data-ui-alert-dialog-close>Cancel</lumen-button>
<lumen-button variant="destructive" data-ui-alert-dialog-close>Delete</lumen-button>
</footer>
</lumen-alert-dialog><script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-button variant="destructive" data-ui-alert-dialog-trigger="ex-alert-dialog">Delete project</lumen-button>
<lumen-alert-dialog id="ex-alert-dialog">
<h2>Delete this project?</h2>
<p>This action cannot be undone. The project and its deployments will be removed.</p>
<footer>
<lumen-button variant="ghost" data-ui-alert-dialog-close>Cancel</lumen-button>
<lumen-button variant="destructive" data-ui-alert-dialog-close>Delete</lumen-button>
</footer>
</lumen-alert-dialog>03
Choose your target
Add this component
Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.
pnpm add @santi020k/lumen-astropnpm add @santi020k/lumen-astrolumen add AlertDialoglumen add AlertDialogpnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add AlertDialog --target reactlumen add AlertDialog --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add AlertDialog --target elementslumen add AlertDialog --target elementsGlass
Add the glass prop to apply the shared blur, saturation, border, and highlight tokens. Glass reads best over vivid content, so place the surface above imagery or color.
---
import {
AlertDialog,
Button
} from '@santi020k/lumen-astro'
---
<div class="docs-glass-demo" style="justify-items: center;">
<Button variant="destructive" data-ui-alert-dialog-trigger="ex-alert-dialog-glass">Delete project</Button>
</div>
<AlertDialog id="ex-alert-dialog-glass" glass>
<h2>Delete this project?</h2>
<p>The glass pane reads as a lens: the page behind it stays visible but blurred and dimmed.</p>
<footer>
<Button variant="ghost" data-ui-alert-dialog-close>Cancel</Button>
<Button variant="destructive" data-ui-alert-dialog-close>Delete</Button>
</footer>
</AlertDialog>---
import {
AlertDialog,
Button
} from '@santi020k/lumen-astro'
---
<div class="docs-glass-demo" style="justify-items: center;">
<Button variant="destructive" data-ui-alert-dialog-trigger="ex-alert-dialog-glass">Delete project</Button>
</div>
<AlertDialog id="ex-alert-dialog-glass" glass>
<h2>Delete this project?</h2>
<p>The glass pane reads as a lens: the page behind it stays visible but blurred and dimmed.</p>
<footer>
<Button variant="ghost" data-ui-alert-dialog-close>Cancel</Button>
<Button variant="destructive" data-ui-alert-dialog-close>Delete</Button>
</footer>
</AlertDialog>import { AlertDialog, Button } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div className="docs-glass-demo" style={{ justifyItems: 'center' }}>
<Button variant="destructive" data-ui-alert-dialog-trigger="ex-alert-dialog-glass">Delete project</Button>
</div>
<AlertDialog id="ex-alert-dialog-glass" glass>
<h2>Delete this project?</h2>
<p>The glass pane reads as a lens: the page behind it stays visible but blurred and dimmed.</p>
<footer>
<Button variant="ghost" data-ui-alert-dialog-close>Cancel</Button>
<Button variant="destructive" data-ui-alert-dialog-close>Delete</Button>
</footer>
</AlertDialog>
</>
)import { AlertDialog, Button } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div className="docs-glass-demo" style={{ justifyItems: 'center' }}>
<Button variant="destructive" data-ui-alert-dialog-trigger="ex-alert-dialog-glass">Delete project</Button>
</div>
<AlertDialog id="ex-alert-dialog-glass" glass>
<h2>Delete this project?</h2>
<p>The glass pane reads as a lens: the page behind it stays visible but blurred and dimmed.</p>
<footer>
<Button variant="ghost" data-ui-alert-dialog-close>Cancel</Button>
<Button variant="destructive" data-ui-alert-dialog-close>Delete</Button>
</footer>
</AlertDialog>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div class="docs-glass-demo" style="justify-items: center;">
<lumen-button variant="destructive" data-ui-alert-dialog-trigger="ex-alert-dialog-glass">Delete project</lumen-button>
</div>
<lumen-alert-dialog id="ex-alert-dialog-glass" glass>
<h2>Delete this project?</h2>
<p>The glass pane reads as a lens: the page behind it stays visible but blurred and dimmed.</p>
<footer>
<lumen-button variant="ghost" data-ui-alert-dialog-close>Cancel</lumen-button>
<lumen-button variant="destructive" data-ui-alert-dialog-close>Delete</lumen-button>
</footer>
</lumen-alert-dialog><script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div class="docs-glass-demo" style="justify-items: center;">
<lumen-button variant="destructive" data-ui-alert-dialog-trigger="ex-alert-dialog-glass">Delete project</lumen-button>
</div>
<lumen-alert-dialog id="ex-alert-dialog-glass" glass>
<h2>Delete this project?</h2>
<p>The glass pane reads as a lens: the page behind it stays visible but blurred and dimmed.</p>
<footer>
<lumen-button variant="ghost" data-ui-alert-dialog-close>Cancel</lumen-button>
<lumen-button variant="destructive" data-ui-alert-dialog-close>Delete</lumen-button>
</footer>
</lumen-alert-dialog>API reference
Lumen-specific props and runtime attributes for the Astro primitive. React props follow the same names; Elements use equivalent kebab-case attributes where custom elements expose them.
| Attribute | Values | Default | Description |
|---|---|---|---|
| glass | boolean | "subtle" | "strong" | false | Applies the tokenized liquid-glass surface treatment with backdrop-filter fallbacks; "subtle" and "strong" adjust the fill intensity. |
| surface | "default" | "glass" | "default" | Deprecated alias for glass; surface="glass" maps to glass={true}. |
| id | string | - | Connects the dialog surface to a matching trigger attribute value. |
| data-ui-alert-dialog-trigger | target id | - | Marks an external trigger and points it at the dialog id. |
| data-ui-alert-dialog-close | boolean attribute | - | Marks a child control that closes the nearest dialog. |
| class, className | string | "" | Merges custom classes with the generated ui-* root classes. |
| ...native attributes | HTML attributes | - | Forwards standard attributes to the root element unless the component consumes them. |