Skip to content
Feedback

Toast

Transient viewport notifications with imperative API.

React source Astro source Core source

Toast

For live notification queues without React, mount a ToastRegion and call the imperative toast API from any client script. In React apps, use ToastProvider with useToast() or toast from @var-ui/react.

Examples

Default
Demo.tsxtsx
import { Button, ToastProvider, toast, useToast } from '@var-ui/react';

function NotifyButton() {
  const { add } = useToast();
  return <Button onPress={() => add({ tone: 'success', title: 'Saved' })}>Save</Button>;
}

<ToastProvider>
  <NotifyButton />
</ToastProvider>

// Imperative API (requires ToastProvider mounted)
toast.show({ tone: 'info', title: 'Hello' });
toast.update(id, { title: 'Updated' });
toast.dismiss(id);

Props

Accessibility

Toasts render in a live region with appropriate status semantics. Dismiss controls expose an accessible name and keyboard support via React Aria Components.