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.

    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?