Toast

Toast notifications built on Radix UI Toast primitives. Provides non-intrusive feedback messages that appear temporarily and can be dismissed.

Basic Toast

Preview

    Variants

    Preview

      With Action

      Preview

        Toast Props

        PropTypeDefaultDescription
        variant"default" | "success" | "warning" | "destructive""default"Visual style variant of the toast.
        durationnumber5000Auto-dismiss duration in milliseconds.
        openboolean-Controlled open state of the toast.
        onOpenChange(open: boolean) => void-Callback when the open state changes.

        Sub-Components

        PropTypeDefaultDescription
        ToastProvidercomponent-Wraps the toast system. Place once at the root of your app.
        ToastViewportcomponent-Renders the toast container. Place inside the provider, typically at app root.
        ToastTitlecomponent-Title text for the toast notification.
        ToastDescriptioncomponent-Description text for the toast notification.
        ToastActioncomponent-Action button rendered inside the toast. Requires altText prop for accessibility.
        ToastClosecomponent-Close button with an X icon. Appears on hover by default.

        Accessibility

        • Built on Radix UI Toast which uses role="status" and aria-live="polite" for screen reader announcements
        • ToastAction requires an altText prop that describes the action for screen readers
        • Toasts support swipe-to-dismiss on touch devices
        • Focus management is handled automatically by the Radix primitives
        • ToastClose renders a close button accessible via keyboard