Toast

A succinct message that is displayed temporarily.

    Was this example helpful?

    Usage


    Add the Toaster component somewhere in your tree

    import { Toaster } from "@medusajs/ui"
    <Toaster />

    The useToast hook returns a toast function that you can use to display a toast.

    import { useToast } from "@medusajs/ui"
    1const { toast } = useToast()2
    3return (4
    5  <Button 6    onClick={() => 7      toast({ 8        title: "Toast title",9        description: "Toast body",10      })11    }12  >13    Trigger14  </Button>15)

    API Reference

    This component is based on the Radix UI Toast primitives.

    PropTypeDefault
    variant
    "info"
    |"success"
    |"warning"
    |"error"
    |"loading"
    -
    title
    string
    -
    description
    string
    -
    action
    ActionProps
    -
    disableDismiss
    boolean
    false
    Was this section helpful?

    Examples


    Warning

      Was this example helpful?

      Error

        Was this example helpful?

        Success

          Was this example helpful?

          Loading

            Was this example helpful?

            With Action

              Was this example helpful?