Overlay

Toast

Transient notifications that auto-dismiss. Service/hook-based API — place LlmToastContainer once in app root.

LlmToastProvider + useLlmToast

Demo

Toast requires LlmToastProvider wrapping your app root. Use the useLlmToast() hook to show toasts imperatively. See Storybook for a live interactive demo.

// App root:
<LlmToastProvider>
  <App />
  <LlmToastContainer position="bottom-right" />
</LlmToastProvider>

// In any component:
const { show } = useLlmToast();
show('Saved!', { variant: 'success' });
show('Error occurred', { variant: 'danger', duration: 8000 });
show('Persistent', { duration: 0 });

API

Prop	Type	Default	Description
`variant`	`'default' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'default'`	Color scheme of the toast
`duration`	`number`	`5000`	Auto-dismiss delay in ms. 0 = no auto-dismiss
`dismissible`	`boolean`	`true`	Show a dismiss button
`position`	`'top-right' \| 'top-center' \| 'bottom-right' \| 'bottom-center'`	`'bottom-right'`	Container position (on LlmToastContainer)

Import

import { LlmToastProvider, LlmToastContainer, useLlmToast } from '@atelier-ui/react';