Toast

Installation#

pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/toast

Usage#

import { Toaster } from "@/components/ui/toast";

const toaster = useToast();
 
// add the toaster to the layout
<Toaster toaster={toaster} />
 
// show a toast
toaster.create({
  title: "Show Info Toast",
  description: "This is an info toast",
  type: "info",
});

Deduplication#

Toasts with the same id are deduplicated. If no id is passed, a new toast is created.

Placement#

By default, the toaster is placed at the bottom right corner of the screen.

Update the placement option in createToaster() to customize the toaster position.

const baseToaster = createToaster({
  placement: "bottom-end",
  overlap: true,
  max: 4,
});

Max toasts#

Any extra toasts will be queued and rendered when a toast has been dismissed.

By default, the toaster displays up to 3 toasts. Update the max option in createToaster() to change the maximum number of visible toasts.

const baseToaster = createToaster({
  placement: "bottom-end",
  overlap: true,
  max: 4,
});

Examples#

Variants#

Use success, error, warning, and info for the matching icon and accent color.

You can also pass type on toast.create.

Promise#

Action#

Duration#

Control how long a toast stays visible with the duration option.

Use Infinity to keep the toast visible until the user dismisses it.

Not Closable#

Use closable prop to control whether the close button is shown.

API Reference#

Toaster#

Toast container. Place once in your app layout.

toast#

Toast instance. Used to create and manage toasts.

For a complete list of props, see the Ark UI documentation.