Skip to content
aidsgnaidsgnaidsgn

Toast

aidsgn-toast reports an application outcome and remains visible until dismissed. The component does not impose a screen position or an automatic timeout, so applications retain control of placement and timing.

Invitation sent
Alex can now join this workspace.
<aidsgn-toast open variant="success" heading="Invitation sent"><aidsgn-icon class="aidsgn-toast__icon" name="success" aria-hidden="true"><svg class="aidsgn-icon__svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20ZM8 12l3 3 5-6"></path></svg></aidsgn-icon><div class="aidsgn-toast__content"><strong class="aidsgn-toast__heading">Invitation sent</strong><div class="aidsgn-toast__message">Alex can now join this workspace.</div></div><button class="aidsgn-toast__close" type="button" aria-label="Dismiss notification"><span aria-hidden="true">×</span></button></aidsgn-toast>

Use show() and close() for imperative workflows, or toggle the open property. Listen for the bubbling aidsgn-close event to synchronize application state after dismissal. Error toasts announce assertively; other variants use a polite status.

Holding the native close button applies shared Press feedback without changing its 44px target. Reduced motion suppresses the scale.

Usage guidelines

Section titled “Usage guidelines”
A success Toast confirms Invitation sent while the team page remains available behind it.A success Toast confirms Invitation sent while the team page remains available behind it.
Do

Confirm actions without blocking

Use Toast for brief feedback that does not interrupt or require an immediate response.

A Toast uses the concise heading Changes saved and the clear message Your profile is up to date.A Toast uses the concise heading Changes saved and the clear message Your profile is up to date.
Do

Keep messages perceivable

Write concise copy and leave the Toast available long enough for people to notice and understand it.

A small Toast contains a long payment failure message with account-blocking instructions.A small Toast contains a long payment failure message with account-blocking instructions.
Don’t

Avoid critical or durable information

Keep errors, required decisions, and information people must revisit in a persistent interface.

Four overlapping Toasts crowd the same corner, and one success message contains only a check icon.Four overlapping Toasts crowd the same corner, and one success message contains only a check icon.
Don’t

Avoid overload and color-only meaning

Do not show many Toasts at once or communicate success without clear confirmation text.