Overlays

Toast

One notification. `ToastProvider` renders these for you, but it is exported so a static toast can be dropped into a docs page or a form's inline slot.

Server safe3 exportsSource

Import

import { Toast, ToastProvider, useToast } from '@the_viveksingh/vivek-ui'

Fire a toast from anywhere

Mount one ToastProvider near the root, then call useToast from any client component. duration: null makes it stay until dismissed, which is right for an error the user must read.

// app/layout.tsx
<ToastProvider position="bottom-end" duration={4000}>
  {children}
</ToastProvider>

// anywhere below it
const { toast, dismissAll } = useToast()

toast({ title: 'Invoice sent', description: 'Northwind will get it shortly.' })
toast({ tone: 'success', title: 'Saved' })
toast({ tone: 'danger', title: 'Payment failed', duration: null })

The Toast element on its own

Exported so a static notification - an inline banner, a Storybook story - can reuse the same visual without the provider.

Invoice sent

Northwind will get it shortly.

Deploy finished

Live in 4 regions.

Storage almost full

92% of 10 GB used.

Payment failed

The card was declined.

<Toast title="Invoice sent" description="Northwind will get it shortly." />
<Toast tone="success" title="Deploy finished" description="Live in 4 regions." />
<Toast tone="warning" title="Storage almost full" description="92% of 10 GB used." />
<Toast tone="danger" title="Payment failed" description="The card was declined." />

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Toast
Prop	Type	Default	Description
`tone`	`ToastTone`	—	—
`title`	`ReactNode`	—	Bold leading line.
`description`	`ReactNode`	—	Secondary line under the title.
`action`	`ReactNode`	—	A control the toast offers — typically a `<Button size="sm">Undo</Button>`.
`icon`	`ReactNode`	—	Leading glyph. Pass `null` to drop the default.
`onDismiss`	`() => void`	—	Called when the dismiss button is pressed. Its presence is what renders the button.
`dismissLabel`	`string`	—	Accessible name for the dismiss button.
`dismissible`	`boolean`	—	`false` hides the dismiss button even when `onDismiss` is given.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Exports

ToastToastProvideruseToast

Rendering

Server safe

Toast carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.