Toast

A message that appears on the screen to provide feedback on an action.

    Anatomy

    To set up the toast correctly, you’ll need to understand its anatomy and how we name its parts.

    Each part includes a data-part attribute to help identify them in the DOM.

    Examples

    To use the Toast component in your application, you need to set it up using the createToaster hook. This hook manages the placement and grouping of toasts, and provides a toast object needed to create toast notification.

    To create a basic Toast, use the toast.create method to display a notification.

    Configuring Toast

    To configure the Toast component, you can pass various options to the toast.create method. These options include title, description, type, duration, and removeDelay:

    Custom Rendered Toast

    For cases where you need more flexibility in rendering, the Toast component offers the ability to use a custom render function. This allows you to customize the content of the toast:

    API Reference

    Root

    PropTypeDefault
    asChild
    boolean

    Group

    PropTypeDefault
    asChild
    boolean

    Title

    PropTypeDefault
    asChild
    boolean

    Createer

    PropTypeDefault
    placement
    Placement
    render
    (api: MachineApi<PropTypes>) => Element
    count
    number
    dir
    'ltr' | 'rtl'"ltr"
    duration
    number
    getRootNode
    () => ShadowRoot | Node | Document
    gutter
    string
    id
    string
    max
    number
    offsets
    string | Record<'left' | 'right' | 'top' | 'bottom', string>
    pauseOnInteraction
    boolean
    pauseOnPageIdle
    boolean
    removeDelay
    number
    zIndex
    number

    Description

    PropTypeDefault
    asChild
    boolean

    CloseTrigger

    PropTypeDefault
    asChild
    boolean