Toast | Bearnie

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

Installation

npx bearnie add toast

import Toaster from "@/components/ui/toast/Toaster.astro";

Usage

import { Toaster } from "@/components/ui/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.error('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>

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
class	string	-	Additional CSS classes

toast() function

Option	Type	Default	Description
title	string	-	Toast heading
description	string	-	Toast message
type	default \| success \| error \| warning \| info	default	Toast variant
duration	number	4000	Auto-dismiss time (ms)
action	object	-	Action button config