Toast | Bearnie

<Button onclick="toast('Event has been created.')">
  Show Toast
</Button>

Installation

npx bearnie add toast

Usage

import { Toaster } from "@/components/bearnie/toast"

toast("Event has been created.")

Examples

With title and description

<Button onclick="toast({ title: 'Scheduled', description: 'Friday, February 10, 2023 at 5:57 PM' })">
  Show Toast
</Button>

Success

<Button onclick="toast.success('Changes saved successfully!')">
  Show Success Toast
</Button>

Error

<Button onclick="toast.destructive('Something went wrong.')">
  Show Error Toast
</Button>

Warning

<Button onclick="toast.warning('Your session is about to expire.')">
  Show Warning Toast
</Button>

Info

<Button onclick="toast.info('A new update is available.')">
  Show Info Toast
</Button>

Promise

Shows a loading toast that turns into a success or error toast when the promise settles.

toast.promise(saveSettings(), {
  loading: "Saving…",
  success: "Settings saved.",
  error: (err) => `Could not save: ${err.message}`,
})

With action

<Button onclick="toast({ title: 'Undo action', description: 'Message deleted.', action: { label: 'Undo', onClick: () => console.log('Undone!') } })">
  Show Toast with Action
</Button>

Anatomy

Toaster - The container that renders toasts (add once to layout)

Props

Toaster

Prop	Type	Default	Description
position	top-left \| top-center \| top-right \| bottom-left \| bottom-center \| bottom-right	bottom-right	Toast position
max	number	5	Maximum toasts shown at once; the oldest is dismissed when exceeded
class	string	-	Additional CSS classes

toast() function

Option	Type	Default	Description
title	string	-	Toast heading
description	string	-	Toast message
type	default \| success \| destructive \| warning \| info	default	Toast variant
duration	number	4000	Auto-dismiss time (ms). Hovering a toast pauses the timer
action	object	-	Action button config

Helpers: toast.success(), toast.destructive(), toast.warning(), toast.info(), toast.promise(promise, { loading, success, error }), and toast.dismiss(el). The success and error messages accept a string, an options object, or a function receiving the resolved value / rejection reason.