Toast

Transient notifications for info, success, warning, and error states, with action buttons and stacked positioning.

Loading preview

Examples

Practical examples and common states for the same installable component.

Info

Low-urgency notification for background state changes.

examples/toast-info.tsx
import { Toast } from "@/components/wensity/toast";
export function InfoToast() {
return (
<Toast
variant="info"
title="Source sync started"
description="Generated manifests will update in a few seconds."
/>
);
}

Success

Confirmation with a calm positive accent.

examples/toast-success.tsx
import { Toast } from "@/components/wensity/toast";
export function SuccessToast() {
return (
<Toast
variant="success"
title="API token copied"
description="Use it with the Wensity CLI on this machine."
/>
);
}

Warning

A recoverable state that should still be noticed.

examples/toast-warning.tsx
import { Toast } from "@/components/wensity/toast";
export function WarningToast() {
return (
<Toast
variant="warning"
title="Storage URL missing"
description="Downloads stay disabled until the archive URL is set."
/>
);
}

Error

Failure state with assertive role and clear hierarchy.

examples/toast-error.tsx
import { Toast } from "@/components/wensity/toast";
export function ErrorToast() {
return (
<Toast
variant="error"
title="Checkout session failed"
description="Refresh pricing variants and try the request again."
/>
);
}

Action

Notification with a right-side follow-up action.

Requires: button

examples/toast-action.tsx
import { IconArrowRight } from "@tabler/icons-react";
import { Toast } from "@/components/wensity/toast";
import { Button } from "@/components/wensity/button";
export function ActionToast() {
return (
<Toast
variant="action"
title="Deployment needs review"
description="A dependency changed in the generated registry output."
action={
<Button
size="sm"
variant="secondary"
rightIcon={<IconArrowRight />}
rightIconMotion="arrow"
>
View changes
</Button>
}
/>
);
}

Placement

Place toast viewports in any corner of the page.

examples/toast-placement.tsx
import { Toast, ToastViewport } from "@/components/wensity/toast";
export function ToastPlacements() {
return (
<>
<ToastViewport placement="top-left">
<Toast
variant="info"
title="Top left"
description="Use top-left for low-priority workspace updates."
/>
</ToastViewport>
<ToastViewport placement="bottom-right">
<Toast
variant="success"
title="Bottom right"
description="Use bottom-right for completion feedback."
/>
</ToastViewport>
</>
);
}

Props

PropTypeDefaultDescription
variant"info" | "success" | "warning" | "error" | "action""info"Status colour recipe and the default icon that comes with it.
titleReact.ReactNode-Bold heading line of the toast.
descriptionReact.ReactNode-Body copy under the title.
iconReact.ReactNode-Overrides the icon the variant supplies.
actionReact.ReactNode-Trailing slot for a button or link.
onDismiss() => void-When set, renders a dismiss button and calls this on press.
dismissLabelstring"Dismiss notification"Accessible label for the dismiss button.