Toast

A succinct message that is displayed temporarily.

Dependencies

Installation

npx @kosori/cli add components toast

Add Toaster component

Add the <Toaster /> component to the root of your app.

app/layout.tsx

import { Toaster } from '~/components/ui/toast'; 
 
export default const RootLayout = ({ children }) => {
  return (
    <html lang='en'>
      <head />
      <body>
        <main>{children}</main>
        <Toaster /> // [!code highlight]
      </body>
    </html>
  );
}

Usage

import { useToast } from '~/components/ui/toast';

export const ToastDemo = () => {
  const { toast } = useToast(); 
 
  return (
    <Button
      onClick={() => {
        toast({
          title: 'Scheduled: Catch up',
          description: 'Friday, February 10, 2023 at 5:57 PM',
        });
      }}
    >
      Show Toast
    </Button>
  );
};

To display multiple toasts at the same time, you can update the TOAST_LIMIT in toast.tsx.

Reference

Prop	Type	Default
`intent`	`enum`	`default`

Toast

Installation

Add Toaster component

Usage

Reference

Examples

Intents

Simple

With Title

With Action

On this page