` element. **Toast.Viewport Props:** | Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | render | `Snippet<[props: HTMLAttributes, state: ToastViewportState, children: Snippet \| undefined]>` | - | | | Attribute | Description | | --------------- | ---------------------------------------------- | | `data-expanded` | Indicates toasts are expanded in the viewport. | | CSS Variable | Description | | -------------------------- | -------------------------------------------- | | `--toast-frontmost-height` | Indicates the height of the frontmost toast. | ### Root Groups all parts of an individual toast. Renders a `

` element. **Toast.Root Props:** | Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | toast | `ToastObject` | - | The toast to render. | | swipeDirection | `ToastSwipeDirection \| ToastSwipeDirection[]` | `['down', 'right']` | Direction(s) in which the toast can be swiped to dismiss. | | render | `Snippet<[props: HTMLAttributes, state: ToastRootState, children: Snippet \| undefined]>` | - | | | Attribute | Description | | ---------------------- | ------------------------------------------------------------------------ | | `data-expanded` | Present when the toast is expanded in the viewport. | | `data-limited` | Present when the toast was limited because the toast limit was exceeded. | | `data-swipe-direction` | The direction the toast was swiped. | | `data-swiping` | Present when the toast is being swiped. | | `data-type` | The type of the toast. | | `data-starting-style` | Present when the toast begins animating in. | | `data-ending-style` | Present when the toast is animating out. | | CSS Variable | Description | | -------------------------- | ---------------------------------------------------------------------------- | | `--toast-height` | Indicates the measured natural height of the toast in pixels. | | `--toast-index` | Indicates the index of the toast in the list. | | `--toast-offset-y` | Indicates the vertical pixels offset of the toast in the list when expanded. | | `--toast-swipe-movement-x` | Indicates the horizontal swipe movement of the toast. | | `--toast-swipe-movement-y` | Indicates the vertical swipe movement of the toast. | ### Content A container for the contents of a toast. Renders a `

` element. **Toast.Content Props:** | Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | render | `Snippet<[props: HTMLAttributes, state: ToastContentState, children: Snippet \| undefined]>` | - | | | Attribute | Description | | --------------- | ------------------------------------------------------------------ | | `data-behind` | Present when the toast is behind the frontmost toast in the stack. | | `data-expanded` | Present when the toast viewport is expanded. | ### Title A title that labels the toast. Renders an `

` element. Toast.Title Props: | Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | children | `Snippet` | - | Content. Falls back to the toast's `title`. | | render | `Snippet<[props: HTMLAttributes, state: ToastTitleState, children: Snippet \| undefined]>` | - | | | Attribute | Description | | ----------- | ---------------------- | | `data-type` | The type of the toast. | ### Description A description that describes the toast. Can be used as the default message for the toast when no title is provided. Renders a `
` element. Toast.Description Props: | Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | children | `Snippet` | - | Content. Falls back to the toast's `description`. | | render | `Snippet<[props: HTMLAttributes, state: ToastDescriptionState, children: Snippet \| undefined]>` | - | | | Attribute | Description | | ----------- | ---------------------- | | `data-type` | The type of the toast. | ### Action Performs an action when clicked. Renders a ` ``` For high priority toasts, the `title` and `description` strings are what are used to announce the toast to screen readers. Screen readers do not announce any extra content rendered inside ``, including the `` or `` components, unless they intentionally navigate to the toast viewport. ### `update` method Updates the toast with new options. ```ts title="Usage" toastManager.update(toastId, { description: 'New description' }); ``` Options replace the corresponding values of the toast, including custom `data`, which is replaced as a whole. To derive the update from the current state of the toast, pass a function instead. It receives the current toast and returns the options to apply. Custom `data` is `undefined` when the toast has none yet: ```ts title="Deriving the update from the current toast" toastManager.update(toastId, (prevToast) => ({ data: prevToast.data && { ...prevToast.data, progress: 100 } })); ``` ### `close` method Closes the toast, removing it from the toast list after any animations complete. ```ts title="Usage" toastManager.close(toastId); ``` Or you can close all toasts at once by not passing an ID: ```ts title="Close all toasts" toastManager.close(); ``` ### `promise` method Creates an asynchronous toast with three possible states: `loading`, `success`, and `error`. ```ts title="Description configuration" const promise = toastManager.promise( new Promise((resolve) => { setTimeout(() => resolve('world!'), 1000); }), { // Each are a shortcut for the `description` option loading: 'Loading…', success: (data) => `Hello ${data}`, error: (err) => `Error: ${err}` } ); ``` Each state also accepts the [method options](#toastmanagerupdateoptions) object to granularly control the toast for each state: ```ts title="Method options configuration" const promise = toastManager.promise( new Promise((resolve) => { setTimeout(() => resolve('world!'), 1000); }), { loading: { title: 'Loading…', description: 'The promise is loading.' }, success: { title: 'Success', description: 'The promise resolved successfully.' }, error: { title: 'Error', description: 'The promise rejected.', actionProps: { children: 'Contact support', onclick() { // Redirect to support page } } } } ); ``` See full [`promise` method](#promise-method) ## Additional types ### ToastManagerUpdateOptions ```ts type ToastManagerUpdateOptions = { /** The title of the toast. */ title?: string | Snippet; /** * The type of the toast. Used to conditionally style the toast, * including conditionally rendering elements based on the type. */ type?: string; /** The description of the toast. */ description?: string | Snippet; /** * The amount of time (in ms) before the toast is auto dismissed. * A value of `0` will prevent the toast from being dismissed automatically. * @default 5000 */ timeout?: number; /** * The priority of the toast. * - `low` - The toast will be announced politely. * - `high` - The toast will be announced urgently. * @default 'low' */ priority?: 'low' | 'high'; /** Callback function to be called when the toast is closed. */ onClose?: () => void; /** Callback function to be called when the toast is removed from the list after any animations are complete when closed. */ onRemove?: () => void; /** The props for the action button. `children` is the button's content. */ actionProps?: Omit & { children?: string | Snippet }; /** The props forwarded to the toast positioner element when rendering anchored toasts. */ positionerProps?: ToastManagerPositionerProps; /** Custom data for the toast. */ data?: Data; }; ```