Alert

Playground

Đổi brand, theme, kind, icon, tiêu đề, hành động và nội dung để xem cùng một Alert thích ứng.

import { Alert, AlertIcon, AlertContent, AlertTitle } from "@nexobox/ui";

<Alert kind="information">
  <AlertIcon icon={InformationCircleIcon} />
  <AlertContent>
    <AlertTitle>Đang thử nghiệm</AlertTitle>
    Bản ghi sẽ được đồng bộ lại trong lần đăng nhập kế tiếp.
  </AlertContent>
</Alert>

Khi nào sử dụng

Nên dùng

Một thông báo gắn với nội dung đang hiển thị: kết quả một hành động vẫn còn hiệu lực trên trang, điều kiện hiện tại của khối nội dung đang đọc, hoặc một ghi chú đứng cạnh nội dung để người đọc không bỏ lỡ khi cuộn qua khu vực đó.

Khi nào không dùng

Tránh dùng

Một thông báo thoáng qua, tự biến mất, neo ở một vùng cố định của màn hình — đó là Toaster, không phải Alert. Alert ở lại cho tới khi nội dung sinh ra nó đổi; Toaster hết hạn theo duration hoặc bị đóng, và không chiếm chỗ trong luồng nội dung. Một lỗi gắn với một trường form cụ thể — đặt cạnh trường đó. Một câu hỏi cần câu trả lời — dùng Dialog.

Anatomy

Không có nút đóng. Alert ở lại cho tới khi nội dung sinh ra nó đổi — đó là định nghĩa của nó; một nút đóng sẽ cho nó một cách biến mất thứ hai. Alert không nhấn được ở cấp vỏ — nếu nội dung chứa một Button, nút đó tự mang trạng thái của nó.

Variants

Mặc định là information. Không có size prop — một kích thước duy nhất cho cả năm kind.

States

Alert không nhận tương tác ở cấp vỏ: không hover, không focus-visible, không disabled riêng. Trạng thái thực sự khác nhau là tổ hợp phần hiện diện, mỗi tổ hợp render thật bên dưới.

Empty, loading, error: không có. Alert không bất đồng bộ — nó render hoặc không render.

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

API & triển khai

Design tokens

Alert đọc thẳng năm nhóm semantic: --nf-semantic-status-neutral/success/warning/danger/information-background, -border, -foreground, -icon. Đệm đọc --nf-component-alert-padding (space.4, 16px). Bo góc đọc --nf-component-alert-radius (12px). Icon cách cột chữ bằng --nf-component-alert-gap (12px). Trong cột, tiêu đề, câu chữ và Button cách nhau bằng --nf-component-alert-content-gap (8px). Icon dùng --nf-component-icon-size, 20px, căn giữa một ô cao bằng dòng body.

Do / Don't