Double Border Alerts
Alerts with a layered double border for a refined, framed look. Use to highlight important notices that deserve extra visual weight on a page.
Alerts with a layered double border for a refined, framed look. Use to highlight important notices that deserve extra visual weight on a page.
Search blocks by description or jump to a page.
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.
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
After
Each variant is independent, so you can include only the tones your product uses and write copy that fits your context precisely.
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.