ComponentsOverlayToast

Toast

Better than react-toastify · 8 types · 6 positions · promise · progress · rich

DefaultSuccessErrorWarningInfoGradientPromiseProgressRichStackPersistentPositions

Types

Live preview

Click any button to fire a toast — Toaster is already mounted in the site layout

App.tsx

tsx

1import { toast } from 'omverse-ui'
2 
3toast('Default notification')
4toast.success('Changes saved!', { description: 'Your profile has been updated' })
5toast.error('Failed to save',   { description: 'Please check your connection' })
6toast.warning('Session expiring', {
7  description: "You'll be logged out in 5 minutes",
8  actions: [{ label: 'Extend', onClick: () => toast.success('Session extended!') }],
9})
10toast.info('New version available', {
11  description: 'v2.1.0 is ready to install',
12  actions: [
13    { label: 'Update now', onClick: () => toast.loading('Updating...') },
14    { label: 'Later', variant: 'ghost', onClick: () => {} },
15  ],
16})
17toast.gradient('🚀 You reached Pro tier!', {
18  description: 'Enjoy unlimited projects and priority support',
19  actions: [{ label: 'View perks', onClick: () => {} }],
20})

Promise toast

Live preview

Shows loading → resolves to success or error automatically

Shows loading while the promise runs, then switches to success or error

App.tsx

tsx

1toast.promise(
new Promise((resolve, reject) => {
  setTimeout(() => {
    Math.random() > 0.3 ? resolve('done') : reject(new Error('Failed'))
  }, 2000)
}),
{
  loading: 'Saving changes...',
  success: 'Changes saved successfully!',
  error: (err) => `Error: ${err instanceof Error ? err.message : 'Unknown error'}`,
}
12)

Progress toast

Live preview

Progress bar updates in real time — auto converts to success on complete

Starts a progress toast that increments every 400 ms

App.tsx

tsx

1// Start a progress toast — returns an ID
2const id = toast.progress('Uploading files...', { description: '0% complete' })
3 
4// Update it as progress changes
5let pct = 0
6const interval = setInterval(() => {
pct += Math.random() * 15
if (pct >= 100) {
  clearInterval(interval)
  toast.update(id, {
    type: 'success',
    title: 'Upload complete!',
    description: '8 files uploaded successfully',
    duration: 4000,
    dismissible: true,
    progress: undefined,
  })
} else {
  toast.update(id, {
    description: `${Math.round(pct)}% complete`,
    progress: Math.round(pct),
  })
}
24}, 400)

Rich toast — avatar + actions

Live preview

Collaboration and social notifications with avatar, description, and action buttons

App.tsx

tsx

1toast.rich({
type: 'info',
title: 'John invited you to a project',
description: 'Design System v2.0 · 5 members',
avatarSrc: 'https://i.pravatar.cc/150?img=1',
avatarName: 'John Doe',
actions: [
  { label: 'Accept',  onClick: () => toast.success('Joined project!') },
  { label: 'Decline', variant: 'ghost', onClick: () => {} },
],
duration: 8000,
12})

Persistent + dismiss

Live preview

Use a stable id to update or dismiss a specific toast at any time

App.tsx

tsx

1// Show a persistent loading toast with a stable ID
2toast.loading('Connecting to server...', { id: 'persistent' })
3 
4// Dismiss it later by ID
5toast.dismiss('persistent')
6 
7// Dismiss every visible toast
8toast.dismissAll()

Stack — hover to expand

Live preview

Multiple toasts stack — hover over them to expand the stack

Toasts stack with a collapsed view — hover to expand

App.tsx

tsx

1toast.success('Profile updated successfully')
2setTimeout(() => toast.error('Payment failed', { description: 'Card declined' }), 100)
3setTimeout(() => toast.info('New message from Alice'), 200)
4// Multiple toasts stack — hover over them to expand

Position

Live preview

Set position on the Toaster component in your app root

Toast position is controlled by the Toaster component. Place it once in your app root with your preferred position.

top-lefttop-centertop-rightbottom-leftbottom-centerbottom-right

layout.tsx

tsx

1// Place <Toaster> once at your app root and set position there
2import { Toaster } from 'omverse-ui'
3 
4export default function RootLayout({ children }) {
5  return (
6    <>
7      {children}
8      <Toaster position="bottom-right" />
9    </>
10  )
11}

Toast options

Props

PropTypeDefaultDescription

titlestring—Toast message — first argument to toast()

descriptionstringundefinedSecondary line of text below the title

durationnumber4000Auto-dismiss delay in ms. Pass Infinity to persist until dismissed

actionsToastAction[]undefinedAction buttons rendered inside the toast

avatarSrcstringundefinedAvatar image URL — shown in rich toasts

avatarNamestringundefinedAvatar fallback name — used for initials

progressnumberundefined0–100 progress value for toast.progress() toasts

dismissiblebooleantrueShows a close button on the toast

idstringautoStable ID — reuse to update or dismiss a specific toast

Toaster props

Props

PropTypeDefaultDescription

maxToastsnumber5Maximum number of toasts visible at once before older ones are removed