Drop-in semantic component. See examples, sizes, variants, and source.
Inline status messages. Apply intent
(primary, positive,
negative, warning,
info) and an optional variant
(filled, outline)
to alert. Add icon
plus an icon name to auto-inject the leading icon, and
dismissible for a close button.
Auto-dismiss, progress bars, and toast stacking are wired
up by alert.js.
Alert System
Basic Alerts - Flexible Content Structure
Simple alert with direct text - no wrapper needed!
Alert with a paragraph element for better semantic HTML.
Warning Title
Description text can follow the title directly - no .content wrapper required.
Using .content wrapper
The .content wrapper is optional but still fully supported for complex layouts.
<div class="space-y-3">
<div class="alert icon info dismissible">
Simple alert with direct text - no wrapper needed!
</div>
<div class="alert positive icon">
<p>Alert with a paragraph element for better semantic HTML.</p>
</div>
<div class="alert warning icon dismissible">
<h4 class="title">Warning Title</h4>
<p>Description text can follow the title directly - no .content wrapper required.</p>
</div>
<div class="alert negative icon">
<div class="content">
<h4 class="title">Using .content wrapper</h4>
<p>The .content wrapper is optional but still fully supported for complex layouts.</p>
</div>
</div>
</div>
Alert Sizes - Icons Auto-Scale
Tiny alert - icon auto-sized to w-3.5 h-3.5
Small alert - icon auto-sized to w-4 h-4
Default alert - icon auto-sized to w-5 h-5
Large alert - icon w-5 h-5
Icons scale appropriately with alert size.
Big alert - icon w-6 h-6
Largest alert gets the biggest icon automatically.
<div class="space-y-3">
<div class="alert primary icon dismissible">
<div class="content">
<p>Primary - auto uses 'info' icon</p>
</div>
</div>
<div class="alert positive icon dismissible">
<div class="content">
<p>Positive - auto uses 'circle-check' icon</p>
</div>
</div>
<div class="alert negative icon dismissible">
<div class="content">
<p>Negative - auto uses 'circle-x' icon</p>
</div>
</div>
<div class="alert warning icon dismissible">
<div class="content">
<p>Warning - auto uses 'triangle-alert' icon</p>
</div>
</div>
<div class="alert info icon bell dismissible">
<div class="content">
<p>Info with custom 'bell' icon override</p>
</div>
</div>
<div class="alert red icon circle dismissible"><div class="content"><p>Red</p></div></div>
<div class="alert orange icon circle dismissible"><div class="content"><p>Orange</p></div></div>
<div class="alert yellow icon circle dismissible"><div class="content"><p>Yellow</p></div></div>
<div class="alert olive icon circle dismissible"><div class="content"><p>Olive</p></div></div>
<div class="alert green icon circle dismissible"><div class="content"><p>Green</p></div></div>
<div class="alert teal icon circle dismissible"><div class="content"><p>Teal</p></div></div>
<div class="alert blue icon circle dismissible"><div class="content"><p>Blue</p></div></div>
<div class="alert violet icon circle dismissible"><div class="content"><p>Violet</p></div></div>
<div class="alert purple icon circle dismissible"><div class="content"><p>Purple</p></div></div>
<div class="alert pink icon circle dismissible"><div class="content"><p>Pink</p></div></div>
<div class="alert brown icon circle dismissible"><div class="content"><p>Brown</p></div></div>
<div class="alert grey icon circle dismissible"><div class="content"><p>Grey</p></div></div>
<div class="alert black icon circle dismissible"><div class="content"><p>Black</p></div></div>
</div>
Automatic Icon Injection - Simplify Your HTML!
Simple Usage - Just add 'icon' and icon name:
Alert with bell icon - no manual <i> tag needed!
Alert with rocket icon
Alert with heart icon
With Semantic Types - Icons chosen automatically:
Just add 'icon' - uses circle-check automatically
Negative alert - uses circle-x automatically
Warning alert - uses triangle-alert automatically
Override Defaults - Specify custom icon:
Positive with party-popper instead of check
Negative with ban icon instead of x
Warning with siren instead of triangle
Mix with Other Features:
Small + Positive + Icon + Dismissible
Large Outlined Alert
With custom shield-check icon and structured content.
<div class="space-y-3">
<h4 class="text-sm font-semibold mb-2">Simple Usage - Just add 'icon' and icon name:</h4>
<div class="alert icon bell">Alert with bell icon - no manual <i> tag needed!</div>
<div class="alert icon rocket">Alert with rocket icon</div>
<div class="alert icon heart">Alert with heart icon</div>
<h4 class="text-sm font-semibold mb-2 mt-4">With Semantic Types - Icons chosen automatically:</h4>
<div class="alert positive icon">Just add 'icon' - uses circle-check automatically</div>
<div class="alert negative icon">Negative alert - uses circle-x automatically</div>
<div class="alert warning icon">Warning alert - uses triangle-alert automatically</div>
<h4 class="text-sm font-semibold mb-2 mt-4">Override Defaults - Specify custom icon:</h4>
<div class="alert positive icon party-popper">Positive with party-popper instead of check</div>
<div class="alert negative icon ban">Negative with ban icon instead of x</div>
<div class="alert warning icon siren">Warning with siren instead of triangle</div>
<h4 class="text-sm font-semibold mb-2 mt-4">Mix with Other Features:</h4>
<div class="alert sm positive icon dismissible">Small + Positive + Icon + Dismissible</div>
<div class="alert xl outline icon shield-check dismissible">
<div class="content">
<h4 class="title">Large Outlined Alert</h4>
<p>With custom shield-check icon and structured content.</p>
</div>
</div>
</div>
Filled Variant - All Colors
Primary filled alert with solid background
Positive filled alert with solid background
Negative filled alert with solid background
Warning filled alert with solid background
Info filled alert with solid background
Red filled
Orange filled
Yellow filled
Olive filled
Green filled
Teal filled
Blue filled
Violet filled
Purple filled
Pink filled
Brown filled
Grey filled
Black filled
<div class="space-y-3">
<div class="alert filled primary icon dismissible">
<div class="content">
<p>Primary filled alert with solid background</p>
</div>
</div>
<div class="alert filled positive icon dismissible">
<div class="content">
<p>Positive filled alert with solid background</p>
</div>
</div>
<div class="alert filled negative icon dismissible">
<div class="content">
<p>Negative filled alert with solid background</p>
</div>
</div>
<div class="alert filled warning icon dismissible">
<div class="content">
<p>Warning filled alert with solid background</p>
</div>
</div>
<div class="alert filled info icon dismissible">
<div class="content">
<p>Info filled alert with solid background</p>
</div>
</div>
<div class="alert filled red icon circle dismissible"><div class="content"><p>Red filled</p></div></div>
<div class="alert filled orange icon circle dismissible"><div class="content"><p>Orange filled</p></div></div>
<div class="alert filled yellow icon circle dismissible"><div class="content"><p>Yellow filled</p></div></div>
<div class="alert filled olive icon circle dismissible"><div class="content"><p>Olive filled</p></div></div>
<div class="alert filled green icon circle dismissible"><div class="content"><p>Green filled</p></div></div>
<div class="alert filled teal icon circle dismissible"><div class="content"><p>Teal filled</p></div></div>
<div class="alert filled blue icon circle dismissible"><div class="content"><p>Blue filled</p></div></div>
<div class="alert filled violet icon circle dismissible"><div class="content"><p>Violet filled</p></div></div>
<div class="alert filled purple icon circle dismissible"><div class="content"><p>Purple filled</p></div></div>
<div class="alert filled pink icon circle dismissible"><div class="content"><p>Pink filled</p></div></div>
<div class="alert filled brown icon circle dismissible"><div class="content"><p>Brown filled</p></div></div>
<div class="alert filled grey icon circle dismissible"><div class="content"><p>Grey filled</p></div></div>
<div class="alert filled black icon circle dismissible"><div class="content"><p>Black filled</p></div></div>
</div>
Outline Variant - All Colors
Primary outline alert
Positive outline alert
Negative outline alert
Warning outline alert
Info outline alert
Red outline
Orange outline
Yellow outline
Olive outline
Green outline
Teal outline
Blue outline
Violet outline
Purple outline
Pink outline
Brown outline
Grey outline
Black outline
<div class="space-y-3">
<div class="alert outline primary icon dismissible">
<div class="content">
<p>Primary outline alert</p>
</div>
</div>
<div class="alert outline positive icon dismissible">
<div class="content">
<p>Positive outline alert</p>
</div>
</div>
<div class="alert outline negative icon dismissible">
<div class="content">
<p>Negative outline alert</p>
</div>
</div>
<div class="alert outline warning icon dismissible">
<div class="content">
<p>Warning outline alert</p>
</div>
</div>
<div class="alert outline info icon dismissible">
<div class="content">
<p>Info outline alert</p>
</div>
</div>
<div class="alert outline red icon circle dismissible"><div class="content"><p>Red outline</p></div></div>
<div class="alert outline orange icon circle dismissible"><div class="content"><p>Orange outline</p></div></div>
<div class="alert outline yellow icon circle dismissible"><div class="content"><p>Yellow outline</p></div></div>
<div class="alert outline olive icon circle dismissible"><div class="content"><p>Olive outline</p></div></div>
<div class="alert outline green icon circle dismissible"><div class="content"><p>Green outline</p></div></div>
<div class="alert outline teal icon circle dismissible"><div class="content"><p>Teal outline</p></div></div>
<div class="alert outline blue icon circle dismissible"><div class="content"><p>Blue outline</p></div></div>
<div class="alert outline violet icon circle dismissible"><div class="content"><p>Violet outline</p></div></div>
<div class="alert outline purple icon circle dismissible"><div class="content"><p>Purple outline</p></div></div>
<div class="alert outline pink icon circle dismissible"><div class="content"><p>Pink outline</p></div></div>
<div class="alert outline brown icon circle dismissible"><div class="content"><p>Brown outline</p></div></div>
<div class="alert outline grey icon circle dismissible"><div class="content"><p>Grey outline</p></div></div>
<div class="alert outline black icon circle dismissible"><div class="content"><p>Black outline</p></div></div>
</div>
Alerts with Titles - All Colors
<div class="space-y-3">
<aside class="alert primary icon" role="status" aria-live="polite" aria-labelledby="primary-title">
<section class="content">
<h4 id="primary-title" class="title">Primary Information</h4>
<p>This is important information that requires your attention.</p>
</section>
</aside>
<aside class="alert positive icon" role="status" aria-live="polite" aria-labelledby="success-title">
<section class="content">
<h4 id="success-title" class="title">Success!</h4>
<p>Your profile has been updated. All changes are now live.</p>
</section>
</aside>
<aside class="alert negative icon" role="alert" aria-live="assertive" aria-labelledby="error-title">
<section class="content">
<h4 id="error-title" class="title">Error Occurred</h4>
<p>Failed to connect to the server. Please check your internet connection.</p>
</section>
</aside>
<aside class="alert warning icon" role="alert" aria-live="assertive" aria-labelledby="warning-title">
<section class="content">
<h4 id="warning-title" class="title">Warning</h4>
<p>Your subscription will expire in 7 days. Please renew to continue using all features.</p>
</section>
</aside>
<aside class="alert info icon" role="status" aria-live="polite" aria-labelledby="info-title">
<section class="content">
<h4 id="info-title" class="title">Information</h4>
<p>You have 3 new messages in your inbox. Click here to view them.</p>
</section>
</aside>
<aside class="alert red icon circle"><section class="content"><h4 class="title">Red Alert</h4><p>This is a red alert with a title and description.</p></section></aside>
<aside class="alert orange icon circle"><section class="content"><h4 class="title">Orange Alert</h4><p>This is an orange alert with a title and description.</p></section></aside>
<aside class="alert yellow icon circle"><section class="content"><h4 class="title">Yellow Alert</h4><p>This is a yellow alert with a title and description.</p></section></aside>
<aside class="alert olive icon circle"><section class="content"><h4 class="title">Olive Alert</h4><p>This is an olive alert with a title and description.</p></section></aside>
<aside class="alert green icon circle"><section class="content"><h4 class="title">Green Alert</h4><p>This is a green alert with a title and description.</p></section></aside>
<aside class="alert teal icon circle"><section class="content"><h4 class="title">Teal Alert</h4><p>This is a teal alert with a title and description.</p></section></aside>
<aside class="alert blue icon circle"><section class="content"><h4 class="title">Blue Alert</h4><p>This is a blue alert with a title and description.</p></section></aside>
<aside class="alert violet icon circle"><section class="content"><h4 class="title">Violet Alert</h4><p>This is a violet alert with a title and description.</p></section></aside>
<aside class="alert purple icon circle"><section class="content"><h4 class="title">Purple Alert</h4><p>This is a purple alert with a title and description.</p></section></aside>
<aside class="alert pink icon circle"><section class="content"><h4 class="title">Pink Alert</h4><p>This is a pink alert with a title and description.</p></section></aside>
<aside class="alert brown icon circle"><section class="content"><h4 class="title">Brown Alert</h4><p>This is a brown alert with a title and description.</p></section></aside>
<aside class="alert grey icon circle"><section class="content"><h4 class="title">Grey Alert</h4><p>This is a grey alert with a title and description.</p></section></aside>
<aside class="alert black icon circle"><section class="content"><h4 class="title">Black Alert</h4><p>This is a black alert with a title and description.</p></section></aside>
</div>
Alerts with Actions
<div class="stack">
<aside class="alert info icon dismissible" role="status" aria-live="polite" aria-labelledby="update-title">
<section class="content">
<h4 id="update-title" class="title">New Update Available</h4>
<p>A new version of the application is available. Would you like to update now?</p>
<nav class="actions" aria-label="Update actions">
<button class="button sm primary" type="button">Update Now</button>
<button class="button sm ghost" type="button" name="close">Later</button>
</nav>
</section>
</aside>
</div>
Alert Groups (Stacked)
First notification in the stack
Second notification in the stack
Third notification in the stack
<div class="alerts">
<div class="alert info sm icon dismissible">
<div class="content">
<p>First notification in the stack</p>
</div>
</div>
<div class="alert info sm icon dismissible">
<div class="content">
<p>Second notification in the stack</p>
</div>
</div>
<div class="alert info sm icon dismissible">
<div class="content">
<p>Third notification in the stack</p>
</div>
</div>
</div>
Auto-Dismiss Alerts
Dismissible Alert with Progress
This alert is dismissible and shows progress. Use the button below to add auto-dismiss timer.
<div class="stack">
<div id="liveAutoDemo" class="alert info icon dismissible progress">
<div class="content">
<div class="title">Dismissible Alert with Progress</div>
<p>This alert is dismissible and shows progress. Use the button below to add auto-dismiss timer.</p>
</div>
</div>
</div>
Class API Reference
Type
Class
Usage
Notes
Base
alert
Required base class
Always required
content
Optional inner wrapper for title + paragraphs
Direct text/p children also work
title
Heading inside alert
Use on h4
actions
Trailing action area for buttons / links
Inside alert content
alerts
Group container — connected stack by default
Add separated for gapped layout
Sizes
xs
Tiny — 12px font, 14px icon
Modifier on alert
sm
Small — 13px font, 16px icon
Modifier on alert
(default)
Medium — 14px font, 20px icon
No size class needed
xl
Large — 15px font, 24px icon
Modifier on alert
lg
Big — 16px font, 28px icon
Modifier on alert
Intents
primary
Brand blue — auto-icon: info
Modifier on alert
positive
Green — auto-icon: circle-check
Modifier on alert
negative
Red — auto-icon: circle-x
Modifier on alert
warning
Amber — auto-icon: triangle-alert
Modifier on alert
info
Blue informational — auto-icon: info
Modifier on alert
Variants
(default)
Light tinted background with same-hue border
No variant class needed
filled
Solid intent-color background with white text
Modifier on alert (alias: solid)
outline
Transparent background, intent-color border
Modifier on alert
Layout
compact
Caps width at 320px — toast-style
Modifier on alert
separated
Gap between alerts in a stack
Modifier on alerts
States & Behaviour
icon [name]
Auto-inject leading icon — e.g. icon bell
Mounted by alert.js
dismissible
Adds top-right close button
Modifier on alert
progress
Animated progress bar across the bottom
Pair with auto-dismiss="N"
auto-dismiss="N"
Auto-close after N seconds
HTML attribute, not a class
Toast
#stack-toasts
Fixed-position container — alerts inside become toasts