Toast

<Toast title="Settings saved" onDismiss={() => {}} />

<div className="flex flex-col gap-gap-md">
  <Toast title="Settings saved" tone="success" onDismiss={() => {}} />
  <Toast title="Invite sent to sam@northwind.co.uk" tone="info" description="They have 7 days to accept." onDismiss={() => {}} />
  <Toast title="Could not save" tone="danger" description="Check your connection and try again." onDismiss={() => {}} />
  <Toast title="Member removed" action={{ label: 'Undo', onAction: () => {} }} onDismiss={() => {}} />
</div>

const demoQueue = new ToastQueue({ maxVisible: 3 });

function Example() {
  useEffect(() => () => demoQueue.clear(), []);
  return (
    <div>
      <Button onPress={() => demoQueue.add({ title: 'Settings saved', tone: 'success' })}>Save changes</Button>
      <Toaster queue={demoQueue} />
    </div>
  );
}

function Example() {
  const [queue] = useState(() => {
    const q = new ToastQueue({ maxVisible: 3 });
    q.add({ title: 'File uploaded', tone: 'success' });
    q.add({ title: 'Invite sent to sam@northwind.co.uk', tone: 'info' });
    q.add({ title: 'Could not save', tone: 'danger', description: 'Check your connection and try again.' });
    return q;
  });
  return <Toaster queue={queue} stack="collapsed" />;
}