Toast

A succinct message that is displayed temporarily. Supports multiple types, action buttons, promise-based flows, and configurable positioning.

Installation

npx neobrutal add toast

import { toast } from "@/components/ui/toast"
import { Button } from "@/components/ui/button"

<Button
  variant="neutral"
  onClick={() =>
    toast.info("Event has been created", {
      title: "Success",
    })
  }
>
  Basic toast
</Button>

Four built-in types, each with its own color.

Pass actionProps to render a neobrutalist action button inside the toast.

Show a loading state that automatically transitions to success or error when the promise settles.

Set the toast position by passing a position prop to the Toaster component in your root layout.

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

// In your root layout
<Toaster position="top-right" />

Prop	Type	Default	Description
position	"top-left" \| "top-right" \| "top-center" \| "bottom-left" \| "bottom-right" \| "bottom-center"	"bottom-right"	Screen position for the toast stack.

Prop	Type	Default	Description
toast.success	(message: string, options?: ToastOptions) => string	-	Show a success toast. Returns the toast id.
toast.error	(message: string, options?: ToastOptions) => string	-	Show an error toast. Returns the toast id.
toast.info	(message: string, options?: ToastOptions) => string	-	Show an info toast. Returns the toast id.
toast.warning	(message: string, options?: ToastOptions) => string	-	Show a warning toast. Returns the toast id.
toast.promise	(promise, options) => Promise<Value>	-	Show a loading toast that transitions to success/error based on promise resolution.
toast.dismiss	(toastId: string) => void	-	Dismiss a specific toast by id.

Prop	Type	Default	Description
title	ReactNode	-	Bold heading displayed at the top of the toast.
description	ReactNode	-	Secondary text below the title (auto-set by the first argument of toast methods).
timeout	number	5000	Auto-dismiss delay in ms. Use 0 to disable.
priority	"low" \| "high"	"low"	Aria announcement urgency (polite vs assertive).
actionProps	React.ComponentPropsWithoutRef<'button'>	-	Props spread onto the action button (children, onClick, etc.).
onClose	() => void	-	Callback fired when the toast begins closing.
onRemove	() => void	-	Callback fired after the toast finishes its exit animation.

Examples

Four built-in types, each with its own color.

Pass actionProps to render a neobrutalist action button inside the toast.

Show a loading state that automatically transitions to success or error when the promise settles.

Set the toast position by passing a position prop to the Toaster component in your root layout.

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

// In your root layout
<Toaster position="top-right" />

API Reference

Toaster

Prop	Type	Default	Description
position	"top-left" \| "top-right" \| "top-center" \| "bottom-left" \| "bottom-right" \| "bottom-center"	"bottom-right"	Screen position for the toast stack.

Toast methods

Prop	Type	Default	Description
toast.success	(message: string, options?: ToastOptions) => string	-	Show a success toast. Returns the toast id.
toast.error	(message: string, options?: ToastOptions) => string	-	Show an error toast. Returns the toast id.
toast.info	(message: string, options?: ToastOptions) => string	-	Show an info toast. Returns the toast id.
toast.warning	(message: string, options?: ToastOptions) => string	-	Show a warning toast. Returns the toast id.
toast.promise	(promise, options) => Promise<Value>	-	Show a loading toast that transitions to success/error based on promise resolution.
toast.dismiss	(toastId: string) => void	-	Dismiss a specific toast by id.

ToastOptions

Prop	Type	Default	Description
title	ReactNode	-	Bold heading displayed at the top of the toast.
description	ReactNode	-	Secondary text below the title (auto-set by the first argument of toast methods).
timeout	number	5000	Auto-dismiss delay in ms. Use 0 to disable.
priority	"low" \| "high"	"low"	Aria announcement urgency (polite vs assertive).
actionProps	React.ComponentPropsWithoutRef<'button'>	-	Props spread onto the action button (children, onClick, etc.).
onClose	() => void	-	Callback fired when the toast begins closing.
onRemove	() => void	-	Callback fired after the toast finishes its exit animation.