UIDex

Toast

الإشعار العائم

role="status"

also calledsnackbar، transient notification، flash message، toast notification، temporary alert، توست، إشعار مؤقت، رسالة عابرة، سناك بار، تنبيه منبثق، إشعار سريع

A toast is a short message that appears over the interface after the user did something, then dismisses itself after a few seconds. It has two defining traits: it is transient, since it carries a timer, and it is non-blocking, so it does not steal focus or stop you clicking the rest of the page. Three other elements look like it. An inline alert sits inside the page flow next to the field it belongs to and does not disappear; a banner spans the full width of the page and stays until dismissed; a modal blocks the page and demands a decision. If losing the message would hurt the user, it should not be a toast.

If you called it…

"the little box that pops up and goes away""the saved message in the corner""the popup with an undo button""the notification that fades by itself""the thing that says it worked"

Live specimen

Interact with the demo. Every part is real and numbered.

ملفّاتي

تم حذف «تقرير-الربع.pdf»

RTLالشريط يفرغ من البداية المنطقية، مرّر المؤشّر ليتوقّف

Anatomy: every part, named

Hover a row to locate it in the demo above.

Build prompt

Build a toast system. Put a single fixed region in the page from first paint with aria-live="polite", anchored with inset-inline-end and inset-block-end so it mirrors with page direction. Each toast is an element with role="status" (role="alert" for errors only). It holds an aria-hidden status icon, a short message, one optional action, and a close button with an accessible name and a 44px touch target. Add a timer bar that drains from a logical transform-origin and pauses on hover and focus. Drive the entry animation from a --dir variable instead of a hard-coded translateX. Derive the duration from text length with a 4-second floor. Show at most three toasts at once and queue the rest.

How it behaves right-to-left

This section is ours alone.

Where the toast sits

mirrors

A toast pinned bottom-right in English belongs bottom-left in Arabic. Use inset-inline-end: 1rem instead of right: 1rem, or it stays on the wrong side after the flip.

Entry animation

mirrors

A slide-in has to follow the logical edge. A hard-coded translateX(100%) makes the toast enter from the opposite side and fly across the screen. Use translateX(calc(100% * var(--dir))) with --dir set to -1 under [dir="rtl"].

The timer bar

mirrors

The bar drains from the logical start to the logical end. In Arabic, transform-origin: left drains against the reading direction. Use transform-origin: inline-start, or flip it under [dir="rtl"].

The undo icon

mirrors

The undo arrow is a directional icon, so it mirrors with the page. Status icons (check, error, warning), clocks, and spinners never mirror. Flipping them just makes them look broken.

Display duration

never mirrors

This is a content note, not a layout one. The Arabic wording of the same message often runs about 20% longer in characters, so a 3-second duration tuned on English may not be enough to read the Arabic. Derive the duration from text length instead of hard-coding it.

In code

Each row is one framework's word for the same thing. Take the row your project speaks.

ARIArole="status" / aria-live="polite"A polite announcement that waits its turn, and the correct default for toasts.
Radix UI<Toast.Provider> + <Toast.Viewport>Compound parts: Toast.Root, Toast.Title, Toast.Action, Toast.Close.
shadcn/uitoast() / <Toaster />A one-call API built on Sonner; queueing and stacking come preconfigured.
Material UI<Snackbar autoHideDuration={4000}>Material calls it a Snackbar, not a toast. It is the same thing under a different word.
Ant Designmessage.success() / notification.open()message is a single line at the top; notification is a larger card in the corner.
CSSinset-inline-endThe logical property that lets the position mirror itself with page direction.

See also

WebBreadcrumbsWebSteps / Stepper

Updated · 2026-08-19