Inputs & feedback

Toast

ToastProvider + useToast hook. Glass-strong cards with a 4px gradient accent rail. Optional title, description, icon. Auto-dismiss with progress.

Toast is the kit's notification primitive — a <ToastProvider> you mount once and a useToast() hook anywhere in the tree. Glass-strong cards with a 4px gradient accent rail keyed to the toast's variant (info / success / warning / danger). Auto-dismiss with a progress indicator so users can watch their time tick down.

Each toast supports an optional title, description, and icon — for small confirmations, drop the title and pass a one-liner. For big moments ("Goal reached!"), include all three.

Example

tsx

import { ToastProvider, useToast } from '@kidcash/ui';

function App() {
  return <ToastProvider>{/* your tree */}</ToastProvider>;
}

function MyButton() {
  const { toast } = useToast();
  return <button onClick={() => toast('Saved.', { variant: 'success', icon: '🏆' })}>Save</button>;
}

Try it live

← Back to the playground to see Toast rendered with every variant. Or install @kidcash/ui and copy the example above into your own app.

← Previous

Tooltip

Modal