NotificationToast

Apply to toast.custom()'s options.className to neutralize Sonner's

All Variants

Usage

import { NotificationToast } from '@tryvienna/ui'

<NotificationToast id="story-default" title="Something happened" description="Here are some details about what happened." />

Examples

Default

Default

<NotificationToast id="story-default" title="Something happened" description="Here are some details about what happened." />

Success

Success

<NotificationToast id="story-success" variant="success" title="Workstream ready" description="Code review completed successfully." />

Error

Error

<NotificationToast id="story-error" variant="error" title="Deploy failed" description="The pipeline exited with code 1. Check the logs for details." />

Warning

Warning

<NotificationToast id="story-warning" variant="warning" title="Rate limit approaching" description="You have used 90% of your API quota for this billing cycle." />

Info

Info

<NotificationToast id="story-info" variant="info" title="New version available" description="Version 2.4.0 is ready to install." />

Title Only

Title Only

<NotificationToast id="story-title-only" variant="success" title="Changes saved" />

With Actions

With Actions

<NotificationToast id="story-actions" variant="info" title="New version available" description="Version 2.4.0 is ready to install." actions="[" onClick="() => {" />

Clickable

Clickable

<NotificationToast id="story-clickable" variant="success" title="Workstream ready" description="Click to navigate to the workstream." onClick="() => {" />

All Variants

All Variants

<div className="flex flex-col gap-3">
  <NotificationToast id="all-default" variant="default" title="Default" description="Default variant notification." />
  <NotificationToast id="all-success" variant="success" title="Success" description="Operation completed successfully." />
  <NotificationToast id="all-error" variant="error" title="Error" description="Something went wrong." />
  <NotificationToast id="all-warning" variant="warning" title="Warning" description="Proceed with caution." />
  <NotificationToast id="all-info" variant="info" title="Info" description="Here is some useful information." />
</div>

Variants

Name	Options	Default
variant	default | success | error | warning | info	default

API Reference

NotificationToast

Prop	Type	Default	Description
id	string | number	-
variant	NotificationVariant	-
title	string	-
description	string	-
onClick	() => void	-	Fires when the toast body is clicked. Auto-dismisses.
actions	NotificationToastAction[]	-	Explicit action buttons rendered inside the toast.

Data Attributes

Component	data-slot
NotificationToast	"notification-toast"