Compact Alerts
Slim alerts with tight padding and a single line of text inside. Use in dense layouts, tables, or sidebars where vertical space stays limited.
Slim alerts with tight padding and a single line of text inside. Use in dense layouts, tables, or sidebars where vertical space stays limited.
Search blocks by description or jump to a page.
Compact Alerts is a vertical stack of five alert variants displayed at a reduced size. Each alert carries a small icon, a short bold title, and a one-line description. The five variants cover the full status range: default (no icon), destructive with an X circle, success with a check circle, warning with a triangle, and info with a circle-i. Tight padding and smaller type keep every row slim.
The five variants are independent units. You can use any subset, swap the title and description copy in each, or reorder them to match the priority order that makes sense for your interface. The icon and color pairing for each variant is self-contained, so removing one alert does not affect the others.
Reach for this block when your interface needs status messages but cannot spare much vertical room. An AI assistant product is a natural fit: inline model responses, rate limit notices, token budget warnings, and success confirmations all need to appear close to the conversation without pushing content down the page. Compact alerts outperform full-size variants in dense panels, sidebars, and settings drawers where a standard alert would feel visually heavy relative to the surrounding content.
A natural flow around it on a Components page:
Before
After
Each variant maps cleanly to a different event type your product emits. A few specific uses:
Tip: if you only need one or two variants at a time, pick the ones that match the actual states your UI can enter and leave the rest out.