Vibes logo

Toaster

Installation

Add the following Soul components

The toaster component uses the alert component. Make sure you have added it to your project.

Install the following dependencies

npm install sonner

Copy and paste the following code into your project

primitives/toaster/index.tsx

'use client';import { ReactNode } from 'react';import { ComponentProps } from 'react';import { Toaster as Sonner, toast as SonnerToast } from 'sonner';import { Alert } from '@/vibes/soul/primitives/alert';export type ToasterProps = ComponentProps<typeof Sonner>;interface ToastOptions {  action?: {    label: string;    onClick: () => void;  };  description?: string;  position?: ToasterProps['position'];  dismissLabel?: string;}export const Toaster = ({ ...props }: ToasterProps) => {  return (    <Sonner      toastOptions={{        unstyled: true,        classNames: {          toast: 'group focus-visible:ring-0',        },      }}      {...props}    />  );};export const toast = {  success: (message: ReactNode, options?: ToastOptions) => {    const position = options?.position;    const toastId = SonnerToast(      <Alert        message={message}        onDismiss={() => SonnerToast.dismiss(toastId)}        variant="success"        {...options}      />,      { position },    );  },  error: (message: ReactNode, options?: ToastOptions) => {    const position = options?.position;    const toastId = SonnerToast(      <Alert        message={message}        onDismiss={() => SonnerToast.dismiss(toastId)}        variant="error"        {...options}      />,      { position },    );  },  warning: (message: ReactNode, options?: ToastOptions) => {    const position = options?.position;    const toastId = SonnerToast(      <Alert        message={message}        onDismiss={() => SonnerToast.dismiss(toastId)}        variant="warning"        {...options}      />,      { position },    );  },  info: (message: ReactNode, options?: ToastOptions) => {    const position = options?.position;    const toastId = SonnerToast(      <Alert        message={message}        onDismiss={() => SonnerToast.dismiss(toastId)}        variant="info"        {...options}      />,      { position },    );  },};

Usage

'use client';import { toast } from '@/vibes/soul/primitives/toaster';function Usage() {  return (      <button          onClick={() =>          toast.success('Success', {                  description: 'Description of toast',                  action: { label: 'Undo', onClick: () => console.log('undo') },              })          }      >          Toast with Options    </button>  );}

API Reference

This component uses the Sonner toast component. For more information, please refer to the Sonner documentation.

ToastOptions

PropTypeDefault
description
string;
position
'top-left | 'top-center | 'top-right | 'bottom-left | 'bottom-center | 'bottom-right'
dismissLabel
string;
action
{ label: string, onClick: () => void }