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?