Alert Component

A flexible, zero-JavaScript alert component built with semantic HTML and Tailwind CSS. Communicate success, error, warning, and informational messages with optional icons and soft variants. Supports dismissible patterns and full theme-aware styling for modern, accessible user notifications.

Basic Usage

html

Alert:You have 99+ new notifications.

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

Alert Colors

html

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.

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

html

Horizontal direction alert.

<div role="alert" class="alert alert-x">
    <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

html

Vertical direction alert.

<div role="alert" class="alert alert-y">
    <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

html

Pill shape alert component.

<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

html

Rounded shape alert component.

<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

html

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.

<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

html

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.

<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

html

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.

<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

html

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.

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

html

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.

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

html

Add a profile photo to reach 100%.

<div role="alert" class="alert alert-y sm:alert-x">
  <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

html

New Emails!

You have 4 unread emails

<div role="alert" class="alert alert-y sm:alert-x 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>