About this block

Double Border Alerts is a set of five status alerts, each wrapped in a layered double border that draws a clear frame around the message. The five variants are Default, Destructive, Success, Warning, and Info. Each alert shows a bold title above a short description, and all variants except Default pair their title with a status icon aligned to the left of the text column.

The double border is the only structural difference from a plain outlined alert, so the copy, icon choice, and which variants you keep are fully yours to change. You can display two variants or all five, swap the titles and descriptions for your own wording, and remove any variant that does not fit your alert palette.

When to use

Reach for this block when an alert needs a little more visual presence than a single border provides but without resorting to color fills. In a product analytics SaaS this works well on a report or data summary page where the framed look signals that a notice is deliberate and structured, not a transient toast. The layered border gives each alert a contained, formal quality that sits naturally alongside data tables and metric cards.

A natural flow around it on a Components page:

Before

• Basic Alerts to show the plain baseline before introducing the framed variant
• Outlined Alerts as a lighter single border option that leads into this heavier treatment

After

• Elevated Alerts if you want to take the visual weight one step further with a shadow lift
• Badges to pair status labels with the alerts for a richer data notification pattern

What you can customize

Each variant is independent, so you can include only the tones your product uses and write copy that fits your context precisely.

• Tone selection. Keep only the variants that match your alert vocabulary, such as Success and Warning for a report health panel, and drop the rest.
• Icon and title pairing. Swap the icon to any Lucide icon that better represents the event, and update the title to name the exact condition your users need to act on.
• Description depth. Expand the description to two sentences when users need enough context to fix a problem without leaving the page.

Tip: in a dense analytics dashboard, lead with a number or metric in the title so users know the severity at a glance before reading the description.