BlueStack.io - Component Library

Basic Alerts - Flexible Content Structure

Preview Code

Copy

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

Preview Code

Copy

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 tiny icon bell dismissible">
    <div class="content">
      <p>Tiny alert - icon auto-sized to w-3.5 h-3.5</p>
    </div>
  </div>
  <div class="alert small icon zap dismissible">
    <div class="content">
      <p>Small alert - icon auto-sized to w-4 h-4</p>
    </div>
  </div>
  <div class="alert icon star dismissible">
    <div class="content">
      <p>Default alert - icon auto-sized to w-5 h-5</p>
    </div>
  </div>
  <div class="alert large icon shield dismissible">
    <div class="content">
      <h4 class="title">Large alert - icon w-5 h-5</h4>
      <p>Icons scale appropriately with alert size.</p>
    </div>
  </div>
  <div class="alert big icon rocket dismissible">
    <div class="content">
      <h4 class="title">Big alert - icon w-6 h-6</h4>
      <p>Largest alert gets the biggest icon automatically.</p>
    </div>
  </div>
</div>

Alert Width Variants - Compact for Toasts

Preview Code

Copy

Compact Width (Toast Style):

This is a compact alert perfect for toast notifications

Small compact alert

Error toast message

Info notification

<div class="space-y-3">
  <h4 class="text-sm font-semibold mb-2">Compact Width (Toast Style):</h4>
  <div class="alert compact positive icon dismissible">
    <div class="content">
      <p>This is a compact alert perfect for toast notifications</p>
    </div>
  </div>
  <div class="alert compact small warning icon dismissible">
    <div class="content">
      <p>Small compact alert</p>
    </div>
  </div>
  <div class="alert compact negative icon dismissible">
    <div class="content">
      <p>Error toast message</p>
    </div>
  </div>
  <div class="alert compact info icon dismissible">
    <div class="content">
      <p>Info notification</p>
    </div>
  </div>
</div>

Alert Colors - Automatic Icons

Preview Code

Copy

Primary - auto uses 'info' icon

Positive - auto uses 'circle-check' icon

Negative - auto uses 'circle-x' icon

Warning - auto uses 'triangle-alert' icon

Info with custom 'bell' icon override

Red

Orange

Yellow

Olive

Green

Teal

Blue

Violet

Purple

Pink

Brown

Grey

Black

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

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

Preview Code

Copy

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 &lt;i&gt; 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 small positive icon dismissible">Small + Positive + Icon + Dismissible</div>
  <div class="alert large 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>

<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 &lt;i&gt; 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 small positive icon dismissible">Small + Positive + Icon + Dismissible</div><div class="alert large 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

Preview Code

Copy

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>

<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

Preview Code

Copy

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>

<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

Preview Code

Copy

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

<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

Preview Code

Copy

<div class="space-y-4">
  <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 small primary" type="button">Update Now</button>
        <button class="button small ghost" type="button" name="close">Later</button>
      </nav>
    </section>
  </aside>
</div>

Alert Groups (Stacked)

Preview Code

Copy

First notification in the stack

Second notification in the stack

Third notification in the stack

<div class="alerts">
  <div class="alert info small icon dismissible">
    <div class="content">
      <p>First notification in the stack</p>
    </div>
  </div>
  <div class="alert info small icon dismissible">
    <div class="content">
      <p>Second notification in the stack</p>
    </div>
  </div>
  <div class="alert info small icon dismissible">
    <div class="content">
      <p>Third notification in the stack</p>
    </div>
  </div>
</div>

Auto-Dismiss Alerts

Preview Code

Copy

Dismissible Alert with Progress

This alert is dismissible and shows progress. Use the button below to add auto-dismiss timer.

<div class="space-y-4">
  <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>

alert Component

Alert System

Basic Alerts - Flexible Content Structure

Warning Title

Using .content wrapper

Alert Sizes - Icons Auto-Scale

Large alert - icon w-5 h-5

Big alert - icon w-6 h-6

Alert Width Variants - Compact for Toasts

Compact Width (Toast Style):

Alert Colors - Automatic Icons

Automatic Icon Injection - Simplify Your HTML!

Simple Usage - Just add 'icon' and icon name:

With Semantic Types - Icons chosen automatically:

Override Defaults - Specify custom icon:

Mix with Other Features:

Large Outlined Alert

Filled Variant - All Colors

Outline Variant - All Colors

Alerts with Titles - All Colors

Alerts with Actions

Alert Groups (Stacked)

Auto-Dismiss Alerts