Toast

A succinct message displayed temporarily to provide feedback about an action. Supports multiple variants and auto-dismiss.

View Source

#Installation

npx @dinachi/cli@latest add toast

#Usage

tsx

import { Toast, ToastProvider, ToastViewport, ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useToastManager } from '@/components/ui/toast'

#Examples

Default Toast

A basic toast notification

Toast Variants

Different toast variants and types

#API Reference

Prop	Type	Default	Description
variant	'default' \| 'destructive' \| 'success' \| 'warning' \| 'loading'	'default'	The visual style variant of the toast
limit	number	3	The maximum number of toasts displayed at once
timeout	number	5000	The duration in milliseconds before the toast auto-dismisses
swipeDirection	Array<'up' \| 'down' \| 'left' \| 'right'>	['down', 'right']	The directions in which the toast can be swiped to dismiss
title	string	—	The title text of the toast
description	string	—	The description text of the toast