Toast v0.1.0 Overlay

Imperative notifications backed by a framework-agnostic queue with auto-dismiss, hover pause/resume, and a visible-toast cap.

import { ToastProvider, useToast } from "latticeui-react";

Examples

Types

Hovering the viewport pauses every auto-dismiss timer.

Show code

const toast = useToast();

<Button onClick={() => toast({ title: "Changes saved", type: "success" })}>Success</Button>
<Button onClick={() => toast({ title: "Build started", description: "You'll be notified." })}>Info</Button>
<Button onClick={() => toast({ title: "Deploy failed", type: "danger" })}>Danger</Button>

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`viewport`	`ol`	`[data-scope="toast"][data-part="viewport"]`
`root`	`li[role=status]`	`[data-scope="toast"][data-part="root"]`
`title`	`div`	`[data-scope="toast"][data-part="title"]`
`description`	`div`	`[data-scope="toast"][data-part="description"]`
`close`	`button`	`[data-scope="toast"][data-part="close"]`

Props

Prop	Type	Default
`ToastProvider.duration`	`number`	`5000`
`ToastProvider.max`	`number`	`5`
`toast(options)`	`{ title; description?; type?: "info"\|"success"\|"warning"\|"danger"; duration? }`	—
`toast.dismiss(id) / toast.clear()`	`imperative controls`	—

Accessibility

Roles: status with aria-live=polite

Hovering the viewport pauses all auto-dismiss timers.

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="toast"][data-part="root"] {
  /* your overrides */
}

State attributes: data-type=info|success|warning|danger