Skip to content
Paramanu v0.1.0-alpha.0

Alert Dialog

Alert Dialog is a modal that requires explicit user action to dismiss. Unlike Dialog, it does not close on backdrop click. Uses role="alertdialog".

Basic Usage

Delete Item?
This action cannot be undone.
import { Alertdialog, AlertdialogHeader, AlertdialogBody, AlertdialogFooter } from "@paramanu/overlays-react"


export default function App() {
return (
  <Alertdialog open variant="danger" onClose={() => {}}>
    <AlertdialogHeader>Delete Item?</AlertdialogHeader>
    <AlertdialogBody>This action cannot be undone.</AlertdialogBody>
    <AlertdialogFooter>
      <button>Cancel</button>
      <button>Delete</button>
    </AlertdialogFooter>
  </Alertdialog>
)
}
<div class="pm-alertdialog pm-alertdialog--danger" role="alertdialog" aria-modal="true">
<div class="pm-alertdialog__header">Delete Item?</div>
<div class="pm-alertdialog__body">This action cannot be undone.</div>
<div class="pm-alertdialog__footer">
  <button>Cancel</button>
  <button>Delete</button>
</div>
</div>