Base UITransitions

Toast

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

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.

withoutno attribute

with easefuldata-motion="slide-up"

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" />

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.

ToastQueue
button
Toast.Portal
Toast.Viewport
Toast.Rootdata-motion="slide-up"

BaseUiToast
Toast.Provider

Source

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

41 lines

"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>
  )
}

The whole file, read from disk at build time. Both copies above render from it, and the motion prop is the only difference between them.