Outlined Alerts
Alerts defined only by a clean border with no fill behind the text. Use on colored or busy backgrounds where a solid panel would feel heavy.
Alerts defined only by a clean border with no fill behind the text. Use on colored or busy backgrounds where a solid panel would feel heavy.
Search blocks by description or jump to a page.
Outlined Alerts shows five alert variants stacked in a single column. Each alert carries a bold border with a fully transparent background, an icon on the left, a short title, and a one-line description. The five variants cover the standard status tones in order: default, destructive, success, warning, and info. Every variant uses a color-matched border and icon so the tone is clear even without reading the text.
Because the background is absent, the border does all the work of separating the alert from whatever sits behind it. The title, body copy, and icon for each entry are independent, so you can rewrite any of them without affecting the others. You can also remove variants you do not need or reorder them to suit your page.
Reach for this block when your page or panel already carries a background color or pattern and a filled alert would look too heavy. In a project management workspace it fits well inside a task detail drawer, a settings panel, or a dashboard card where the surface behind an alert is already shaded. The transparent body keeps the layout feeling open rather than stacked with competing surfaces, which is the main advantage over the filled basic or elevated styles.
A natural flow around it on a Components page:
Before
After
Any status message that needs tone without a heavy background is a good fit. A few ways to use the set:
Tip: on a white or very light background, increase the border opacity slightly so the outlined edge stays crisp without a fill.