Toast — HTML & CSS

Transient notifications. Toast is imperative — there's no markup to write: you create a manager and call methods, and it renders and positions the toasts itself. The only styling knobs are the type (color) and the position.

Creating the manager and showing toasts is on the JavaScript page.

Live example

Theme:

Typed helpers (top-right, auto-dismiss):

Positions — pop a toast in any corner/edge:

Other options:

Variants

Knob	Values
Type (color)	default · success · danger · info · warning · primary
Position	top-left · top-center · top-right · bottom-left · bottom-center · bottom-right

Type is chosen per toast (toast.success(...) or show(msg, { type })); position is set on the manager (see JavaScript › Positions).

Structure

Toast writes its own DOM, in two rows: a header holding the timestamp and the close button, and the message on its own line below it — so a long message wraps across the toast's full width instead of squeezing in beside the chrome.

<div class="UItoast success UItoast--show" role="status">
  <div class="UItoast__header">
    <time class="UItoast__time" datetime="2026-07-11T13:22:04.000Z">13:22:04</time>
    <button type="button" class="UItoast__close" aria-label="Close">×</button>
  </div>
  <div class="UItoast__content">Profile updated</div>
</div>

The header is rendered only when it has something to hold — with closable: false and no timestamp, the toast is just the message row.

Narrow screens

Below 480px the stack goes edge-to-edge: the container drops its 24rem cap and pins to both viewport edges, so toasts are full-width whatever the position modifier says. Nothing to opt into — it's the default.

Minimal markup

None — Toast writes its own DOM. The minimal usage is one line of JS: new Toast().success('Done'). See the JavaScript page.