Recipe: Banner / alert component
A dismissible notification strip that sits above page content. Four variants — info, success, warning, error — each with a distinct left accent border and icon colour.
Preview
i
Information
A new update is available for your region.
✓
Success
Your changes have been saved.
!
Warning
Your subscription expires in 3 days.
×
Error
Payment failed. Please update your billing details.
Usage
<div className="flex items-start gap-3
rounded-lg border-l-4
border-[#8B5CF6] bg-[#8B5CF6]/10
px-4 py-3">
<span className="text-[#8B5CF6]">i</span>
<div>
<p className="text-sm font-medium">
Title
</p>
<p className="text-xs text-gray-400">
Description
</p>
</div>
</div>Swap the border and background colours to match the variant. Add a close button with absolute positioning for dismissible behaviour.