Toast

import { Toaster, toast } from '@yarcl/react';

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

primaryneutralsuccesswarningdangerinfoWith actionSticky

import { Toaster, toast } from '@yarcl/react';

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

toast({ title: 'Saved', color: 'success', radius: 'lg', padding: 'md' });
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.
• radius, gap, padding and textStyle use keys from your config and can be set in components.Toast.

Spacing props accept typed breakpoint maps. See responsive props for supported props, defaults and examples.

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.
dismissLabel	string	config.labels.dismiss	Accessible name of this notification's dismiss button.
duration	number	config.timing.toastDuration	Time before it dismisses itself, in ms. Paused while hovered or focused. 0 keeps it until dismissed.
gap	Responsive<Spacing>config	config.components.Toast.gap ?? config.defaults.gap	Space between the message, action and dismiss button, from the spacing config. Accepts a scalar or breakpoint map.
padding	Responsive<Spacing>config	config.components.Toast.padding ?? config.defaults.padding	Inner spacing, from the spacing config. Accepts a scalar or breakpoint map.
radius	Radiusconfig	config.components.Toast.radius ?? config.defaults.radius	Corner radius, from the radii config.
textStyle	TextStyleconfig	config.components.Toast.textStyle ?? config.defaults.labelStyle	Typography style, from the typography.styles config.
urgent	boolean		Announces immediately (role="alert") instead of politely. Use for errors that need attention.

Toaster

Prop	Type	Default	Description
label	string	config.labels.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.