Flab UIv0.0.2
MobileA2UI

Toast

A transient, non-modal notification that confirms an action or reports a failure, then dismisses itself. Unlike a Callout — a persistent inline banner — a toast is queued imperatively, floats in a fixed viewport, stacks, and auto-dismisses. Built on Base UI, so the live region, F6 landmark, swipe-to-dismiss and focus handling come for free.

Tones

import { ToastProvider, toast, Button } from '@flabbergasted-ai/react';
// Mount once near the root of the app:// <ToastProvider>{children}</ToastProvider>
<Button variant="secondary" onClick={() => toast.info('Export runs nightly')}>  Info</Button><Button variant="secondary" onClick={() => toast.success('Changes saved')}>  Success</Button><Button variant="secondary" onClick={() => toast.warning('Plan renews in 3 days')}>  Warning</Button><Button variant="secondary" onClick={() => toast.error('Two records failed to sync')}>  Error</Button>

With a description

toast.error('Upload failed', {  description: 'The file was larger than the 10 MB limit.',});

Persistent, then dismissed

// duration: 0 keeps the toast up until you dismiss it by id.const id = toast.info('Syncing…', { duration: 0 });// later:toast.dismiss(id);

Anatomy

  • ToastProvider wraps the app once and renders the fixed viewport at the reserved toast layer (above popovers, below tooltips).
  • toast queues notifications from anywhere — event handlers, effects, even outside React. Use toast.info, toast.success, toast.warning or toast.error.
  • error and warning announce assertively; info and success announce politely.

Props

PropTypeDefaultNotes
toast.<tone>(title, options)'info' | 'success' | 'warning' | 'error'—Queue a toast. Returns its id.
options.descriptionReactNode—Secondary line under the title.
options.durationnumber5000Auto-dismiss in ms. 0 keeps it until dismissed.
options.idstring—Stable id; re-emitting updates in place.
ToastProvider limitnumber3Maximum toasts shown at once.
ToastProvider durationnumber5000Default auto-dismiss for all toasts.