Toasts and confirm dialogs

Style → Toasts & dialogs (vi: Kiểu → Thông báo & hộp thoại).

Two things your visitors see are never dragged onto a page: the small notice that slides in at a corner of the screen (a toast) — "Added to cart", "Out of stock" — and the dialog in the middle of the screen when a visitor is about to do something worth asking twice about, like removing an item from the cart. The page builds both on the spot, so neither is on the canvas or in the Layers tree. This is where you style them.

Left alone, they follow your page

The first thing to know: leaving every row empty is already fine. The background, title colour, text colour and primary button of both come from your page's colour scheme (background, heading, text, button background, button text), and the text uses your Text 1 font. If the site has a dark mode, they go dark with it. A shop with a cream background, brown text and orange buttons gets cream toasts with brown text and an orange button — not somebody else's white-and-grey box.

Every row here exists to override that. An unset row shows the colour it is currently using, dimmed, so you can tell what you chose from what is inherited. The × clears your choice and the row follows the page again.

The colours of the toast kinds — green for success, red for an error, orange for a warning — do not change, on purpose: a visitor reads "error" from the colour before reading a word, and an error in your brand orange reads like a greeting.

What you can change

• Toast: where it appears (any corner, or centred at the top or bottom), background, title colour, text colour, corner radius.
• Confirm dialog: background, title colour, text colour, the primary button's fill and text, the dark backdrop behind it, and the corner radius of the box and of its buttons.

A very large button radius gives pill-shaped buttons, which matches the rest of the page if your buttons are pills too.

Preview shows the real thing

Each group has a Preview button. It does not draw an illustration — it fires the very toast and dialog your page will show a visitor, with what you just changed, over the screen. What you see here is what a visitor sees after you publish. The dialog closes from its buttons, a click outside it, or Esc.

Each screen size on its own

The Screen control at the top picks which size you are editing, by the same rule as Styling for phones: a value set on desktop applies to every narrower size until one of them says otherwise. A row set specifically for the current size has a small dot beside its name — click the dot to drop it and the row inherits again. The ↺ on the screen banner drops them all at once.

The usual case is position: top right on a desktop, centred at the bottom on a phone, where a thumb can reach it and it does not cover the header.

Preview shows the size picked here, not the one open on the canvas.