Alerts are used to quickly grab user attention.


Alert by default is just a rounded box.

<div class="alert">This is a alert</div>
This is a alert

Alert can have multiple paragraph nested inside it.

I don't hate you

I just don't like that you exist


Add .alert-danger ,.alert-success and other classes to emphasize the message.

<div class="alert alert-danger label font-medium">This is a danger alert.</div>
<div class="alert alert-warning label font-medium">This is a warning alert.</div>
<div class="alert alert-success label font-medium">This is a success alert.</div>
This is a danger alert.
This is a warning alert.
This is a info alert.
This is a success alert.
This is a primary alert.
This is a secondary alert.
This is a tertiary.
This is a neutal alert.
This is a white alert.
This is a black alert.


Stripe alerts can be used as banners. By default stripe is on the left side.

Use alert-stripe--top, alert-stripe--right and alert-stripe--bottom for different sides.

<div class="alert alert-stripe alert-danger label font-medium">New update</div>
<div class="alert alert-stripe--top alert-warning label font-medium">Deprication Notice</div>
SIZE matters.
Nobody wants
A small cup of coffee.

With Icons

You can also create alerts with icons. You may need to add extra utility classes.

<div class="alert alert-stripe alert-success label font-medium">
	<div class="font-bold d-flex flex-items-center gap-2">
		<span class="icon label-xl">
			<i class="ri-lightbulb-line"></i>
		<span>DID YOU KNOW?</span>
	<p>90% of Rick and Morty fanboys think they're Rick.</p>
	<p>... when in reality they're Jerry.</p>

90% of Rick and Morty fanboys think they're Rick.
... when in reality they're Jerry.

With Actions

Alert can have action buttons.

<div class="alert alert-stripe alert-info label font-medium d-flex flex-items-center">
	<span>I am a writer. My hobbies include not writing.</span>
	<button type="button" aria-label="close" class="btn btn-icon fg-info--ultra ml-auto">
		<span class="icon label-lg">
			<i class="ri-close-line"></i>

<div class="alert alert-stripe alert-warning label font-medium d-flex flex-items-center">
	<span>Beam Me Up, Scotty</span>
	<button type="button" aria-label="close" class="btn btn-warning ml-auto">
		Start Transmission
I am a writer. My hobbies include not writing.
Beam Me Up, Scotty


With help of utilites multiple variations of alert can be made.

<div class="alert alert-danger rounded-none label font-medium">Alert without rounded borders</div>
<div class="alert alert-success border-0 label font-medium">Alert without border</div>
<div class="alert alert-info bg-transparent label font-medium">Alert with no money</div>
Alert without rounded borders
Alert without border
Alert with no money