Actions

Alert Dialog

A modal confirmation before an important or destructive action, with Cancel as the safe default.

Class name	Type	Description
`alert-dialogplf:alert-dialog`	Component	On a Modal dialog, beside modal
`alert-dialog-headerplf:alert-dialog-header`	Part	Groups the icon, title and description
`alert-dialog-iconplf:alert-dialog-icon`	Part	An optional icon box above the title, where a color draws its icon
`alert-dialog-svgplf:alert-dialog-svg`	Part	Your own SVG in the box, in place of the color's icon; an icon class there doesn't need it
`alert-dialog-titleplf:alert-dialog-title`	Part	The dialog's heading
`alert-dialog-descriptionplf:alert-dialog-description`	Part	Muted text under the title
`alert-dialog-footerplf:alert-dialog-footer`	Part	Cancel and confirm; stacked on small screens
`alert-dialog-successplf:alert-dialog-success`	Color	A green icon
`alert-dialog-errorplf:alert-dialog-error`	Color	A red icon, for a destructive action
`alert-dialog-warningplf:alert-dialog-warning`	Color	A yellow icon
`alert-dialog-infoplf:alert-dialog-info`	Color	A blue icon

Default

Point aria-describedby at the description; the heading names the dialog and focus starts on Cancel. When the confirm button closes it, plf:modal:close reports detail.action as confirm.

<button class="btn btn-outline" data-plf-trigger="modal:open" data-plf-target="alert-dialog-default">Publish draft</button>
<dialog class="modal alert-dialog" data-plf-modal id="alert-dialog-default" aria-describedby="alert-dialog-default-description">
  <div class="alert-dialog-header">
    <h2 class="alert-dialog-title">Publish this draft?</h2>
    <p class="alert-dialog-description" id="alert-dialog-default-description">Everyone with access will see it. You can keep editing afterwards.</p>
  </div>
  <div class="alert-dialog-footer">
    <button class="btn btn-outline" data-plf-trigger="modal:close" data-plf-alert-dialog-action="cancel">Cancel</button>
    <button class="btn btn-primary" data-plf-trigger="modal:close" data-plf-alert-dialog-action="confirm">Publish</button>
  </div>
</dialog>
<script>
  document.getElementById('alert-dialog-default').addEventListener('plf:modal:close', event => {
    if (event.detail.action === 'confirm') {
      // Apply the confirmed change here.
    }
  });
</script>

<button class="plf:btn plf:btn-outline" data-plf-trigger="modal:open" data-plf-target="alert-dialog-default">Publish draft</button>
<dialog class="plf:modal plf:alert-dialog" data-plf-modal id="alert-dialog-default" aria-describedby="alert-dialog-default-description">
  <div class="plf:alert-dialog-header">
    <h2 class="plf:alert-dialog-title">Publish this draft?</h2>
    <p class="plf:alert-dialog-description" id="alert-dialog-default-description">Everyone with access will see it. You can keep editing afterwards.</p>
  </div>
  <div class="plf:alert-dialog-footer">
    <button class="plf:btn plf:btn-outline" data-plf-trigger="modal:close" data-plf-alert-dialog-action="cancel">Cancel</button>
    <button class="plf:btn plf:btn-primary" data-plf-trigger="modal:close" data-plf-alert-dialog-action="confirm">Publish</button>
  </div>
</dialog>
<script>
  document.getElementById('alert-dialog-default').addEventListener('plf:modal:close', event => {
    if (event.detail.action === 'confirm') {
      // Apply the confirmed change here.
    }
  });
</script>

'use client';

import { useState } from 'react';
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Button } from '@pelatform/react';

export function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>Publish draft</Button>
      <AlertDialog
        open={open}
        onOpenChange={(next, reason) => {
          setOpen(next);
          if (reason === 'confirm') {
            // Apply the confirmed change here.
          }
        }}
      >
        <AlertDialogHeader>
          <AlertDialogTitle>Publish this draft?</AlertDialogTitle>
          <AlertDialogDescription>Everyone with access will see it. You can keep editing afterwards.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Publish</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialog>
    </>
  );
}

'use client';

import { useState } from 'react';
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Button } from '@pelatform/react/prefixed';

export function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>Publish draft</Button>
      <AlertDialog
        open={open}
        onOpenChange={(next, reason) => {
          setOpen(next);
          if (reason === 'confirm') {
            // Apply the confirmed change here.
          }
        }}
      >
        <AlertDialogHeader>
          <AlertDialogTitle>Publish this draft?</AlertDialogTitle>
          <AlertDialogDescription>Everyone with access will see it. You can keep editing afterwards.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Publish</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialog>
    </>
  );
}

Destructive

<button class="btn btn-outline" data-plf-trigger="modal:open" data-plf-target="alert-dialog-danger">Delete project</button>
<dialog class="modal alert-dialog alert-dialog-error" data-plf-modal id="alert-dialog-danger" aria-describedby="alert-dialog-danger-description">
  <div class="alert-dialog-header">
    <span class="alert-dialog-icon">
      <span class="icon icon-alert-triangle"></span>
    </span>
    <h2 class="alert-dialog-title">Delete this project?</h2>
    <p class="alert-dialog-description" id="alert-dialog-danger-description">This permanently deletes the project and its files. It cannot be undone.</p>
  </div>
  <div class="alert-dialog-footer">
    <button class="btn btn-outline" data-plf-trigger="modal:close" data-plf-alert-dialog-action="cancel">Cancel</button>
    <button class="btn btn-error" data-plf-trigger="modal:close" data-plf-alert-dialog-action="confirm">Delete</button>
  </div>
</dialog>

<button class="plf:btn plf:btn-outline" data-plf-trigger="modal:open" data-plf-target="alert-dialog-danger">Delete project</button>
<dialog class="plf:modal plf:alert-dialog plf:alert-dialog-error" data-plf-modal id="alert-dialog-danger" aria-describedby="alert-dialog-danger-description">
  <div class="plf:alert-dialog-header">
    <span class="plf:alert-dialog-icon">
      <span class="plf:icon plf:icon-alert-triangle"></span>
    </span>
    <h2 class="plf:alert-dialog-title">Delete this project?</h2>
    <p class="plf:alert-dialog-description" id="alert-dialog-danger-description">This permanently deletes the project and its files. It cannot be undone.</p>
  </div>
  <div class="plf:alert-dialog-footer">
    <button class="plf:btn plf:btn-outline" data-plf-trigger="modal:close" data-plf-alert-dialog-action="cancel">Cancel</button>
    <button class="plf:btn plf:btn-error" data-plf-trigger="modal:close" data-plf-alert-dialog-action="confirm">Delete</button>
  </div>
</dialog>

'use client';

import { useState } from 'react';
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogIcon, AlertDialogTitle, Button, Icon } from '@pelatform/react';

export function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>Delete project</Button>
      <AlertDialog color="error" open={open} onOpenChange={setOpen}>
        <AlertDialogHeader>
          <AlertDialogIcon>
            <Icon name="alert-triangle" />
          </AlertDialogIcon>
          <AlertDialogTitle>Delete this project?</AlertDialogTitle>
          <AlertDialogDescription>This permanently deletes the project and its files. It cannot be undone.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction color="error">Delete</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialog>
    </>
  );
}

'use client';

import { useState } from 'react';
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogIcon, AlertDialogTitle, Button, Icon } from '@pelatform/react/prefixed';

export function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>Delete project</Button>
      <AlertDialog color="error" open={open} onOpenChange={setOpen}>
        <AlertDialogHeader>
          <AlertDialogIcon>
            <Icon name="alert-triangle" />
          </AlertDialogIcon>
          <AlertDialogTitle>Delete this project?</AlertDialogTitle>
          <AlertDialogDescription>This permanently deletes the project and its files. It cannot be undone.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction color="error">Delete</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialog>
    </>
  );
}

Busy state

<button class="btn btn-outline" data-plf-trigger="modal:open" data-plf-target="alert-dialog-busy">Save changes</button>
<dialog class="modal alert-dialog" data-plf-modal id="alert-dialog-busy" aria-describedby="alert-dialog-busy-description">
  <div class="alert-dialog-header">
    <h2 class="alert-dialog-title">Save these changes?</h2>
    <p class="alert-dialog-description" id="alert-dialog-busy-description">Your changes are being saved.</p>
  </div>
  <div class="alert-dialog-footer">
    <button class="btn btn-outline" data-plf-trigger="modal:close" data-plf-alert-dialog-action="cancel">Cancel</button>
    <button class="btn btn-primary" data-plf-trigger="modal:close" data-plf-alert-dialog-action="confirm" aria-busy="true" disabled>
      <span class="btn-icon btn-icon-loading"></span>
      Saving…
    </button>
  </div>
</dialog>

<button class="plf:btn plf:btn-outline" data-plf-trigger="modal:open" data-plf-target="alert-dialog-busy">Save changes</button>
<dialog class="plf:modal plf:alert-dialog" data-plf-modal id="alert-dialog-busy" aria-describedby="alert-dialog-busy-description">
  <div class="plf:alert-dialog-header">
    <h2 class="plf:alert-dialog-title">Save these changes?</h2>
    <p class="plf:alert-dialog-description" id="alert-dialog-busy-description">Your changes are being saved.</p>
  </div>
  <div class="plf:alert-dialog-footer">
    <button class="plf:btn plf:btn-outline" data-plf-trigger="modal:close" data-plf-alert-dialog-action="cancel">Cancel</button>
    <button class="plf:btn plf:btn-primary" data-plf-trigger="modal:close" data-plf-alert-dialog-action="confirm" aria-busy="true" disabled>
      <span class="plf:btn-icon plf:btn-icon-loading"></span>
      Saving…
    </button>
  </div>
</dialog>

'use client';

import { useState } from 'react';
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Button } from '@pelatform/react';

export function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>Save changes</Button>
      <AlertDialog open={open} onOpenChange={setOpen}>
        <AlertDialogHeader>
          <AlertDialogTitle>Save these changes?</AlertDialogTitle>
          <AlertDialogDescription>Your changes are being saved.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction loading>
            <span className="btn-icon btn-icon-loading" />
            Saving…
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialog>
    </>
  );
}

'use client';

import { useState } from 'react';
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Button } from '@pelatform/react/prefixed';

export function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>Save changes</Button>
      <AlertDialog open={open} onOpenChange={setOpen}>
        <AlertDialogHeader>
          <AlertDialogTitle>Save these changes?</AlertDialogTitle>
          <AlertDialogDescription>Your changes are being saved.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction loading>
            <span className="plf:btn-icon plf:btn-icon-loading" />
            Saving…
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialog>
    </>
  );
}

Alert Dialog needs JavaScript. The Full script (pelatform-ui.min.js) starts every component on page load, with no code of your own; with ESM imports, call init() yourself, as in Installation. For markup you add later, see Dynamic content.

<link rel="stylesheet" href="pelatform-ui.min.css">
<link rel="stylesheet" href="icons/icons.min.css">
<script src="pelatform-ui.min.js" defer></script>

<link rel="stylesheet" href="core/pelatform-ui-core.min.css">
<link rel="stylesheet" href="components/button.min.css">
<link rel="stylesheet" href="components/modal.min.css">
<link rel="stylesheet" href="components/alert-dialog.min.css">
<link rel="stylesheet" href="icons/icons.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/modal.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script>

<link rel="stylesheet" href="pelatform-ui.prefixed.min.css">
<link rel="stylesheet" href="icons/icons.prefixed.min.css">
<script src="pelatform-ui.min.js" defer></script>

<link rel="stylesheet" href="core/pelatform-ui-core.prefixed.min.css">
<link rel="stylesheet" href="components/button.prefixed.min.css">
<link rel="stylesheet" href="components/modal.prefixed.min.css">
<link rel="stylesheet" href="components/alert-dialog.prefixed.min.css">
<link rel="stylesheet" href="icons/icons.prefixed.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/modal.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script>

Hooks

Attribute	Purpose
`aria-describedby`	Required; non-empty text inside the dialog
`data-plf-alert-dialog-action="cancel"`	The one Cancel button
`data-plf-alert-dialog-action="confirm"`	The one confirm button; while your action runs, give it `disabled` and `aria-busy="true"`

A Modal that holds these two actions is an alert dialog, which a click outside never closes. Both actions are <button> elements with data-plf-trigger="modal:close".

Methods and events

Alert Dialog uses the Modal methods, events and keyboard. Its plf:modal:before-close and plf:modal:close events add detail.action: confirm when the confirm button closes it, cancel for Cancel, Escape and close(). Avoid <form method="dialog">, which skips plf:modal:before-close.

From a script, PLF.Dialog.fire() confirms and then shows the result with SweetAlert’s options, on dialogs it creates: see Dialogs from JavaScript.

React

AlertDialog from @pelatform/react renders this dialog on a Modal, which a click outside never closes: the application opens it with open and closes it in onOpenChange, and focus starts on AlertDialogCancel.

Prop	Values	Default
`open`	`true` while the dialog is open	Required
`onOpenChange`	`(open, reason)`, called when the dialog asks to close: `cancel` (Cancel), `confirm` (the action) or `keyboard` (Escape); keep `open` to stay open	None
`color`	`success`, `error`, `warning`, `info`	None

The parts:

Part	Element
`AlertDialogHeader`	A `div` with `alert-dialog-header`
`AlertDialogIcon`	A `span` with `alert-dialog-icon`: empty, the color’s icon; an `Icon` inside takes its place
`AlertDialogTitle`	An `h2` with `alert-dialog-title`, or another heading with `level`, which names the dialog
`AlertDialogDescription`	A `p` with `alert-dialog-description`, which describes the dialog
`AlertDialogFooter`	A `div` with `alert-dialog-footer`
`AlertDialogCancel`	A `button` with `btn btn-outline`, which takes the first focus and closes with `cancel`
`AlertDialogAction`	A `Button`, `primary` unless given another `color`, which closes with `confirm` unless its `onClick` calls `preventDefault()`: for a busy state, set its `loading` and close the dialog when the action ends

Other props are the element’s own, className and ref included. To confirm from your code without this markup, use useDialog().

CSS variables

The surface, padding, radius and backdrop come from the Modal variables.

Variable	Default
`--plf-alert-dialog-width`	`28rem`, capped to the viewport
`--plf-alert-dialog-icon-bg`	`--plf-color-surface-muted`
`--plf-alert-dialog-icon-color`	`--plf-color-text`
`--plf-alert-dialog-icon-size`	`1.25em`