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">
<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