AlertDialog

Playground

Đổi brand và theme rồi mở hộp thoại để xem tiêu điểm rơi vào nút Huỷ, không rơi vào nút hành động.

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogTrigger,
  Button,
} from "@nexobox/ui";

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="danger">Ngắt kết nối</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogTitle>Ngắt kết nối Zalo OA?</AlertDialogTitle>
    <AlertDialogDescription>
      Nhân sự sẽ không làm việc trên kênh này cho tới khi kết nối lại.
    </AlertDialogDescription>
    <AlertDialogFooter>
      <AlertDialogCancel asChild>
        <Button variant="secondary">Huỷ</Button>
      </AlertDialogCancel>
      <AlertDialogAction asChild>
        <Button variant="danger">Ngắt kết nối</Button>
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Khi nào sử dụng

Nên dùng

Một hành động không hoàn tác được, hoặc hoàn tác tốn công, mà người dùng phải xác nhận rõ ràng trước khi hệ thống làm: ngắt kết nối kênh, nâng mức quyền, xoá dữ liệu, đặt lại.

Khi nào không dùng

Tránh dùng

Anatomy

Lớp phủ toàn màn hình; panel ở giữa màn hình, bề rộng tối đa bằng layout.dialog; tiêu đề (bắt buộc); mô tả (khuyến nghị, nói rõ hệ quả); chân panel gồm hai nút căn phải: Huỷ trước, hành động sau. Dưới breakpoint small, hai nút xếp dọc và nút hành động nằm trên. Lớp phủ, panel và kiểu chữ giống hệt Dialog; chỉ hành vi khác.

Variants

Không có variant. Tính chất nguy hiểm của hành động được thể hiện ở nút hành động (Button variant="danger"), do người gọi chọn, không phải ở hộp thoại.

States

Bấm ra ngoài không đóng. Đó là điểm khác duy nhất về hành vi đóng so với Dialog.

Bàn phím & trợ năng

API & triển khai

Design tokens

Dùng chung với Dialog: --nf-foundation-layer-overlay, --nf-foundation-layer-dialog, --nf-semantic-text-primary (pha 32% cho lớp phủ), --nf-semantic-surface-raised, --nf-semantic-border-subtle, --nf-component-panel-radius, --nf-component-panel-padding, --nf-component-overlay-shadow, --nf-component-dialog-viewport-margin, --nf-foundation-layout-dialog, --nf-motion-dialog-in, --nf-motion-dialog-out, --nf-motion-overlay-in, --nf-motion-overlay-out, --nf-component-focus-width, --nf-component-focus-color, --nf-component-focus-offset. Kiểu chữ: --nf-foundation-typography-heading3-* cho tiêu đề, --nf-foundation-typography-body-* cho mô tả, --nf-semantic-text-secondary cho màu mô tả. Khoảng cách chân panel: --nf-foundation-space-3.

Do / Don't