Toast

A toast is a small popover that displays information somewhere in the viewport.

'use client'

import { Button, toast } from '@nerdfish/ui'

export function ToastExample() {
	return <Button onClick={() => toast.message('Hi there')}>Show Toast</Button>
}

Usage

Toaster

This needs to be placed in the root component of your application.

import { Toaster } from '@nerdfish/ui'

<Toaster />

Toast

import { Button, toast } from '@nerdfish/ui'

<Button onClick={() => toast.message('Toast message')}>Show toast</Toast>

Variant

'use client'

import { Button, toast } from '@nerdfish/ui'

export function ToastVariantExample() {
	return (
		<div className="gap-md p-lg flex flex-wrap">
			<Button
				variant="default"
				onClick={() => toast.message('default example')}
			>
				Default Example
			</Button>
			<Button
				variant="success"
				onClick={() => toast.success('Success example')}
			>
				Success Example
			</Button>
			<Button
				variant="secondary"
				onClick={() => toast.warning('Warning example')}
			>
				Warning Example
			</Button>
			<Button variant="secondary" onClick={() => toast.info('Info example')}>
				Info Example
			</Button>
			<Button variant="danger" onClick={() => toast.error('Danger example')}>
				Danger Example
			</Button>
		</div>
	)
}

Actions

'use client'

import { Button, toast } from '@nerdfish/ui'

export function ToastActionExample() {
	return (
		<div className="gap-md p-lg flex flex-wrap">
			<Button
				variant="default"
				onClick={() =>
					toast.message('default example', {
						action: {
							label: 'Default',
							onClick: () => {
								toast.message('Action clicked')
							},
						},
					})
				}
			>
				Default Example
			</Button>
			<Button
				variant="default"
				onClick={() =>
					toast.message('default example', {
						cancel: {
							label: 'Cancel',
							onClick: () => {
								toast.message('Cancel clicked')
							},
						},
					})
				}
			>
				Cancel Example
			</Button>
		</div>
	)
}