Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Solid color variants
Use the following examples of alert components to show messages as feedback to your users.
Primary
alert! You should check in on some of those fields below.
Secondary
alert! You should check in on some of those fields below.
Success
alert! You should check in on some of those fields below.
Info
alert! You should check in on some of those fields below.
Danger
alert! You should check in on some of those fields below.
Warning
alert! You should check in on some of those fields below.
Dark
alert! You should check in on some of those fields below.
Light
alert! You should check in on some of those fields below.
<div class="bg-indigo-600 mb-3 text-white rounded-lg p-4" role="alert">
<span class="font-bold">Primary</span>
alert! You should check in on some of those fields below.
</div>
<div class="bg-gray-600 mb-3 text-white rounded-lg p-4" role="alert">
<span class="font-bold">Secondary</span>
alert! You should check in on some of those fields below.
</div>
<div class="bg-green-600 mb-3 text-white rounded-lg p-4" role="alert">
<span class="font-bold">Success</span>
alert! You should check in on some of those fields below.
</div>
<div class="bg-cyan-600 mb-3 text-white rounded-lg p-4" role="alert">
<span class="font-bold">Info</span>
alert! You should check in on some of those fields below.
</div>
<div class="bg-red-600 mb-3 text-white rounded-lg p-4" role="alert">
<span class="font-bold">Danger</span>
alert! You should check in on some of those fields below.
</div>
<div class="bg-yellow-600 mb-3 text-white rounded-lg p-4" role="alert">
<span class="font-bold">Warning</span>
alert! You should check in on some of those fields below.
</div>
<div class="bg-gray-800 mb-3 text-white rounded-lg p-4" role="alert">
<span class="font-bold">Dark</span>
alert! You should check in on some of those fields below.
</div>
<div class="bg-gray-300 mb-3 text-gray-600 rounded-lg p-4" role="alert">
<span class="font-bold">Light</span>
alert! You should check in on some of those fields below.
</div>Soft color variants
Use the following examples of alert components to show messages as feedback to your users.
Primary
alert! You should check in on some of those fields below.
Secondary
alert! You should check in on some of those fields below.
Success
alert! You should check in on some of those fields below.
Info
alert! You should check in on some of those fields below.
Danger
alert! You should check in on some of those fields below.
Warning
alert! You should check in on some of those fields below.
<div class="bg-indigo-100 mb-3 text-indigo-600 rounded-lg p-4" role="alert">
<span class="font-bold">Primary</span>
alert! You should check in on some of those fields below.
</div>
<div class="bg-gray-100 mb-3 text-gray-900 rounded-lg p-4" role="alert">
<span class="font-bold">Secondary</span>
alert! You should check in on some of those fields below.
</div>
<div class="bg-green-100 mb-3 text-green-600 rounded-lg p-4" role="alert">
<span class="font-bold">Success</span>
alert! You should check in on some of those fields below.
</div>
<div class="bg-cyan-100 mb-3 text-cyan-600 rounded-lg p-4" role="alert">
<span class="font-bold">Info</span>
alert! You should check in on some of those fields below.
</div>
<div class="bg-red-100 mb-3 text-red-600 rounded-lg p-4" role="alert">
<span class="font-bold">Danger</span>
alert! You should check in on some of those fields below.
</div>
<div class="bg-yellow-100 mb-3 text-yellow-600 rounded-lg p-4" role="alert">
<span class="font-bold">Warning</span>
alert! You should check in on some of those fields below.
</div>Soft color with icon
You can also include a descriptive icon to complement the message inside the alert component with the following example.
Primary
alert! You should check in on some of those fields below.
Secondary
alert! You should check in on some of those fields below.
Success
alert! You should check in on some of those fields below.
Info
alert! You should check in on some of those fields below.
Danger
alert! You should check in on some of those fields below.
Warning
alert! You should check in on some of those fields below.
<div class="bg-indigo-100 mb-3 text-indigo-600 rounded-lg p-4 flex items-center gap-2" role="alert">
<span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-alert-circle">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
</span>
<span class="font-bold">Primary</span>
alert! You should check in on some of those fields below.
</div>
<div class="bg-gray-100 mb-3 text-gray-900 rounded-lg p-4 flex items-center gap-2" role="alert">
<span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-alert-circle">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
</span>
<span class="font-bold">Secondary</span>
alert! You should check in on some of those fields below.
</div>
<div class="bg-green-100 mb-3 text-green-600 rounded-lg p-4 flex items-center gap-2" role="alert">
<span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-alert-circle">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
</span>
<span class="font-bold">Success</span>
alert! You should check in on some of those fields below.
</div>
<div class="bg-cyan-100 mb-3 text-cyan-600 rounded-lg p-4 flex items-center gap-2" role="alert">
<span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-alert-circle">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
</span>
<span class="font-bold">Info</span>
alert! You should check in on some of those fields below.
</div>
<div class="bg-red-100 mb-3 text-red-600 rounded-lg p-4 flex items-center gap-2" role="alert">
<span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-alert-circle">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
</span>
<span class="font-bold">Danger</span>
alert! You should check in on some of those fields below.
</div>
<div class="bg-yellow-100 mb-3 text-yellow-600 rounded-lg p-4 flex items-center gap-2" role="alert">
<span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-alert-circle">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
</span>
<span class="font-bold">Warning</span>
alert! You should check in on some of those fields below.
</div>