◇

Toast

7 parts

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  ToastProvider,
  ToastRoot,
  ToastTitle,
  ToastDescription,
  ToastAction,
  ToastClose,
  ToastViewport,
} from '@robonen/primitives/toast';

<ToastProvider>
  <ToastRoot />
  <ToastTitle />
  <ToastDescription />
  <ToastAction />
  <ToastClose />
  <ToastViewport />
</ToastProvider>

API Reference

ToastProvider

Provider

Prop	Type	Default	Description
`label`?	`string`	`'Notifications'`	Accessible label for the toast region.
`duration`?	`number`	`5000`	Auto-dismiss duration in ms. Use `Infinity` to disable auto-dismiss.
`swipeDirection`?	`SwipeDirection`	`'right'`	Swipe direction to dismiss.
`swipeThreshold`?	`number`	`50`	Minimum swipe distance before a dismiss gesture is recognised.

ToastRoot

Root

Prop	Type	Default	Description
`duration`?	`number`	—	Override the provider's auto-dismiss duration. Use `Infinity` to disable.
`type`?	`'foreground' \| 'background'`	`'background'`	Toast type — controls the `aria-live` politeness.

ToastTitle

Title

No props or events — renders its element and forwards attributes.

ToastDescription

Description

No props or events — renders its element and forwards attributes.

ToastAction

Action

Prop	Type	Default	Description
`altText`	`string`	—	Accessible description for screen readers (required). Describes what happens when the user triggers the action.

ToastClose

No props or events — renders its element and forwards attributes.

ToastViewport

Viewport

Prop	Type	Default	Description
`label`?	`string`	—	Accessible label for the toast region. Overrides the provider label.
`hotkey`?	`string[]`	`['F8']`	Keyboard shortcut to focus the viewport.