Docs/Toast

Toast

Toast notification with variants. Position managed by consumer.

Usage

tsx

1import { Toast, ToastTitle, ToastDescription, ToastClose } from '@storm-ds/ui'
2
3<Toast>
4  <ToastTitle>Success</ToastTitle>
5  <ToastDescription>Your changes were saved.</ToastDescription>
6  <ToastClose />
7</Toast>

Variants

Default

This is a default toast message.

Error

Something went wrong.

All Variants

Success

Your changes have been saved.

Warning

Your session is about to expire.

Info

A new update is available.

tsx

1<Toast variant="success">
2  <ToastTitle>Success</ToastTitle>
3  <ToastDescription>Operation completed successfully.</ToastDescription>
4  <ToastClose />
5</Toast>
6
7<Toast variant="warning">
8  <ToastTitle>Warning</ToastTitle>
9  <ToastDescription>Please review your input.</ToastDescription>
10  <ToastClose />
11</Toast>
12
13<Toast variant="info">
14  <ToastTitle>Info</ToastTitle>
15  <ToastDescription>Here is some useful information.</ToastDescription>
16  <ToastClose />
17</Toast>

With Action

File deleted

The file has been moved to trash.

tsx

1<Toast>
2  <ToastTitle>File deleted</ToastTitle>
3  <ToastDescription>The file has been removed.</ToastDescription>
4  <ToastAction>Undo</ToastAction>
5  <ToastClose />
6</Toast>

Props

Prop	Type	Default	Description
variant	'default' \| 'destructive' \| 'success' \| 'warning' \| 'info'	'default'	Toast style
className	string	-	Custom classes

Use with AI

Create a Next.js component using Storm UI's Toast. Import: `import { Toast, ToastTitle, ToastDescription, ToastClose, ToastAction } from '@storm-ds/ui'`. Uses role="alert". Variants: default, destructive, success, warning, info. Use ToastAction for actionable toasts (e.g. undo). Position and animation managed by consumer. Example: `<Toast variant="success"><ToastTitle>Done</ToastTitle><ToastDescription>Saved.</ToastDescription><ToastClose /></Toast>`

Tabs

Sonner