CSS: callout

div[class~="instui-callout"] — Cảnh báo thông tin nội tuyến cho một lời nhắc hoặc ghi chú ngắn.

✅ Sử dụng Callout khi:

• Bạn cần làm nổi bật thông tin quan trọng hoặc lời nhắc ngay trong dòng

• Thông điệp tương đối ngắn (một câu đến một đoạn ngắn)

• Cảnh báo nên thu hút chú ý mà không làm gián đoạn luồng chính 🚫 Không sử dụng Callout khi:

• Thông điệp yêu cầu tương tác hoặc nhiều hành động — sử dụng Modal hoặc Alert Dialog

• Nội dung là trọng tâm chính của trang — thay vào đó sử dụng Card hoặc bố cục Hero

Khả năng truy cập

• Đảm bảo role alert được áp dụng đúng (role="alert" hoặc role="status")
• Sử dụng độ tương phản màu sắc ngữ nghĩa đạt tiêu chuẩn WCAG AA
• Đừng chỉ dựa vào màu sắc để truyền đạt ý nghĩa

Sử dụng

@import "@pantoken/plugin-layouts/layouts.css";

Các ví dụ

Các slot

Slot	Mô tả
message	Nội dung thông báo cảnh báo

Phần

Phần	Mô tả
.instui-content	Vùng chứa cho nội dung văn bản.
.instui-icon	Biểu tượng tùy chọn ở bên trái nội dung.

Phần tử giả

Phần tử giả	Mô tả
::before	—

Trạng thái

Trạng thái	Mô tả
:optional	—

Token tiêu thụ

Token	Kiểu	Giá trị
--instui-color-info-background	—	—
--instui-color-info-border	—	—
--instui-color-info-text	—	—
--instui-radius-medium	—	—
--instui-size-small	<length>	—
--instui-space-medium	—	—
--instui-space-small	—	—

Liên quan

• alert