Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

<AlertDialog.root id="alert-dialog-primitive">
  <AlertDialog.trigger
    id="alert-dialog-trigger"
    class="DemoButton violet"
  >
    Delete account
  </AlertDialog.trigger>
  <AlertDialog.portal id="alert-dialog-portal">
    <AlertDialog.overlay class="DemoAlertDialogOverlay" />
    <AlertDialog.content
      id="alert-dialog-content"
      class="DemoAlertDialogContent"
    >
      <AlertDialog.title class="DemoAlertDialogTitle">Are you absolutely sure?</AlertDialog.title>
      <AlertDialog.description class="DemoAlertDialogDescription">
        This action cannot be undone. This will permanently delete your account and remove your data from our servers.
      </AlertDialog.description>
      <div style="display: flex; gap: 25px; justify-content: flex-end;">
        <AlertDialog.cancel class="DemoButton mauve">Cancel</AlertDialog.cancel>
        <AlertDialog.action class="DemoButton red">Yes, delete account</AlertDialog.action>
      </div>
    </AlertDialog.content>
  </AlertDialog.portal>
</AlertDialog.root>

/* reset */
button {
	all: unset;
}

.DemoAlertDialogOverlay {
	background-color: var(--black-a9);
	position: fixed;
	inset: 0;
	animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.DemoAlertDialogContent {
	background-color: var(--gray-1);
	border-radius: 6px;
	box-shadow: var(--shadow-6);
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90vw;
	max-width: 500px;
	max-height: 85vh;
	padding: 25px;
	animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.DemoAlertDialogContent:focus {
	outline: none;
}

.DemoAlertDialogTitle {
	margin: 0;
	color: var(--mauve-12);
	font-size: 17px;
	font-weight: 500;
}

.DemoAlertDialogDescription {
	margin-bottom: 20px;
	color: var(--mauve-11);
	font-size: 15px;
	line-height: 1.5;
}

.DemoButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	padding: 0 15px;
	font-size: 15px;
	line-height: 1;
	font-weight: 500;
	height: 35px;
	user-select: none;
}
.DemoButton:focus:not(:focus-visible) {
	outline: 0;
}
.DemoButton:focus-visible {
	outline: 2px solid var(--violet-6);
	outline-offset: 1px;
}
.DemoButton.violet {
	background-color: var(--violet-4);
	color: var(--violet-12);
	outline-color: var(--violet-6);
}
.DemoButton.violet:hover {
	background-color: var(--mauve-3);
}
.DemoButton.red {
	background-color: var(--red-4);
	color: var(--red-11);
	outline-color: var(--red-7);
}
.DemoButton.red:hover {
	background-color: var(--red-5);
}
.DemoButton.mauve {
	background-color: var(--mauve-4);
	color: var(--mauve-11);
	outline-color: var(--mauve-7);
}
.DemoButton.mauve:hover {
	background-color: var(--mauve-5);
}

@keyframes overlayShow {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes contentShow {
	from {
		opacity: 0;
		transform: translate(-50%, -48%) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

Anatomy

Import all parts and piece them together.

<AlertDialog.root>
  <AlertDialog.trigger />
  <AlertDialog.portal>
    <AlertDialog.overlay />
    <AlertDialog.content>
      <AlertDialog.title />
      <AlertDialog.description />
      <AlertDialog.cancel />
      <AlertDialog.action />
    </AlertDialog.content>
  </AlertDialog.portal>
</AlertDialog.root>

API Reference

Root

Contains all the parts of an alert dialog.

Trigger

A button that opens the dialog.

Portal

When used, portals your overlay and content parts into the target (default body).

Overlay

A layer that covers the inert portion of the view when the dialog is open.

Content

Contains content to be rendered when the dialog is open.

Title

An accessible name to be announced when the dialog is opened. Alternatively, provide aria-label or aria-labelledby on AlertDialog.content and omit this part.

Description

An accessible description to be announced when the dialog is opened. Alternatively, provide aria-describedby on AlertDialog.content and omit this part.

Cancel

A button that closes the dialog. Distinguish this visually from AlertDialog.action buttons.

Action

A button that closes the dialog after confirming the action. Distinguish this visually from AlertDialog.cancel.

Examples

Close after asynchronous form submission

Use controlled open and on_open_change to close the alert dialog after an async LiveView event completes.

<AlertDialog.root id="async-alert" open={@open} on_open_change="alert_open_change">
  <AlertDialog.trigger id="async-alert-trigger" class="DemoButton violet">
    Delete account
  </AlertDialog.trigger>
  <AlertDialog.portal id="async-alert-portal">
    <AlertDialog.overlay class="DemoAlertDialogOverlay" />
    <AlertDialog.content id="async-alert-content" class="DemoAlertDialogContent">
      <AlertDialog.title class="DemoAlertDialogTitle">Delete account</AlertDialog.title>
      <AlertDialog.description class="DemoAlertDialogDescription">
        This action cannot be undone.
      </AlertDialog.description>
      <form phx-submit="delete_account">
        …
        <div style="display: flex; gap: 25px; justify-content: flex-end;">
          <AlertDialog.cancel class="DemoButton mauve">Cancel</AlertDialog.cancel>
          <button type="submit" class="DemoButton red">Yes, delete account</button>
        </div>
      </form>
    </AlertDialog.content>
  </AlertDialog.portal>
</AlertDialog.root>

def handle_event("alert_open_change", %{"open" => open}, socket) do
  {:noreply, assign(socket, :open, open)}
end

def handle_event("delete_account", _params, socket) do
  # Perform async work, then close the dialog
  {:noreply, assign(socket, :open, false)}
end

Custom portal target

Portal into a specific container via target:

<AlertDialog.portal id="alert-dialog-portal" target="#app-portal-root">
  <AlertDialog.overlay class="DemoAlertDialogOverlay" />
  <AlertDialog.content id="alert-dialog-content" class="DemoAlertDialogContent">
    …
  </AlertDialog.content>
</AlertDialog.portal>

Accessibility

Adheres to the Alert and Message Dialogs WAI-ARIA design pattern.