Components / Feedback

Toast

A timed, announced notification with variants, actions, pause behavior, and a managed viewport queue.
Available in @kape/react

Interactive example

Use keyboard and pointer input to exercise the public behavior.

    Installation and usage

    Import the owned Kape primitives and the component stylesheet once.

    Toast imports
    import { ToastProvider, Toast, ToastTitle, ToastDescription, ToastAction, ToastViewport } from "@kape/react";
import "@kape/react/styles.css";

    Props

    PropTypePurpose
    open / defaultOpenbooleanControlled or initial state
    durationnumberVisible time in milliseconds
    variantinfo | success | dangerNotification intent

    Accessibility

    Semantics, focus, naming, disabled states, and announcements are preserved by the Kape wrapper and covered by component tests. Supply meaningful visible labels and descriptions.

    Keyboard

    F8
    Moves focus to the toast viewport.
    Tab
    Moves through toast actions.
    Escape
    Dismisses the focused toast.

    Composition and limitations

    Compose the exported parts directly; styling implementation details and the underlying headless library are not public API.

    SourceTests