Alert Dialog

Диалог, требующий ответа пользователя для продолжения.

import {
  AlertDialog,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogPopup,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";

export default function Particle() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="destructive-outline" />}>
        Удалить аккаунт
      </AlertDialogTrigger>
      <AlertDialogPopup>
        <AlertDialogHeader>
          <AlertDialogTitle>Вы уверены?</AlertDialogTitle>
          <AlertDialogDescription>
            Это действие нельзя отменить. Аккаунт будет удалён безвозвратно, а
            все ваши данные — стёрты с наших серверов.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogClose render={<Button variant="ghost" />}>
            Отмена
          </AlertDialogClose>
          <AlertDialogClose render={<Button variant="destructive" />}>
            Удалить аккаунт
          </AlertDialogClose>
        </AlertDialogFooter>
      </AlertDialogPopup>
    </AlertDialog>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/alert-dialog

Использование

import {
  AlertDialog,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogPanel,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogPopup,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

<AlertDialog>
  <AlertDialogTrigger>Delete Account</AlertDialogTrigger>
  <AlertDialogPopup>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogPanel>Content</AlertDialogPanel>
    <AlertDialogFooter>
      <AlertDialogClose>Cancel</AlertDialogClose>
      <AlertDialogClose>Delete Account</AlertDialogClose>
    </AlertDialogFooter>
  </AlertDialogPopup>
</AlertDialog>

API

AlertDialog

Корневой компонент. Псевдоним для AlertDialog.Root из Base UI.

AlertDialogTrigger

Кнопка-триггер, открывающая диалог-предупреждение. Псевдоним для AlertDialog.Trigger из Base UI.

AlertDialogPopup

Всплывающий контейнер, отображающий содержимое диалога-предупреждения. Также экспортируется как AlertDialogContent.

Свойство	Тип	По умолчанию	Описание
`bottomStickOnMobile`	`boolean`	`true`	Если включено, прикрепляет диалог к нижнему краю экрана на мобильных устройствах
`portalProps`	`AlertDialog.Portal.Props`	-	Свойства, передаваемые внутреннему порталу (`keepMounted`, `container` и т. д.); см. API портала Alert Dialog в Base UI

AlertDialogHeader

Контейнер для заголовка и описания диалога-предупреждения.

AlertDialogFooter

Нижняя секция для кнопок действий.

Свойство	Тип	По умолчанию	Описание
`variant`	`"default" \| "bare"`	`"default"`	Управляет стилизацией нижней секции. `default` включает рамку и фон, `bare` убирает их

Пример:

// Default variant (with border and background)
<AlertDialogFooter>
  <AlertDialogClose>Cancel</AlertDialogClose>
  <AlertDialogClose>Delete</AlertDialogClose>
</AlertDialogFooter>
 
// Bare variant (no border or background)
<AlertDialogFooter variant="bare">
  <AlertDialogClose>Cancel</AlertDialogClose>
  <AlertDialogClose>Delete</AlertDialogClose>
</AlertDialogFooter>

AlertDialogTitle

Компонент заголовка. Псевдоним для AlertDialog.Title из Base UI.

AlertDialogDescription

Компонент описания. Псевдоним для AlertDialog.Description из Base UI.

AlertDialogClose

Компонент кнопки закрытия. Псевдоним для AlertDialog.Close из Base UI.

AlertDialogPortal

Компонент-портал для рендеринга за пределами иерархии DOM. Псевдоним для AlertDialog.Portal из Base UI.

AlertDialogBackdrop

Компонент подложки/оверлея. Также экспортируется как AlertDialogOverlay. Псевдоним для AlertDialog.Backdrop из Base UI.

AlertDialogViewport

Компонент области просмотра для позиционирования. Псевдоним для AlertDialog.Viewport из Base UI.

Примеры

Диалог-предупреждение с минималистичной нижней секцией

import {
  AlertDialog,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogPopup,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";

export default function Particle() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="destructive-outline" />}>
        Удалить аккаунт
      </AlertDialogTrigger>
      <AlertDialogPopup>
        <AlertDialogHeader>
          <AlertDialogTitle>Вы уверены?</AlertDialogTitle>
          <AlertDialogDescription>
            Это действие нельзя отменить. Аккаунт будет удалён безвозвратно, а
            все ваши данные — стёрты с наших серверов.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter variant="bare">
          <AlertDialogClose render={<Button variant="ghost" />}>
            Отмена
          </AlertDialogClose>
          <AlertDialogClose render={<Button variant="destructive" />}>
            Удалить аккаунт
          </AlertDialogClose>
        </AlertDialogFooter>
      </AlertDialogPopup>
    </AlertDialog>
  );
}

Подтверждение закрытия

"use client";

import { useState } from "react";
import {
  AlertDialog,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogPopup,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPanel,
  DialogPopup,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Field } from "@/components/ui/field";
import { Form } from "@/components/ui/form";
import { Textarea } from "@/components/ui/textarea";

export default function Particle() {
  const [dialogOpen, setDialogOpen] = useState(false);
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [value, setValue] = useState("");

  return (
    <Dialog
      onOpenChange={(o) => {
        if (!o && value) {
          setConfirmOpen(true);
        } else {
          setDialogOpen(o);
        }
      }}
      open={dialogOpen}
    >
      <DialogTrigger render={<Button variant="outline" />}>
        Написать
      </DialogTrigger>
      <DialogPopup showCloseButton={false}>
        <DialogHeader>
          <DialogTitle>Новое сообщение</DialogTitle>
          <DialogDescription>
            Введите текст и попробуйте закрыть окно.
          </DialogDescription>
        </DialogHeader>
        <Form
          className="contents"
          onSubmit={(event) => {
            event.preventDefault();
            // Close the dialog when submitting
            setDialogOpen(false);
          }}
        >
          <DialogPanel>
            <Field>
              <Textarea
                onChange={(e) => setValue(e.target.value)}
                value={value}
              />
            </Field>
          </DialogPanel>
          <DialogFooter>
            <DialogClose render={<Button variant="ghost" />}>
              Отмена
            </DialogClose>
            <Button
              onClick={() => {
                setValue("");
                setDialogOpen(false);
              }}
            >
              Отправить
            </Button>
          </DialogFooter>
        </Form>
      </DialogPopup>

      {/* Confirmation dialog */}
      <AlertDialog onOpenChange={setConfirmOpen} open={confirmOpen}>
        <AlertDialogPopup>
          <AlertDialogHeader>
            <AlertDialogTitle>Отменить изменения?</AlertDialogTitle>
            <AlertDialogDescription>
              Ваше сообщение будет потеряно.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogClose render={<Button variant="ghost" />}>
              Назад
            </AlertDialogClose>
            <Button
              onClick={() => {
                setConfirmOpen(false);
                setValue("");
                setDialogOpen(false);
              }}
            >
              Отменить
            </Button>
          </AlertDialogFooter>
        </AlertDialogPopup>
      </AlertDialog>
    </Dialog>
  );
}

На этой странице

Установка Использование API AlertDialog AlertDialogTrigger AlertDialogPopup AlertDialogHeader AlertDialogFooter AlertDialogTitle AlertDialogDescription AlertDialogClose AlertDialogPortal AlertDialogBackdrop AlertDialogViewport Примеры Диалог-предупреждение с минималистичной нижней секцией Подтверждение закрытия