Back to docsRecipe

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.