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.
| Class | Type | Description |
|---|---|---|
| alert | Base | Contextual message banner |
| alert-outline | Style | Transparent fill with a colored border |
| alert-soft | Style | Muted tinted background |
| alert-ghost | Style | Subtle background with no border |
| alert-dashed | Style | Dashed border style |
| alert-pill | Style | Fully rounded pill shape |
| alert-rounded | Style | Moderate rounding |
| alert-horizontal | Modifier | Horizontal flex layout |
| alert-vertical | Modifier | Vertical stacked layout |
| alert-xs | Size | Extra small |
| alert-sm | Size | Small |
| alert-md | Size | Medium (default) |
| alert-lg | Size | Large |
| alert-primary | Color | Primary theme color |
| alert-secondary | Color | Secondary theme color |
| alert-accent | Color | Accent theme color |
| alert-neutral | Color | Neutral theme color |
| alert-info | Color | Info semantic color |
| alert-success | Color | Success semantic color |
| alert-warning | Color | Warning semantic color |
| alert-error | Color | Error semantic color |
Basic Usage
Alert:You have 99+ new notifications.
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> |
Alert Colors
This is a Default Alert.
This is a Primary Alert.
This is a Secondary Alert.
This is a Accent Alert.
This is a Info Alert.
This is a Success Alert.
This is a Warning Alert.
This is a Error Alert.
This is a Neutral Alert.
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> |
Alert Direction
Horizontal Alert
Horizontal direction alert.
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> |
Vertical Alert
Vertical direction alert.
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> |
Alert Shapes
Pill Alert
Pill shape alert component.
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> |
Rounded Alert
Rounded shape alert component.
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> |
Alert Styles
Soft Alerts
You have 99+ new notifications.
New version of UI update is available.
Trial period active: 14 days remaining.
Your subscription will renew in 3 days.
Note: All components are WCAG compliant.
Success: Frutjam UI installed successfully.
Warning: Invalid email address. Please Retry.
Error: Your session has expired. Log in again.
Profile 80% complete. Add a photo to finish.
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> |
Outline Alerts
You have 99+ new notifications.
New version of UI update is available.
Trial period active: 14 days remaining.
Your subscription will renew in 3 days.
Note: All components are WCAG compliant.
Success: Frutjam UI installed successfully.
Warning: Invalid email address. Please Retry.
Error: Your session has expired. Log in again.
Profile 80% complete. Add a photo to finish.
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> |
Dashed Alerts
You have 99+ new notifications.
New version of UI update is available.
Trial period active: 14 days remaining.
Your subscription will renew in 3 days.
Note: All components are WCAG compliant.
Success: Frutjam UI installed successfully.
Warning: Invalid email address. Please Retry.
Error: Your session has expired. Log in again.
Profile 80% complete. Add a photo to finish.
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> |
Ghost Alerts
You have 99+ new notifications.
New version of UI update is available.
Trial period active: 14 days remaining.
Your subscription will renew in 3 days.
Note: All components are WCAG compliant.
Success: Frutjam UI installed successfully.
Warning: Invalid email address. Please Retry.
Error: Your session has expired. Log in again.
Profile 80% complete. Add a photo to finish.
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> |
Alert Layout & Behavior
Full Width Alerts
Use the w-full utility class to make an alert span the entire width of its container. This works with all color and style variants.
CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.
You have 99+ new notifications.
New version of UI update is available.
Trial period active: 14 days remaining.
Your subscription will renew in 3 days.
Note: All components are WCAG compliant.
Success: Frutjam UI installed successfully.
Warning: Invalid email address. Please Retry.
Error: Your session has expired. Log in again.
Profile 80% complete. Add a photo to finish.
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> |
Responsive Alert Stacking
This alert stacks vertically on mobile and expands horizontally on desktop for optimal screen usage.
Add a profile photo to reach 100%.
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> |
Alert with Rich Content
New Emails!
You have 4 unread emails
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> |
Using Claude Code, Cursor, or another AI editor?
Cherry MCP gives your AI editor the exact Alert class names and structure on demand. No more hallucinated classes.