Toast

Toast notification system with an imperative API, auto-dismiss, and stacking.

Feedbacknotificationfeedbackoverlay

Workbench

Rendering Toast…

Installation

Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.

npx mlola-ui add toast

Usage

TSX

"use client";

import { Button } from "@/components/ui/button";
import { Toaster, toast } from "@/components/ui/toast";

export default function Example() {
  return (
    <>
      <Button onClick={() => toast.success("Draft saved to your workspace.")}>Save draft</Button>
      <Toaster />
    </>
  );
}

Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:

HTML

<html data-theme="graphite" data-mode="light">

Examples

Following work to its end

One toast says it is working, then reports how it went, without a second message.

Rendering Following work to its end…

With an undo

An action in the toast gives a quick way back from something easy to regret.

Rendering With an undo…

HTML

Without React, write this markup and load @mlola-ui/behavior once. It runs the keyboard, focus and state for every element marked data-ml="toast", including markup added later, and needs no build step.

HTML

<div class="ml-toaster" data-ml="toast" role="region" aria-label="Notifications" data-position="top-right">
  <div class="ml-toast" role="status" aria-live="polite" aria-atomic="true" data-tone="success" data-ml-duration="6000">
    <div class="ml-toast-content">
      <p class="ml-toast-message">Draft saved to your workspace.</p>
    </div>
    <button class="ml-toast-close" type="button" aria-label="Dismiss notification"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
  </div>
</div>

HTML

<script type="module">
  import { observe } from "@mlola-ui/behavior";
  observe();
</script>

Options

Prop	Values	Default
`position`	`top-righttop-centerbottom-rightbottom-center`	`top-right`

Every prop with a fixed set of values, read from the exported TypeScript types with its doc comment. Open the Code tab above for the rest of the API.

Classes and attributes

A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.

Class	Attributes
`ml-toaster`	`data-position="bottom-center \| bottom-right \| top-center \| top-right"`
`ml-toast-slot`	`data-state="closed"`
`ml-toast`	`data-has-descriptiondata-swipingdata-tone="danger \| info \| success \| warning"`
`ml-toast-icon`	—
`ml-toast-content`	—
`ml-toast-message`	—
`ml-toast-description`	—
`ml-toast-action`	—
`ml-toast-close`	—

Accessibility and theming

Semantic elements, accessible names and state relationships are part of the contract.
Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
Reduced motion and forced colors keep meaning and operation.

Dependencies

Installed alongside this component. No third-party UI runtime is ever added.

spinner
@mlola-ui/behavior
@mlola-ui/icons

Open the standalone preview