Alert Components
- Build alert and notification UI components.
Why Alert Components Matter
Alerts tell users:
Something succeeded
Something failed
Something needs attention
Something is informational
Bad alerts:
Annoy users
Cause panic
Get ignored
Good alerts:
Are clear
Are calm
Are noticeable but not disruptive
Alerts
What is an Alert ?
An alert is a UI component that:
Communicates status, feedback, or important information to the user.
Alerts are usually:
Temporary
Contextual
Non-interactive (mostly)
Common Alert Types
Professional UI typically uses four alert types:
Alert Type Purpose Info Informational message Success Action completed successfully Warning Attention needed Error Something went wrong Each type has clear visual meaning.
Basic Alert Structure
A standard alert contains:
Container
Message text
Optional icon
Optional close button
Info Alert Component
This alert uses blue color styling to display informational messages with clear visibility and structure.
<div
class="flex gap-3
p-4 rounded-md
border border-blue-300
bg-blue-50
text-blue-800"
>
<p class="text-sm">
This is an informational alert.
</p>
</div>Meaning:
“Here’s something you should know.”
Success Alert Component
This alert uses green styling to indicate successful actions or positive feedback to the user.
<div
class="flex gap-3
p-4 rounded-md
border border-green-300
bg-green-50
text-green-800"
>
<p class="text-sm">
Your changes have been saved successfully.
</p>
</div>Meaning:
“Everything worked as expected.”
Warning Alert Component
This alert uses yellow styling to warn users and draw attention to important information.
<div
class="flex gap-3
p-4 rounded-md
border border-yellow-300
bg-yellow-50
text-yellow-800"
>
<p class="text-sm">
Please review your information carefully.
</p>
</div>Meaning:
“Pay attention before continuing.”
Error Alert Component
This alert uses red styling to indicate errors and notify users about issues clearly.
<div
class="flex gap-3
p-4 rounded-md
border border-red-300
bg-red-50
text-red-800"
>
<p class="text-sm">
Something went wrong. Please try again.
</p>
</div>Meaning:
“Action failed or needs fixing.”
Alert Design Best Practices
Use clear language
Don’t overuse alerts
Match color to meaning
Keep messages short
Avoid panic wording
Badges
What is a Badge ?
A badge is a small UI element that:
Displays short status, count, or label information.
Badges are compact indicators, not full messages.
Common Badge Use Cases
Badges are used for:
Status (Active, Pending)
Notifications (3 new)
Labels (New, Beta)
Categories
Tags
Basic Badge Styling
This badge uses inline-flex, spacing, and rounded styles to create a small label component.
<span
class="inline-flex items-center
px-2 py-0.5
text-xs font-medium
rounded-full"
>
Badge
</span>- This is the base badge pattern.
Info Badge Styling
This badge uses blue colors to represent informational status with clear and subtle styling.
<span
class="inline-flex px-2 py-0.5
text-xs font-medium
rounded-full
bg-blue-100
text-blue-800"
>
Info
</span>Badge Size & Shape Variations
Small → notifications
Medium → labels
Rounded-full → status
Rounded-md → tags
Keep badges:
Compact
Readable
Consistent
Badges vs Alerts
Alerts Badges Long message Short label High attention Low attention Temporary Persistent Explains something Indicates something
Choosing the wrong one confuses users.
Common Beginner Mistakes
Using alerts for small status
Using badges for long messages
Overusing bright colors
Inconsistent badge styles
Poor contrast
If UI feels noisy → too many alerts or badges.