# Toaster `ui-toaster` shows toasts, which are brief notifications stacked in a corner of the viewport. Place one `` per page, usually at the end of ``. It listens for a `toast` event on `document`, so any script or component can show a toast without a reference to the toaster: ```js document.dispatchEvent(new CustomEvent("toast", { detail: { title: "Saved" } })); ``` The toast list is a `popover="manual"` element in the top layer with `aria-live="polite"`, so screen readers announce new toasts. Each toast closes after `duration` milliseconds or when its dismiss button is clicked. This page already has a `ui-toaster`, so the demos below only send `toast` events or call its methods. ```html live Show toast ``` ## Examples ### Destructive `variant: "destructive"` colours the toast for errors. ```html live Show error ``` ### From a component Inside a component, dispatch the same event from a script function. ```html live

Save draft

``` ### Sticky toasts and dismissing from script `duration` in the detail overrides the toaster's default for one toast. `0` keeps it open until it is dismissed. The `toast()` method returns an id that you can pass to `dismiss()`. ```html live

Start upload

Finish upload

``` ### Position and duration Set `position` and `duration` on the page's toaster. Toasts stack from the chosen corner or edge. ```html ``` ## API ### Parts | Part | Slot | Renders | | --- | --- | --- | | `ui-toaster` | | The fixed toast list. Each toast is rendered from the data passed to `toast()` or the `toast` event, so there are no toast parts to write. | ### Attributes | Attribute | Type | Default | Description | | --- | --- | --- | --- | | `position` | `"bottom-right"` \| `"bottom-left"` \| `"bottom-center"` \| `"top-right"` \| `"top-left"` \| `"top-center"` | `"bottom-right"` | Where toasts appear. | | `duration` | number | `4000` | Default milliseconds before a toast closes. `0` keeps toasts open until dismissed. Minimum `0`. | ### Toast options The `detail` of a `toast` event and the argument of `toast()` take the same fields. All are optional. | Field | Type | Default | Description | | --- | --- | --- | --- | | `title` | string | `""` | Bold first line. | | `description` | string | `""` | Muted second line. Hidden when empty. | | `variant` | `"default"` \| `"destructive"` | `"default"` | Destructive toasts use the destructive colour. | | `duration` | number | the `duration` attribute | Milliseconds before this toast closes. `0` keeps it open. | ### Properties and methods | Name | Description | | --- | --- | | `toast(options?)` | Shows a toast and returns its numeric id. | | `dismiss(id)` | Removes the toast with that id. Unknown ids are ignored. | ### Events | Event | Target | Detail | Description | | --- | --- | --- | --- | | `toast` | `document` | toast options | Listened for, not dispatched. Every connected `ui-toaster` shows a toast for each event. | ### CSS parts | Part | Description | | --- | --- | | `region` | The `

`. Destructive toasts have `data-variant="destructive"`. | ### Accessibility - The list is a polite live region, so new toasts are announced without moving focus. - Each toast has a dismiss button with `aria-label="Dismiss"`. - Toasts close on their own. Do not put the only copy of important information or actions in a toast.