Toast-Style Alert Stack
A lightweight stacked-notification pattern for transient system updates.
Uses
aihio-alert
aihio-stack
Intents
alert
informational
status
layout
Pattern
Live, over the markup an agent gets from the MCP server's get_pattern. Narrow the preview to see
the layout answer to its own width rather than the window's.
Toast-Style Alert Stack
Deployment finished
Customer portal v18 is now live in production.
Usage report ready
A new CSV export is available in Billing.
Webhook delivery failed
Three retries have failed for the Slack incident channel.
<aihio-stack aria-live="polite" data-aihio-intent="layout" gap="sm">
<aihio-alert data-aihio-intent="alert informational">
<div slot="title">Deployment finished</div>
<div slot="description">Customer portal v18 is now live in production.</div>
</aihio-alert>
<aihio-alert data-aihio-intent="alert status">
<div slot="title">Usage report ready</div>
<div slot="description">A new CSV export is available in Billing.</div>
</aihio-alert>
<aihio-alert data-aihio-intent="alert" variant="destructive">
<div slot="title">Webhook delivery failed</div>
<div slot="description">Three retries have failed for the Slack incident channel.</div>
</aihio-alert>
</aihio-stack>