Drop-in semantic component. See examples, sizes, variants, and source.
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>