Search blocks by description or jump to a page.
Compact alerts that pair a status icon with a short message and no title. Use for quick inline feedback where space is tight and tone is clear.
Icon Only Alerts is a stacked set of five status alerts, each rendered as a horizontal row. A circular icon badge sits on the left, its background tinted to match the alert tone: neutral gray for default, red for destructive, green for success, yellow for warning, and blue for informational. To the right of the badge, a short bold title sits above a single line of description text in a smaller, muted size.
Every alert is independent. You can reorder, remove, or duplicate any of the five rows without affecting the others. The title and description text in each row are plain strings, so swapping in your own copy is straightforward. If you only need three tones, drop the remaining rows entirely.
Reach for this block on status dashboards or confirmation screens where a reader needs to understand the result of several concurrent actions at once. In a healthcare scheduling product, for example, a page that finalises an appointment batch might surface a success notice for confirmed slots, a warning for double bookings, and an info notice about reminder emails all in the same view. The circular icon badge makes each tone legible even when the alerts are stacked close together, which is an advantage over plain text notices or alerts that rely on border color alone.
A natural flow around it on a Components page:
Before
After
Each row is a self-contained status notice, so the content you slot in can cover a wide range of feedback types:
Tip: keep each description to one short sentence so the compact row height stays consistent and the icon badge remains the focal point.