Tailwind CSS Alert

Class Name	Type	Description
alert	Component	Container element
alert-neutral	Modifier	Alert with ’neutral’ color
alert-primary	Modifier	Alert with ‘primary’ color
alert-secondary	Modifier	Alert with ‘secondary’ color
alert-info	Modifier	Alert with ‘info’ color
alert-success	Modifier	Alert with ‘success’ color
alert-warning	Modifier	Alert with ‘warning’ color
alert-error	Modifier	Alert with ’error’ color
alert-soft	Modifier	Soft color alert with border
alert-outline	Modifier	Alert with border

Variants

Solid alerts

The standard format of solid-colored avatars, accompanied by the component class alert and modifier class
alert-{semantic-color}.

<div class="alert" role="alert">
  A quick alert conveying key information or prompting action within a system.
</div>
<div class="alert alert-primary" role="alert">Welcome to our platform! Explore our latest features and updates.</div>
<div class="alert alert-info" role="alert">Stay tuned for our upcoming events and announcements.</div>
<div class="alert alert-success" role="alert">Your transaction was successful. Thank you for choosing our service!</div>
<div class="alert alert-warning" role="alert">
  Attention! Your account security may be at risk. Enable two-factor authentication now.
</div>
<div class="alert alert-error" role="alert">Oops! It seems there was an unexpected error. Please try again later.</div>

Soft alerts

The standard format of soft-colored avatars, accompanied by the component class alert , alert-soft and modifier class alert-{semantic-color}.

<div class="alert alert-soft" role="alert">
  A quick alert conveying key information or prompting action within a system.
</div>
<div class="alert alert-soft alert-primary" role="alert">
  Welcome to our platform! Explore our latest features and updates.
</div>
<div class="alert alert-soft alert-info" role="alert">Stay tuned for our upcoming events and announcements.</div>
<div class="alert alert-soft alert-success" role="alert">
  Your transaction was successful. Thank you for choosing our service!
</div>
<div class="alert alert-soft alert-warning" role="alert">
  Attention! Your account security may be at risk. Enable two-factor authentication now.
</div>
<div class="alert alert-soft alert-error" role="alert">
  Oops! It seems there was an unexpected error. Please try again later.
</div>

Outline alerts

The standard format of outline-colored avatars, accompanied by the component class alert , alert-outline and modifier class alert-{semantic-color}.

<div class="alert alert-outline" role="alert">
  A quick alert conveying key information or prompting action within a system.
</div>
<div class="alert alert-outline alert-primary" role="alert">
  Welcome to our platform! Explore our latest features and updates.
</div>
<div class="alert alert-outline alert-info" role="alert">Stay tuned for our upcoming events and announcements.</div>
<div class="alert alert-outline alert-success" role="alert">
  Your transaction was successful. Thank you for choosing our service!
</div>
<div class="alert alert-outline alert-warning" role="alert">
  Attention! Your account security may be at risk. Enable two-factor authentication now.
</div>
<div class="alert alert-outline alert-error" role="alert">
  Oops! It seems there was an unexpected error. Please try again later.
</div>

Illustrations

Alerts with icon

Add a descriptive icon to complement the message within the alert component, as illustrated in the example below.

<div class="alert alert-warning flex items-center gap-4" role="alert">
  <span class="icon-[tabler--alert-triangle] size-6"></span>
  <p><span class="text-lg font-semibold">Warning alert:</span> Stay informed about the latest updates and upcoming events.</p>
</div>

<div class="alert alert-success flex items-center gap-4" role="alert">
  <span class="icon-[tabler--circle-check] size-6"></span>
  <p><span class="text-lg font-semibold">Success alert:</span> Explore our recent achievements and upcoming events.
  </p>
</div>

<div class="alert alert-soft alert-warning flex items-center gap-4" role="alert">
  <span class="icon-[tabler--alert-triangle] size-6"></span>
  <p><span class="text-lg font-semibold">Warning alert:</span> Take note of important updates and upcoming events.
  </p>
</div>

<div class="alert alert-soft alert-success flex items-center gap-4" role="alert">
  <span class="icon-[tabler--circle-check] size-6"></span>
  <p><span class="text-lg font-semibold">Success alert:</span> Celebrate our successes and stay informed about upcoming events.
  </p>
</div>

<div class="alert alert-outline alert-warning flex items-center gap-4" role="alert">
  <span class="icon-[tabler--alert-triangle] size-6"></span>
  <p><span class="text-lg font-semibold">Warning alert:</span> Pay attention to warnings and stay updated about upcoming events.
  </p>
</div>

<div class="alert alert-outline alert-success flex items-center gap-4" role="alert">
  <span class="icon-[tabler--circle-check] size-6"></span>
  <p><span class="text-lg font-semibold">Success alert:</span> Be aware of important notices and upcoming events.
  </p>
</div>

Descriptive alert

Alerts may include supplementary HTML elements such as headers, paragraphs, and icons.

<div class="alert alert-soft alert-primary flex items-start gap-4">
  <span class="icon-[tabler--check] size-6"></span>
  <div class="flex flex-col gap-1">
    <h5 class="text-lg font-semibold">Server maintenance in progress</h5>
    <p>Our servers are currently undergoing maintenance. We apologize for any inconvenience caused and appreciate your patience.
    </p>
  </div>
</div>

Alert with list

Similarly you can use lists.

<div class="alert alert-soft alert-primary flex items-start gap-4">
  <span class="icon-[tabler--info-circle] size-6"></span>
  <div class="flex flex-col gap-1">
    <h5 class="text-lg font-semibold">Please ensure that your password meets the following requirements:</h5>
    <ul class="mt-1.5 list-inside list-disc">
      <li>Contains a minimum of 10 characters and a maximum of 100 characters.</li>
      <li>Includes at least one lowercase character.</li>
      <li>Incorporates at least one special character such as !, @, #, or ?.</li>
    </ul>
  </div>
</div>

The action alert delivers vital information to users and encourages them to take defined actions. It commonly comprises a message, a link for additional details, and interactive buttons for user engagement.

<div class="alert alert-soft alert-primary" role="alert">
  Please read the <a href="#" class="link link-primary font-semibold">policy</a>. These can be configured in Settings.
  <div class="mt-4 flex gap-2">
    <button type="button" class="btn btn-primary btn-sm">Ok</button>
    <button type="button" class="btn btn-outline btn-secondary btn-sm">Cancel</button>
  </div>
</div>

Required FlyonUI JS

Dismissible alert

Utilize the data-remove-element attribute to specify the connected ID for alert removal. Customize the removal animation by incorporating the removing: modifier, as illustrated below.

Refer Remove Element plugin for more details.

<div class="alert alert-soft alert-primary removing:translate-x-5 removing:opacity-0 flex items-center gap-4 transition duration-300 ease-in-out" role="alert" id="dismiss-alert1">
  Dive into our platform to discover exciting new features and updates.
  <button class="ms-auto leading-none" data-remove-element="#dismiss-alert1" aria-label="Close Button">
    <span class="icon-[tabler--x] size-5"></span>
  </button>
</div>

FlyonUI

Tailwind CSS Alert

Variants

Solid alerts

Soft alerts

Outline alerts

Illustrations

Alerts with icon

Descriptive alert

Server maintenance in progress

Alert with list

Please ensure that your password meets the following requirements:

Alert with action

Dismissible alert

On this page

Alert