About this block

Realtime Toast Blueprint is a static blueprint of a live notification toast anchored to the bottom-right of a page context strip. Priya Nair's avatar leads the card, the label reads "commented on ACM-218", and the quoted body is "Can we ship this before the Jun 16 cut? The null check is the blocker." A View comment button sits beside Dismiss, and a thin auto-dismiss timer track below the card is at 62% progress. The surrounding strip shows the actual issue page (Issues / ACM-218) so the toast has real spatial context.

The blueprint renders the open state as plain absolute positioned markup inside the page strip, never a Radix portal, so the preview iframe always captures it. The timer track is a static div with an inline width style.

When to use

Reach for this block when designing or presenting your toast notification pattern, wired to your real-time event stream (WebSocket or SSE) to swap in live data. Pair with the dismiss handler that resets the timer on hover.

A natural flow around it on an Application Pro page:

Before

• App shell

After

• Notification empty state
• Activity calendar

What you can display

One strong use is the comment or mention toast. Other toast shapes:

• Task assigned. Avatar, "assigned ACM-221 to you", View task action.
• Status change toast. No avatar, a status badge, the item that changed.
• Error toast. Muted icon, short reason, Retry action with no timer track.

Tip: the page context strip is what makes a static blueprint legible, a toast floating on white is ambiguous about where it appears.