Feedback

Toaster

Renders the notifications created by toast(). Mount it once, anywhere in your app.

Install

import { Toaster } from 'vael-ui'

Playground

position

maxVisible

gap

import { toast, Toaster } from 'vael-ui'

<Toaster position="bottom-right" :max-visible="4" :gap="10" />

// anywhere in your app
toast('Saved changes')
toast.success('Upload complete')

Props

Name	Type	Default	Description
`position`	`"bottom-right" \| "top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center"`	`"bottom-right"`
`maxVisible`	`number \| undefined`	`4`	Max toasts shown at once; extras queue until visible slots free.
`gap`	`number \| undefined`	`10`	Spacing between stacked cards, px.
`teleportTo`	`string \| undefined`	`"body"`
`motionCss`	`boolean \| undefined`	`true`	`false` delegates enter/leave animations to `@card-enter`/`@card-leave` events.
`ui`	`Partial<{ root: UiPartValue; toast: UiPartValue; icon: UiPartValue; content: UiPartValue; title: UiPartValue; description: UiPartValue; action: UiPartValue; close: UiPartValue; }> \| undefined`

Slots

Name	Type	Description
`default`	`{ entry: ToastEntry; dismiss: () => void; depth: number; expanded: boolean; }`	Replaces a card's entire inner markup. The library still owns the <li> itself (position/stacking/swipe).

Events

Name	Type	Description
`card-enter`	`[el: Element, done: () => void]`
`card-leave`	`[el: Element, done: () => void]`

Exposed

Name	Type	Description
`toasterEl`	`HTMLElement \| null`