Toast Stack | Notes | Ezekiel Adewumi

Getting Started

Toast Stack is a toast component for React.

Installation

Install the component from your command line.

// Terminal
npm install toast-stack

Add Toaster to your app

It can be placed anywhere, even in server components such as layout.tsx.

// layout.tsx
import 'toast-stack/styles.css'
import { Toaster } from 'toast-stack'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

Render a toast

You can call it with just a string. That string becomes the toast message.

// my-component.tsx
'use client'

import { toast } from 'toast-stack'

export default function MyComponent() {
  return (
    <button onClick={() => toast('Event has been created')}>
      Show toast
    </button>
  )
}

Toast

Description

You can add a description below the message by passing it as an option.

// description.tsx
'use client'

import { toast } from 'toast-stack'

export default function Description() {
  return (
    <button onClick={() => {
      toast('Event has been created', {
        description: 'Monday, January 3rd at 6:00pm',
      })
    }}>
      Show toast
    </button>
  )
}

Success

Renders a checkmark icon in front of the message.

// success.tsx
'use client'

import { toast } from 'toast-stack'

export default function Success() {
  return (
    <button onClick={() => {
      toast.success('Event has been created')
    }}>
      Show toast
    </button>
  )
}

Error

Renders an error icon in front of the message.

// error.tsx
'use client'

import { toast } from 'toast-stack'

export default function Error() {
  return (
    <button onClick={() => {
      toast.error('Event has not been created')
    }}>
      Show toast
    </button>
  )
}

Warning

Renders a warning icon in front of the message.

// warning.tsx
'use client'

import { toast } from 'toast-stack'

export default function Warning() {
  return (
    <button onClick={() => {
      toast.warning('Storage is almost full')
    }}>
      Show toast
    </button>
  )
}

Info

Renders an info icon in front of the message.

// info.tsx
'use client'

import { toast } from 'toast-stack'

export default function Info() {
  return (
    <button onClick={() => {
      toast.info('Update available')
    }}>
      Show toast
    </button>
  )
}

Action

Renders a primary button. Clicking it closes the toast and fires the onClick callback.

// action.tsx
'use client'

import { toast } from 'toast-stack'

export default function Action() {
  return (
    <button onClick={() => {
      toast('Event deleted', {
        action: {
          label: 'Undo',
          onClick: () => console.log('Undo'),
        },
      })
    }}>
      Show toast
    </button>
  )
}

Cancel

Renders a secondary button. Clicking it closes the toast and fires the onClick callback.

// cancel.tsx
'use client'

import { toast } from 'toast-stack'

export default function Cancel() {
  return (
    <button onClick={() => {
      toast('Unsaved changes', {
        cancel: {
          label: 'Dismiss',
          onClick: () => console.log('Dismissed'),
        },
      })
    }}>
      Show toast
    </button>
  )
}

Other

Duration

Each toast auto-dismisses after 4 seconds by default. You can override it per toast.

// duration.tsx
'use client'

import { toast } from 'toast-stack'

export default function Duration() {
  return (
    <button onClick={() => {
      toast('Event has been created', {
        duration: 10000,
      })
    }}>
      Show toast
    </button>
  )
}

Persistent

If you want a toast to stay on screen until the user dismisses it, set the duration to Infinity.

// persistent.tsx
toast('This toast will stay on screen forever', {
  duration: Infinity,
})

Dismissing toasts programmatically

To remove a toast programmatically use toast.dismiss(id). The toast() function returns the id of the toast.

// dismiss.tsx
const toastId = toast('Event has been created')

toast.dismiss(toastId)

You can also dismiss all toasts at once by calling toast.dismiss() without an id.

// dismiss-all.tsx
toast.dismiss()

Styling

The default styles are shipped in toast-stack/styles.css. You can override any class in your own CSS.

Card

Property	Value
Background	`#242424`
Border	`1px solid rgba(255,255,255,0.07)`
Border radius	`8px`
Shadow	`0 4px 16px rgba(0,0,0,0.25)`
Font	Inter, system fallback

Types

Type	Icon
`success`	Green circle `#16a34a`
`error`	Red circle `#dc2626`
`warning`	Orange circle `#d97706`
`info`	Blue circle `#2563eb`

API Reference

toast()

Prop	Type	Default
`description`	`string`	-
`duration`	`number`	`4000`
`action`	`{ label: string, onClick: () => void }`	-
`cancel`	`{ label: string, onClick: () => void }`	-

Toaster

Prop	Type	Default
`position`	`string`	`bottom-center`