docs/components/toast
Sections
Components
Utilities
Forms
Hooks
Copy Markdown
Provides feedback on an action.
PreviewCode
Toast
CLIManual
pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/toast
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",
});
Toasts with the same id are deduplicated. If no id is passed, a new toast is created.
PreviewCode
Toast with idToast without id
PreviewCode
Top startTop centerTop end
Bottom startBottom centerBottom end
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.
components/ui/toast.tsx
const baseToaster = createToaster({
placement: "bottom-end",
overlap: true,
max: 4,
});
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.
components/ui/toast.tsx
const baseToaster = createToaster({
placement: "bottom-end",
overlap: true,
max: 4,
});
Use success, error, warning, and info for the matching icon and accent color.
You can also pass type on toast.create.
PreviewCode
SuccessErrorWarningInfo
PreviewCode
Run Promise
PreviewCode
Toast
Control how long a toast stays visible with the duration option.
Use Infinity to keep the toast visible until the user dismisses it.
PreviewCode
2 seconds10 secondsUntil dismissed
Use closable prop to control whether the close button is shown.
PreviewCode
Toast
Toast container. Place once in your app layout.
| Prop | Type | Default |
|---|---|---|
toaster | ReturnType<typeof createToaster> | - |
className | string | - |
Toast instance. Used to create and manage toasts.
| Prop | Type | Default |
|---|---|---|
title | string | - |
description | string | - |
type | `"success" | "error" |
duration | number | 3000 |
closable | boolean | true |
For a complete list of props, see the Ark UI documentation.
[
Previous page
Timer ](/docs/components/timer)[
Next page
Toggle Group ](/docs/components/toggle-group)
On This Page
InstallationUsageDeduplicationPlacementMax toastsExamplesVariantsPromiseActionDurationNot ClosableAPI ReferenceToastertoast