Toast

Installation

npx neobrutal add toast

Required setup

Before calling toast.*, mount Toaster once in your root layout.

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

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

Usage

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>

Examples

Types

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

Action button

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

Promise

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

Position

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

API Reference