Support toast placement at center of the screen

[jaikarans]

Currently, toasts support only the following placement options:

export type Placement = "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end"

Would it be possible to add a "center" placement option as well, which positions toasts both vertically and horizontally centered on the screen? This addition would allow important notifications to capture more user attention by appearing in the middle of the viewport.

[anubra266]

Hi @jaikarans

Most component libraries avoid center-screen toasts because they conflict with the way toasts are typically used in UI/UX patterns.

---

• Toasts are meant to be non-blocking notifications i.e. you should be able to keep interacting with the app without them getting in the way.
• A toast in the center of the screen feels like a blocking modal, even if you can still click behind it. This can confuse users about whether they need to take action before continuing.

---

• Center placement demands maximum attention, which is usually reserved for critical states (errors, confirmations) — those are better served by modals, banners, or inline alerts.
• Toasts are usually positioned at the edges (top-right, top-left, bottom-right, bottom-left) so they inform without dominating.

---

• Zag JS and other similar libraries rely on stacking toasts vertically in a corner.
• Center stacking leads to awkward overlaps or shifting, especially on small screens.
• Mobile UX especially suffers because a center toast can obscure key UI controls.

---

Most importantly... Accessibility

Screen readers expect non-blocking notifications to appear off the main focus area. Center placement might interfere with focus or confuse assistive tech, blurring the line between “live region update” and “dialog”.

---

💡 Workaround
If you want center placement, you can override toast group. i.e. the element with getGroupProps() styles with top: 50%; left: 50%; bottom: unset; transform: translate(-50%, -50%)

---