Reka UI logoReka
backdrop
PropDefaultType
as
'li'
AsTag | Component

The element or component this component should render as. Can be overwritten by asChild.

asChild
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read our Composition guide for more details.

defaultOpen
true
boolean

The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.

duration
number

Time in milliseconds that toast should remain visible for. Overrides value given to ToastProvider.

forceMount
boolean

Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.

open
boolean

The controlled open state of the dialog. Can be bind as v-model:open.

type
'foreground'
'foreground' | 'background'

Control the sensitivity of the toast for accessibility purposes.

For toasts that are the result of a user action, choose foreground. Toasts generated from background tasks should use background.

EmitPayload
escapeKeyDown
[event: KeyboardEvent]

Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.

pause
[]

Event handler called when the dismiss timer is paused. This occurs when the pointer is moved over the viewport, the viewport is focused or when the window is blurred.

resume
[]

Event handler called when the dismiss timer is resumed. This occurs when the pointer is moved away from the viewport, the viewport is blurred or when the window is focused.

swipeCancel
[event: SwipeEvent]

Event handler called when swipe interaction is cancelled. It can be prevented by calling event.preventDefault.

swipeEnd
[event: SwipeEvent]

Event handler called at the end of a swipe interaction. It can be prevented by calling event.preventDefault.

swipeMove
[event: SwipeEvent]

Event handler called during a swipe interaction. It can be prevented by calling event.preventDefault.

swipeStart
[event: SwipeEvent]

Event handler called when starting a swipe interaction. It can be prevented by calling event.preventDefault.

update:open
[value: boolean]

Event handler called when the open state changes

Slots (default)Payload
open
boolean

Current open state

remaining
number

Remaining time (in ms)

duration
number

Total time the toast will remain visible for (in ms)