Skip to main content
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.

Kelas Jenis Keterangan
alertBasisSpanduk pesan kontekstual
alert-outlineGayaIsian transparan dengan pinggiran berwarna
alert-softGayaLatar belakang berwarna teredam
alert-ghostGayaLatar belakang halus tanpa batas
alert-dashedGayaGaya perbatasan putus-putus
alert-pillGayaBentuk pil bulat penuh
alert-roundedGayaPembulatan sedang
alert-horizontalPengubahTata letak fleksibel horizontal
alert-verticalPengubahTata letak bertumpuk vertikal
alert-xsUkuranSangat kecil
alert-smUkuranKecil
alert-mdUkuranSedang (standar)
alert-lgUkuranBesar
alert-primaryWarnaWarna tema utama
alert-secondaryWarnaWarna tema sekunder
alert-accentWarnaWarna tema aksen
alert-neutralWarnaWarna tema netral
alert-infoWarnaInfo warna semantik
alert-successWarnaWarna semantik sukses
alert-warningWarnaWarna semantik peringatan
alert-errorWarnaKesalahan warna semantik

Penggunaan Dasar

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>

Warna Peringatan

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>

Arah Peringatan

Peringatan Horisontal

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>

Peringatan Vertikal

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>

Bentuk Peringatan

Peringatan Pil

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>

Peringatan Bulat

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>

Gaya Peringatan

Peringatan Lembut

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>

Peringatan Garis Besar

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>

Peringatan putus-putus

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>

Peringatan Hantu

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>

Tata Letak & Perilaku Peringatan

Peringatan Lebar Penuh

Gunakan kelas utilitas w-full untuk membuat peringatan menjangkau seluruh lebar penampungnya. Ini berfungsi dengan semua varian warna dan gaya.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

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>

Penumpukan Peringatan Responsif

Peringatan ini ditumpuk secara vertikal di perangkat seluler dan diperluas secara horizontal di desktop untuk penggunaan layar yang optimal.

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>

Peringatan dengan Konten Kaya

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>