Toast

import { Toaster, toast } from 'yarcl';

Render one <Toaster /> near the root of your app, then call toast() from anywhere.

primaryneutralsuccesswarningdangerinfoWith actionSticky

import { Toaster, toast } from 'yarcl';

<App />
<Toaster placement="bottom-right" />

toast({ title: 'Saved', color: 'success' });
toast({ title: 'Message deleted', action: { label: 'Undo', onClick: restore } });
toast({ title: 'Upload failed', color: 'danger', urgent: true, duration: 0 });

Behavior

• Toasts dismiss themselves after duration (5 s); hovering or focusing one pauses the timer. duration: 0 keeps it until dismissed.
• Beyond limit, the oldest toasts are dismissed.
• The toaster lives in the browser’s top layer, above everything. While a modal Dialog is open, toasts render inside it so they stay clickable.
• Toasts are announced politely (role="status"); urgent uses role="alert".
• toast() returns an id; toast.dismiss(id) removes one, toast.dismiss() removes all.

Props

toast() options

Prop	Type	Default	Description
title required	ReactNode		Main message.
action	{ label: string; onClick: () => void }		A single action, e.g. Undo. Choosing it dismisses the toast.
color	Colorconfig	config.defaults.color	Accent color, from the colors config.
description	ReactNode		Supporting text.
duration	number	5000	Time before it dismisses itself, in ms. Paused while hovered or focused. 0 keeps it until dismissed.
urgent	boolean		Announces immediately (role="alert") instead of politely. Use for errors that need attention.

Toaster

Prop	Type	Default	Description
label	string	'Notifications'	Accessible name of the notifications region.
limit	number	4	Maximum toasts shown at once. When exceeded, the oldest are dismissed.
placement	'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'	'bottom-right'	Screen corner or edge where toasts appear.