Toast

Transient notifications for status, warnings, errors, and actions.

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>
</>
);
}