Toast placement geometry

toast-placement-geometry

Default bottom center. Desktop: 16 px from the bottom of the viewport. Mobile: 16 px above the bottom toolbar; never wider than the viewport (8 px left/right margins). If unnoticed or disruptive, may move to bottom end, top end, or top center.

Description

Spectrum places toasts at bottom center by default: 16 px from the desktop viewport bottom, or 16 px above the mobile bottom toolbar, never wider than the viewport with 8 px left and right margins. Alternate corners (bottom end, top end, top center) are allowed only when the default is unnoticed or disruptive. Wrong defaults without that reason, or toasts that spill past the viewport margins, fail the geometry.

When to use

Positioning confirmation and notification toasts in the viewport.

Not when

Dialogs, modals, or sitewide banners that use their own placement rules.

Agent hint

Default toasts to bottom center with cited offsets; move only if unnoticed or disruptive.

Pass

Default is bottom center with those desktop/mobile offsets and margins; alternate corners only if unnoticed or disruptive.

Fail

Default placement other than bottom center with no unnoticed/disruptive reason, or toast wider than the viewport / overlapping the cited margins.

Citations

Spectrum — Toast

https://spectrum.adobe.com/page/toast/