Toast

Temporary notification messages. Built on Radix UI Toast.

Import

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

Setup

Wrap your app with ToastProvider:

<ToastProvider>
  <App />
</ToastProvider>

Usage

function MyComponent() {
  const { toast } = useToast();

  return (
    <Button onClick={() => toast({ title: 'Saved!', type: 'success' })}>
      Save
    </Button>
  );
}

Types

toast({ title: 'Info', type: 'info' });
toast({ title: 'Success', type: 'success' });
toast({ title: 'Warning', type: 'warning' });
toast({ title: 'Error', type: 'error', duration: 5000 });

API — toast()

Prop	Type	Default	Description
title	string	required	Toast message
type	'info' | 'success' | 'warning' | 'error'	'info'	Toast type
duration	number	3000	Auto-dismiss delay (ms)