# Toast

Host: Base UI. Path: transitions. Preset: `slide-up`. Built against [@base-ui/react 1.5.0](https://www.npmjs.com/package/@base-ui/react/v/1.5.0).

Manager-driven rather than state-driven, but the popup still writes the same attributes.

The page this file mirrors mounts the component twice, once with the attribute and once without, so the only difference between the two is the library.

Upstream documentation: [Base UI documentation](https://base-ui.com/react/components/toast)

The same component in other hosts: [Radix UI](/radix/toast.md).

## Where the attribute goes

The parts this demo composes, and the value each one carries. Everything inside an animated part is that part's content, so the tree stops there.

```text
button
Toast.Portal
  Toast.Viewport
    Toast.Root  data-motion="slide-up"
Toast.Provider
```

## How the match works

| Step | Value |
| --- | --- |
| host writes | `data-open / data-closed, plus data-ending-style` |
| easeful matches | `[data-motion~="slide-up"][data-ending-style]` |
| what runs | `transition: opacity, translate 150ms` |
| you write | `<Toast.Root data-motion="slide-up" />` |

## Every value that works here

Every value the manifest allows on this host, single presets and the pairs that compose. The first is what this component ships with. Both stages are the same component, so anything that changes between them is the attribute.

| Value | Link |
| --- | --- |
| `slide-up` | the default |
| `fade` | [fade](/base-ui/toast#motion=fade) |
| `scale-fade` | [scale-fade](/base-ui/toast#motion=scale-fade) |
| `fade slide-up` | [fade slide-up](/base-ui/toast#motion=fade%20slide-up) |
| `scale-fade slide-up` | [scale-fade slide-up](/base-ui/toast#motion=scale-fade%20slide-up) |

## Source

`apps/docs/components/demos/base-ui/toast.tsx`

```tsx
"use client"

import { Toast } from "@base-ui/react/toast"
import type { DemoProps } from "@/components/demos/props"

/* Toast is manager-driven rather than state-driven, so it needs a provider and
 * an inner component that can call the hook. */
function ToastQueue({ motion }: DemoProps) {
  const manager = Toast.useToastManager()
  return (
    <>
      <button
        type="button"
        className="btn"
        onClick={() =>
          manager.add({ title: "Deployed", description: "Your build finished and is live." })
        }
      >
        Send a toast
      </button>
      <Toast.Portal>
        <Toast.Viewport className="toast-viewport">
          {manager.toasts.map((toast) => (
            <Toast.Root key={toast.id} toast={toast} className="panel" data-motion={motion}>
              <Toast.Title className="panel__title" />
              <Toast.Description className="panel__body" />
            </Toast.Root>
          ))}
        </Toast.Viewport>
      </Toast.Portal>
    </>
  )
}

export function BaseUiToast({ motion }: DemoProps) {
  return (
    <Toast.Provider>
      <ToastQueue motion={motion} />
    </Toast.Provider>
  )
}
```