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).

Minimal markup

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