GitHubGitHub
← All components
Feedback / component

Toaster

← →

A stacked notification queue: newest first, capped depth, auto-dismiss timers, and four corner positions.

StackedAuto-dismissManual dismiss
const toaster = createToaster();toaster.push({ title: 'Saved', tone: 'success' });<Toaster {toaster} position="top-right" />

Installation

pnpm add @chanrg/4ui

Import the stylesheet once, at the root of your app:

import '@chanrg/4ui/styles.css';

Usage

import { Toaster } from '@chanrg/4ui';const toaster = createToaster();toaster.push({ title: 'Saved', tone: 'success' });<Toaster {toaster} position="top-right" />

API reference

Props

PropTypeDefaultDescription
toasterReturnType<typeof createToaster>requiredQueue instance; push()/dismiss()/clear().
positiontop-right | top-left | bottom-right | bottom-lefttop-rightStack corner.

CSS variables

VariableDescription
--4ui-surfacePrimary component surface.
--4ui-textPrimary foreground color.
--4ui-borderDefault control and panel border.

Accessibility

  • The stack is an aria-live region; items announce politely.
  • Every toast keeps a labelled dismiss button.

Dependencies

Toast, motion flyRise