Toast
A succinct message that is displayed temporarily.
Features
- Automatically closes.
- Pauses closing on hover, focus and window blur.
- Supports hotkey to jump to toast viewport.
- Supports closing via swipe gesture.
- Exposes CSS variables for swipe gesture animations.
- Can be controlled or uncontrolled.
Install
Import
API
Provider
| Props | Type | Default |
|---|---|---|
duration | number | 5000 |
label | string | Notification |
swipeDirection | SwipeDirection | 'right' |
swipeThreshold | number | 50 |
Viewport
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | ol |
asChild | boolean | false |
hotkey | string[] | () => ['F8'] |
label | string | ((hotkey: string) => string) | Notifications ({hotkey}) |
Root
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | li |
asChild | boolean | false |
defaultOpen | boolean | true |
duration | number | 0 |
forceMount | boolean | false |
open | boolean | undefined |
type | 'foreground' | 'background' | foreground |
| Event | Type |
|---|---|
escapeKeyDown | [_event: KeyboardEvent] |
pause | [] |
resume | [] |
swipeCancel | [_event: SwipeEvent] |
swipeEnd | [_event: SwipeEvent] |
swipeMove | [_event: SwipeEvent] |
swipeStart | [_event: SwipeEvent] |
update:open | [_value: boolean] |
| Slot (default) | Type |
|---|---|
remaining | number |
| Data attribute | Value |
|---|---|
[data-state] | 'open' | 'closed' |
[data-swipe] | 'start' | 'move' | 'cancel' | 'end' |
[data-swipe-direction] | 'up' | 'down' | 'left' | 'right' |
Title
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
Description
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
Action
| Props | Type | Default |
|---|---|---|
altText | string | - |
as | AsTag | Component | button |
asChild | boolean | false |
Close
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | button |
asChild | boolean | false |