Stepwise UI

Toast

Global notification toasts in four types - success, warning, error, and info. Slides up from the bottom center, auto-dismisses after 5 seconds, and renders via a portal so it sits above everything else.

Installation

npx stepwise-ui add toast

Setup

Add <Toaster /> once in your app root. Then call toast.* anywhere - no context provider needed.
// Add <Toaster /> once at your app root (e.g. layout.tsx)
import { Toaster } from '@/components/stepwise/toast'

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Toaster />
    </>
  )
}

Types

Click the buttons to see each toast type.
import { toast } from '@/components/stepwise/toast'

toast.success('Changes saved', { description: 'Your profile has been updated.' })
toast.warning('Storage almost full', { description: 'You have used 90% of your storage.' })
toast.error('Upload failed', { description: 'The file could not be uploaded.' })
toast.info('New update available', { description: 'Version 2.4.0 is ready to install.' })

With action

Pass an action object to replace the dismiss × with a labeled button. Clicking it runs onClick and auto-dismisses the toast.
// With an action button (replaces the dismiss ×)
toast.show({
  type: 'success',
  title: 'Message sent',
  description: 'Your message was delivered.',
  action: {
    label: 'Undo',
    onClick: () => { /* undo logic */ },
  },
})

Sound

Set sound: true to play a toaster "pop + ding" when the toast appears - synthesized with the Web Audio API, so there are no audio files to ship. It is off by default; toggle it per toast.
// Opt in to a toaster "pop + ding" when the toast appears.
// Synthesized with the Web Audio API - no audio files.
toast.success('Toast is ready!', {
  description: 'Pops up with a toaster ding.',
  sound: true,
})

Dismiss

Toasts auto-dismiss after 5 seconds (configurable via duration). toast.show() returns an id for programmatic dismissal.
// Default: shows a × dismiss button
toast.info('Notification', { description: 'Click × to dismiss.' })

// Programmatic dismiss
const id = toast.show({ type: 'info', title: 'Loading…', duration: 99999 })
// later…
toast.dismiss(id)

Props

toast.show() accepts:
PropTypeDescription
type
"success" | "warning" | "error" | "info"
Icon and color scheme.
title
string
Main message.
description
string
Optional secondary line.
action
{ label: string; onClick: () => void }
Adds an action button. Replaces the dismiss ×.
sound
boolean
Play a toaster pop + ding on appear. Default: false.
duration
number
Auto-dismiss delay in ms. Default: 5000.