Alert Dialog component

import { AlertDialog } from 'gnome-ui/alert-dialog';
import { Trash2 } from 'lucide-react';

export default function Alert() {
  return (
    <AlertDialog.Root>
      <AlertDialog.Trigger className="inline-flex items-center gap-2 rounded-xl border border-destructive/30 bg-destructive/8 px-4 py-2 text-sm font-medium leading-none text-destructive transition-colors duration-150 hover:bg-destructive/15 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring">
        <Icons.Trash2 className="size-4 shrink-0" />
        Delete file
      </AlertDialog.Trigger>
      <AlertDialog.Portal>
        <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black/40 backdrop-blur-sm transition-all duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 supports-[-webkit-touch-callout:none]:absolute" />
        <AlertDialog.Popup className="fixed top-1/2 left-1/2 w-[400px] max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl border border-border bg-card p-6 shadow-xl outline-none transition-all duration-200 data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0">
          <div className=" flex h-11 w-11 items-center justify-center rounded-full bg-destructive/10 text-destructive mb-4">
            <Icons.Trash2 className="size-5" />
          </div>
          <AlertDialog.Title className="mb-1 text-base font-semibold text-foreground">
            Delete this file?
          </AlertDialog.Title>
          <AlertDialog.Description className="mb-6 text-sm leading-relaxed text-muted-foreground">
            This action cannot be undone. The file will be permanently removed from your system.
          </AlertDialog.Description>
          <div className="flex justify-end gap-2">
            <AlertDialog.Close className="inline-flex h-9 items-center justify-center rounded-xl border border-border bg-card px-4 text-sm font-medium leading-none text-foreground transition-colors duration-150 hover:bg-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring">
              Cancel
            </AlertDialog.Close>
            <AlertDialog.Close className="inline-flex h-9 items-center justify-center gap-1.5 rounded-xl bg-destructive px-4 text-sm font-medium leading-none text-white transition-colors duration-150 hover:bg-destructive/85 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring">
              <Icons.Trash2 className="size-3.5 shrink-0" />
              Delete
            </AlertDialog.Close>
          </div>
        </AlertDialog.Popup>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
}

Anatomy

import { AlertDialog } from 'gnome-ui/alert-dialog';

<AlertDialog.Root>
  <AlertDialog.Trigger />
  <AlertDialog.Portal>
    <AlertDialog.Backdrop />
    <AlertDialog.Viewport>
      <AlertDialog.Popup>
        <AlertDialog.Title />
        <AlertDialog.Description />
        <AlertDialog.Close />
      </AlertDialog.Popup>
    </AlertDialog.Viewport>
  </AlertDialog.Portal>
</AlertDialog.Root>

Examples

Warning / Confirmation

A confirmation dialog with a warning tone, inspired by GNOME's muted destructive action pattern.

Alert Dialog component

import { AlertDialog } from 'gnome-ui/alert-dialog';
import { TriangleAlert, LogOut } from 'lucide-react';

export default function AlertDialogWarning() {
  return (
    <AlertDialog.Root>
      <AlertDialog.Trigger className="inline-flex items-center gap-2 rounded-xl border border-border bg-secondary px-4 py-2 text-sm font-medium leading-none text-foreground transition-colors duration-150 hover:bg-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring">
        <Icons.LogOut className="size-4 shrink-0" />
        Sign out
      </AlertDialog.Trigger>
      <AlertDialog.Portal>
        <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black/40 backdrop-blur-sm transition-all duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 supports-[-webkit-touch-callout:none]:absolute" />
        <AlertDialog.Popup className="fixed top-1/2 left-1/2 w-[380px] max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl border border-border bg-card p-0 shadow-xl outline-none overflow-hidden transition-all duration-200 data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0">
          <div className="flex items-center gap-3 border-b border-border bg-[oklch(0.97_0.02_80)] px-5 py-4 dark:bg-[oklch(0.25_0.02_80)]">
            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[oklch(0.85_0.1_80)] text-[oklch(0.45_0.15_60)] dark:bg-[oklch(0.35_0.08_80)] dark:text-[oklch(0.85_0.1_80)]">
              <Icons.TriangleAlert className="size-4" />
            </div>
            <AlertDialog.Title className="text-sm font-semibold text-foreground">
              Sign out of your account?
            </AlertDialog.Title>
          </div>
          <div className="px-5 py-4">
            <AlertDialog.Description className="text-sm leading-relaxed text-muted-foreground">
              You will be returned to the login screen. Any unsaved changes will be lost.
            </AlertDialog.Description>
          </div>
          <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
            <AlertDialog.Close className="inline-flex h-9 items-center justify-center rounded-xl border border-border bg-card px-4 text-sm font-medium leading-none text-foreground transition-colors duration-150 hover:bg-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring">
              Cancel
            </AlertDialog.Close>
            <AlertDialog.Close className="inline-flex h-9 items-center justify-center gap-1.5 rounded-xl bg-primary px-4 text-sm font-medium leading-none text-primary-foreground transition-colors duration-150 hover:brightness-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring">
              <Icons.LogOut className="size-3.5 shrink-0" />
              Sign out
            </AlertDialog.Close>
          </div>
        </AlertDialog.Popup>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
}

Critical / Destructive

An unambiguous destructive confirmation dialog, inspired by GNOME's critical action pattern with a prominent danger header.

Alert Dialog component

import { AlertDialog } from 'gnome-ui/alert-dialog';
import { HardDriveUpload, CircleAlert } from 'lucide-react';

export default function AlertDialogCritical() {
  return (
    <AlertDialog.Root>
      <AlertDialog.Trigger className="inline-flex items-center gap-2 rounded-xl border border-destructive/30 bg-destructive/8 px-4 py-2 text-sm font-medium leading-none text-destructive transition-colors duration-150 hover:bg-destructive/15 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring">
        <Icons.HardDriveUpload className="size-4 shrink-0" />
        Format disk
      </AlertDialog.Trigger>
      <AlertDialog.Portal>
        <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black/50 backdrop-blur-sm transition-all duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 supports-[-webkit-touch-callout:none]:absolute" />
        <AlertDialog.Popup className="fixed top-1/2 left-1/2 w-[400px] max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl border border-destructive/20 bg-card shadow-2xl outline-none overflow-hidden transition-all duration-200 data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0">
          <div className="border-b border-destructive/20 bg-destructive/8 px-5 py-5 dark:bg-destructive/12">
            <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-destructive/15 text-destructive">
              <Icons.CircleAlert className="size-5" />
            </div>
            <AlertDialog.Title className="text-base font-semibold text-foreground">
              Format disk?
            </AlertDialog.Title>
            <AlertDialog.Description className="mt-1 text-sm leading-relaxed text-muted-foreground">
              All data on this drive will be permanently erased. This action cannot be undone.
            </AlertDialog.Description>
          </div>
          <div className="flex items-start gap-3 border-b border-border px-5 py-4">
            <Icons.CircleAlert className="mt-0.5 size-4 shrink-0 text-destructive" />
            <p className="text-xs leading-relaxed text-muted-foreground">
              Make sure you have backed up any important data before proceeding.
            </p>
          </div>
          <div className="flex justify-end gap-2 px-5 py-3">
            <AlertDialog.Close className="inline-flex h-9 items-center justify-center rounded-xl border border-border bg-card px-4 text-sm font-medium leading-none text-foreground transition-colors duration-150 hover:bg-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring">
              Cancel
            </AlertDialog.Close>
            <AlertDialog.Close className="inline-flex h-9 items-center justify-center gap-1.5 rounded-xl bg-destructive px-4 text-sm font-medium leading-none text-white transition-colors duration-150 hover:bg-destructive/85 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring">
              <Icons.HardDriveUpload className="size-3.5 shrink-0" />
              Format
            </AlertDialog.Close>
          </div>
        </AlertDialog.Popup>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
}

API reference

Root

Groups all parts of the alert dialog. Doesn’t render its own HTML element.

Root Props:

Prop	Type	Default	Description
defaultOpen	`boolean`	`false`	Whether the dialog is initially open.To render a controlled dialog, use the `open` prop instead.
open	`boolean`	-	Whether the dialog is currently open.
onOpenChange	`((open: boolean, eventDetails: AlertDialog.Root.ChangeEventDetails) => void)`	-	Event handler called when the dialog is opened or closed.
actionsRef	`RefObject<AlertDialog.Root.Actions \| null>`	-	A ref to imperative actions.* `unmount`: When specified, the dialog will not be unmounted when closed. Instead, the `unmount` function must be called to unmount the dialog manually. Useful when the dialog's animation is controlled by an external library.
* `close`: Closes the dialog imperatively when called.
defaultTriggerId	`string \| null`	-	ID of the trigger that the dialog is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open dialog.
handle	`AlertDialog.Handle<Payload>`	-	A handle to associate the alert dialog with a trigger. If specified, allows external triggers to control the alert dialog's open state. Can be created with the AlertDialog.createHandle() method.
onOpenChangeComplete	`((open: boolean) => void)`	-	Event handler called after any animations complete when the dialog is opened or closed.
triggerId	`string \| null`	-	ID of the trigger that the dialog is associated with. This is useful in conjunction with the `open` prop to create a controlled dialog. There's no need to specify this prop when the popover is uncontrolled (i.e. when the `open` prop is not set).
children	`ReactNode \| PayloadChildRenderFunction<Payload>`	-	The content of the dialog. This can be a regular React node or a render function that receives the `payload` of the active trigger.

Trigger

A button that opens the alert dialog. Renders a <button> element.

Trigger Props:

Prop	Type	Default	Description
handle	`DialogHandle<Payload>`	-	A handle to associate the trigger with a dialog. Can be created with the AlertDialog.createHandle() method.
nativeButton	`boolean`	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (e.g. `<div>`).
payload	`Payload`	-	A payload to pass to the dialog when it is opened.
id	`string`	-	ID of the trigger. In addition to being forwarded to the rendered element, it is also used to specify the active trigger for the dialogs in controlled mode (with the Dialog.Root `triggerId` prop).
className	`string \| ((state: AlertDialog.Trigger.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component’s state.
style	`CSSProperties \| ((state: AlertDialog.Trigger.State) => CSSProperties \| undefined)`	-	-
render	`ReactElement \| ((props: HTMLProps, state: AlertDialog.Trigger.State) => ReactElement)`	-	Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render.

Trigger Data Attributes:

Attribute	Type	Description
data-popup-open	-	Present when the corresponding dialog is open.
data-disabled	-	Present when the trigger is disabled.

Portal

A portal element that moves the popup to a different part of the DOM. By default, the portal element is appended to <body>. Renders a <div> element.

Portal Props:

Prop	Type	Default	Description
container	`HTMLElement \| ShadowRoot \| RefObject<HTMLElement \| ShadowRoot \| null> \| null`	-	A parent element to render the portal element into.
className	`string \| ((state: AlertDialog.Portal.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component’s state.
style	`CSSProperties \| ((state: AlertDialog.Portal.State) => CSSProperties \| undefined)`	-	-
keepMounted	`boolean`	`false`	Whether to keep the portal mounted in the DOM while the popup is hidden.
render	`ReactElement \| ((props: HTMLProps, state: AlertDialog.Portal.State) => ReactElement)`	-	Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render.

Backdrop

An overlay displayed beneath the popup. Renders a <div> element.

Backdrop Props:

Prop	Type	Default	Description
forceRender	`boolean`	`false`	Whether the backdrop is forced to render even when nested.
className	`string \| ((state: AlertDialog.Backdrop.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component’s state.
style	`CSSProperties \| ((state: AlertDialog.Backdrop.State) => CSSProperties \| undefined)`	-	-
render	`ReactElement \| ((props: HTMLProps, state: AlertDialog.Backdrop.State) => ReactElement)`	-	Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render.

Backdrop Data Attributes:

Attribute	Type	Description
data-open	-	Present when the dialog is open.
data-closed	-	Present when the dialog is closed.
data-starting-style	-	Present when the dialog is animating in.
data-ending-style	-	Present when the dialog is animating out.

Viewport

A positioning container for the dialog popup that can be made scrollable. Renders a <div> element.

Viewport Props:

Prop	Type	Default	Description
className	`string \| ((state: AlertDialog.Viewport.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component’s state.
style	`CSSProperties \| ((state: AlertDialog.Viewport.State) => CSSProperties \| undefined)`	-	-
render	`ReactElement \| ((props: HTMLProps, state: AlertDialog.Viewport.State) => ReactElement)`	-	Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render.

Viewport Data Attributes:

Attribute	Type	Description
data-open	-	Present when the dialog is open.
data-closed	-	Present when the dialog is closed.
data-nested	-	Present when the dialog is nested within another dialog.
data-nested-dialog-open	-	Present when the dialog has other open dialogs nested within it.
data-starting-style	-	Present when the dialog is animating in.
data-ending-style	-	Present when the dialog is animating out.

A container for the alert dialog contents. Renders a <div> element.

Popup Props:

Prop	Type	Default	Description
initialFocus	`boolean \| RefObject<HTMLElement \| null> \| ((openType: InteractionType) => boolean \| void \| HTMLElement \| null)`	-	Determines the element to focus when the dialog is opened.* `false`: Do not move focus.

true: Move focus based on the default behavior (first tabbable element or popup).
RefObject: Move focus to the ref element.
function: Called with the interaction type (mouse, touch, pen, or keyboard). Return an element to focus, true to use the default behavior, or false/undefined to do nothing. | | finalFocus | boolean \| RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => boolean \| void \| HTMLElement \| null) | - | Determines the element to focus when the dialog is closed.* false: Do not move focus.
true: Move focus based on the default behavior (trigger or previously focused element).
RefObject: Move focus to the ref element.
function: Called with the interaction type (mouse, touch, pen, or keyboard). Return an element to focus, true to use the default behavior, or false/undefined to do nothing. | | className | string \| ((state: AlertDialog.Popup.State) => string \| undefined) | - | CSS class applied to the element, or a function that returns a class based on the component’s state. | | style | CSSProperties \| ((state: AlertDialog.Popup.State) => CSSProperties \| undefined) | - | - | | render | ReactElement \| ((props: HTMLProps, state: AlertDialog.Popup.State) => ReactElement) | - | Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render. |

Popup Data Attributes:

Attribute	Type	Description
data-open	-	Present when the dialog is open.
data-closed	-	Present when the dialog is closed.
data-nested	-	Present when the dialog is nested within another dialog.
data-nested-dialog-open	-	Present when the dialog has other open dialogs nested within it.
data-starting-style	-	Present when the dialog is animating in.
data-ending-style	-	Present when the dialog is animating out.

Popup CSS Variables:

Variable	Type	Default	Description
--nested-dialogs	`number`	-	Indicates how many dialogs are nested within.

Title

A heading that labels the dialog. Renders an <h2> element.

Title Props:

Prop	Type	Default	Description
className	`string \| ((state: AlertDialog.Title.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component’s state.
style	`CSSProperties \| ((state: AlertDialog.Title.State) => CSSProperties \| undefined)`	-	-
render	`ReactElement \| ((props: HTMLProps, state: AlertDialog.Title.State) => ReactElement)`	-	Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render.

Description

A paragraph with additional information about the alert dialog. Renders a <p> element.

Description Props:

Prop	Type	Default	Description
className	`string \| ((state: AlertDialog.Description.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component’s state.
style	`CSSProperties \| ((state: AlertDialog.Description.State) => CSSProperties \| undefined)`	-	-
render	`ReactElement \| ((props: HTMLProps, state: AlertDialog.Description.State) => ReactElement)`	-	Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render.

Close

A button that closes the alert dialog. Renders a <button> element.

Close Props:

Prop	Type	Default	Description
nativeButton	`boolean`	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (e.g. `<div>`).
className	`string \| ((state: AlertDialog.Close.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component’s state.
style	`CSSProperties \| ((state: AlertDialog.Close.State) => CSSProperties \| undefined)`	-	-
render	`ReactElement \| ((props: HTMLProps, state: AlertDialog.Close.State) => ReactElement)`	-	Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render.

Close Data Attributes:

Attribute	Type	Description
data-disabled	-	Present when the button is disabled.

Alert Dialog

On this page