Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Alert Component

CSS-only Tailwind CSS alert with info, success, warning, and error variants. Soft style, icon slot, and dismissible pattern. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Lớp học Kiểu Sự miêu tả
alertCăn cứBiểu ngữ tin nhắn theo ngữ cảnh
alert-outlinePhong cáchTô màu trong suốt với đường viền màu
alert-softPhong cáchNền màu bị tắt tiếng
alert-ghostPhong cáchNền tinh tế không có viền
alert-dashedPhong cáchKiểu đường viền nét đứt
alert-pillPhong cáchHình dạng viên thuốc tròn hoàn toàn
alert-roundedPhong cáchLàm tròn vừa phải
alert-horizontalCông cụ sửa đổiBố cục uốn ngang
alert-verticalCông cụ sửa đổiBố cục xếp chồng theo chiều dọc
alert-xsKích cỡCực nhỏ
alert-smKích cỡBé nhỏ
alert-mdKích cỡTrung bình (mặc định)
alert-lgKích cỡLớn
alert-primaryMàu sắcMàu chủ đề chính
alert-secondaryMàu sắcMàu chủ đề phụ
alert-accentMàu sắcMàu chủ đề nhấn mạnh
alert-neutralMàu sắcMàu chủ đề trung tính
alert-infoMàu sắcMàu sắc ngữ nghĩa thông tin
alert-successMàu sắcMàu ngữ nghĩa thành công
alert-warningMàu sắcMàu ngữ nghĩa cảnh báo
alert-errorMàu sắcLỗi ngữ nghĩa màu sắc

Cách sử dụng cơ bản

1
2
3
4
<div role="alert" class="alert">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>Alert:You have 99+ new notifications.</span>
</div>

1
2
3
4
<div role="alert" className="alert">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>Alert:You have 99+ new notifications.</span>
</div>

Màu cảnh báo

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!-- Default -->
<div role="alert" class="alert">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>This is a Default Alert.</span>
</div>
<!-- Primary -->
<div role="alert" class="alert alert-primary">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
    <span>This is a Primary Alert.</span>
</div>
<!-- Secondary -->
 <div role="alert" class="alert alert-secondary">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>This is a Secondary Alert.</span>
</div>
<!-- Accent -->
<div role="alert" class="alert alert-accent">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>This is a Accent Alert.</span>
</div>
<!-- Info -->
<div role="alert" class="alert alert-info">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg>
    <span>This is a Info Alert.</span>
</div>
<!-- Success -->
<div role="alert" class="alert alert-success">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
    <span>This is a Success Alert.</span>
</div>
<!-- Warning -->
<div role="alert" class="alert alert-warning">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
    <span>This is a Warning Alert.</span>
</div>
<!-- Error -->
<div role="alert" class="alert alert-error">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
    <span>This is a Error Alert.</span>
</div>
<!-- Neutral -->
<div role="alert" class="alert alert-neutral">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
    <span>This is a Neutral Alert.</span>
</div>

Hướng cảnh báo

Cảnh báo ngang

html 
1
2
3
4
<div role="alert" class="alert alert-horizontal">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>Horizontal direction alert.</span>
</div>

Cảnh báo dọc

html 
1
2
3
4
<div role="alert" class="alert alert-vertical">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>Vertical direction alert.</span>
</div>

Hình dạng cảnh báo

Cảnh báo thuốc

html 
1
2
3
4
<div role="alert" class="alert alert-primary alert-pill">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>Pill shape alert component.</span>
</div>

Cảnh báo làm tròn

html 
1
2
3
4
<div role="alert" class="alert alert-success alert-rounded">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>Rounded shape alert component.</span>
</div>

Kiểu cảnh báo

Cảnh báo mềm

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div role="alert" class="alert alert-soft">
  <span>You have 99+ new notifications.</span>
</div>
<div role="alert" class="alert alert-primary alert-soft">
  <span>New version of UI update is available.</span>
</div>
<div role="alert" class="alert alert-secondary alert-soft">
  <span>Trial period active: 14 days remaining.</span>
</div>
<div role="alert" class="alert alert-accent alert-soft">
  <span>Your subscription will renew in 3 days.</span>
</div>
<div role="alert" class="alert alert-info alert-soft">
  <span>Note: All components are WCAG compliant.</span>
</div>
<div role="alert" class="alert alert-success alert-soft">
  <span>Success: Frutjam UI installed successfully.</span>
</div>
<div role="alert" class="alert alert-warning alert-soft">
  <span>Warning: Invalid email address. Please Retry.</span>
</div>
<div role="alert" class="alert alert-error alert-soft">
  <span>Error: Your session has expired. Log in again.</span>
</div>
<div role="alert" class="alert alert-neutral alert-soft">
  <span>Profile 80% complete. Add a photo to finish.</span>
</div>

Cảnh báo phác thảo

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div role="alert" class="alert alert-outline">
  <span>You have 99+ new notifications.</span>
</div>
<div role="alert" class="alert alert-primary alert-outline">
  <span>New version of UI update is available.</span>
</div>
<div role="alert" class="alert alert-secondary alert-outline">
  <span>Trial period active: 14 days remaining.</span>
</div>
<div role="alert" class="alert alert-accent alert-outline">
  <span>Your subscription will renew in 3 days.</span>
</div>
<div role="alert" class="alert alert-info alert-outline">
  <span>Note: All components are WCAG compliant.</span>
</div>
<div role="alert" class="alert alert-success alert-outline">
  <span>Success: Frutjam UI installed successfully.</span>
</div>
<div role="alert" class="alert alert-warning alert-outline">
  <span>Warning: Invalid email address. Please Retry.</span>
</div>
<div role="alert" class="alert alert-error alert-outline">
  <span>Error: Your session has expired. Log in again.</span>
</div>
<div role="alert" class="alert alert-neutral alert-outline">
  <span>Profile 80% complete. Add a photo to finish.</span>
</div>

Cảnh báo nét đứt

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div role="alert" class="alert alert-dashed">
  <span>You have 99+ new notifications.</span>
</div>
<div role="alert" class="alert alert-primary alert-dashed">
  <span>New version of UI update is available.</span>
</div>
<div role="alert" class="alert alert-secondary alert-dashed">
  <span>Trial period active: 14 days remaining.</span>
</div>
<div role="alert" class="alert alert-accent alert-dashed">
  <span>Your subscription will renew in 3 days.</span>
</div>
<div role="alert" class="alert alert-info alert-dashed">
  <span>Note: All components are WCAG compliant.</span>
</div>
<div role="alert" class="alert alert-success alert-dashed">
  <span>Success: Frutjam UI installed successfully.</span>
</div>
<div role="alert" class="alert alert-warning alert-dashed">
  <span>Warning: Invalid email address. Please Retry.</span>
</div>
<div role="alert" class="alert alert-error alert-dashed">
  <span>Error: Your session has expired. Log in again.</span>
</div>
<div role="alert" class="alert alert-neutral alert-dashed">
  <span>Profile 80% complete. Add a photo to finish.</span>
</div>

Cảnh báo ma

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div role="alert" class="alert alert-ghost">
  <span>You have 99+ new notifications.</span>
</div>
<div role="alert" class="alert alert-primary alert-ghost">
  <span>New version of UI update is available.</span>
</div>
<div role="alert" class="alert alert-secondary alert-ghost">
  <span>Trial period active: 14 days remaining.</span>
</div>
<div role="alert" class="alert alert-accent alert-ghost">
  <span>Your subscription will renew in 3 days.</span>
</div>
<div role="alert" class="alert alert-info alert-ghost">
  <span>Note: All components are WCAG compliant.</span>
</div>
<div role="alert" class="alert alert-success alert-ghost">
  <span>Success: Frutjam UI installed successfully.</span>
</div>
<div role="alert" class="alert alert-warning alert-ghost">
  <span>Warning: Invalid email address. Please Retry.</span>
</div>
<div role="alert" class="alert alert-error alert-ghost">
  <span>Error: Your session has expired. Log in again.</span>
</div>
<div role="alert" class="alert alert-neutral alert-ghost">
  <span>Profile 80% complete. Add a photo to finish.</span>
</div>

Bố cục & Hành vi Cảnh báo

Cảnh báo toàn chiều rộng

Sử dụng lớp tiện ích w-full để tạo cảnh báo trải rộng trên toàn bộ chiều rộng của vùng chứa nó. Điều này hoạt động với tất cả các biến thể màu sắc và phong cách.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div role="alert" class="alert w-full">
    <span>You have 99+ new notifications.</span>
</div>
<div role="alert" class="alert alert-primary w-full">
    <span>New version of UI update is available.</span>
</div>
<div role="alert" class="alert alert-secondary w-full">
    <span>Trial period active: 14 days remaining.</span>
</div>
<div role="alert" class="alert alert-accent w-full">
    <span>Your subscription will renew in 3 days.</span>
</div>
<div role="alert" class="alert alert-info w-full">
    <span>Note: All components are WCAG compliant.</span>
</div>
<div role="alert" class="alert alert-success w-full">
    <span>Success: Frutjam UI installed successfully.</span>
</div>
<div role="alert" class="alert alert-warning w-full">
    <span>Warning: Invalid email address. Please Retry.</span>
</div>
<div role="alert" class="alert alert-error w-full">
    <span>Error: Your session has expired. Log in again.</span>
</div>
<div role="alert" class="alert alert-neutral w-full">
    <span>Profile 80% complete. Add a photo to finish.</span>
</div>

Xếp chồng cảnh báo đáp ứng

Cảnh báo này xếp chồng theo chiều dọc trên thiết bị di động và mở rộng theo chiều ngang trên máy tính để bàn để sử dụng màn hình tối ưu.

html 
1
2
3
4
5
6
7
8
<div role="alert" class="alert alert-vertical sm:alert-horizontal">
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
  <span>Add a profile photo to reach 100%.</span>
  <div class="space-x-1.5">
    <button class="btn btn-sm">Skip</button>
    <button class="btn btn-sm btn-primary">Upload</button>
  </div>
</div>

Cảnh báo với nội dung phong phú

html 
1
2
3
4
5
6
7
8
<div role="alert" class="alert alert-vertical sm:alert-horizontal w-full">
  <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>
  <div>
    <h3 class="font-bold">New Emails!</h3>
    <div class="text-xs">You have 4 unread emails</div>
  </div>
  <button class="btn btn-sm">View</button>
</div>