Toast

Stable

Ephemeral notifications via imperative API. toast() can be called from anywhere — event handlers, async functions, outside React tree. ToastProvider is included in VhyxUIProvider.

FeedbackImperative APIVhyxSeal

Interactive example

Click to trigger different toast variants

Import

tsx

// Imperative API — import anywhere in your app
import { toast } from '@vhyxui/react'

// ToastProvider is already included in VhyxUIProvider
// Place VhyxUIProvider once at your app root
import { VhyxUIProvider } from '@vhyxui/react'

API methods

tsx

toast('Message')                      // default variant
toast.success('Upload complete')      // success (green)
toast.danger('Something failed')      // danger (red)
toast.warning('Low disk space')       // warning (amber)
toast.info('Update available')        // info (blue)

// With options
toast.success('Done', {
  description: 'All 42 files uploaded.',
  duration: 8000,
  action: { label: 'View', onClick: openPanel },
})

// Dismiss
const id = toast('Loading…', { duration: Infinity })
toast.dismiss(id)    // dismiss specific toast
toast.dismiss()      // dismiss all toasts

All toast() variants

States

With action button

Persistent toast (Infinity duration)

Props

toast() options

Prop	Type	Default	Description
`message` *	`string`	—	Primary message text.
`description`	`string`	—	Supplementary text rendered below the message.
`duration`	`number`	`5000`	Auto-dismiss delay in ms. Pass Infinity to prevent auto-dismiss.
`action`	`{ label: string; onClick: () => void }`	—	Optional action button rendered inside the toast.
`dismissible`	`boolean`	`true`	Shows a dismiss button.

ToastProvider props

Prop	Type	Default	Description
`position`	`'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'`	`'bottom-right'`	Position of the toast region on screen.
`maxToasts`	`number`	`5`	Maximum simultaneous toasts visible.
`defaultDuration`	`number`	`5000`	Default auto-dismiss duration for all toasts.

Accessibility

Keyboard navigation

Key	Action
`Tab`	Move focus into the toast region.
`Escape`	Dismiss the focused toast.
`Enter`	Activate the action button if present.

Agent contract

Default VhyxSeal contract shipped with every Toast.

Default contract

{
  "type": "display",
  "intent": "notify",
  "description": "Displays a transient notification message to the user",
  "requires": [],
  "requiredPermissions": [],
  "consequence": "None — display only. Disappears after the configured duration.",
  "affects": [],
  "reversible": false,
  "safetyLevel": "low",
  "requiresConfirmation": false,
  "destructive": false,
  "contractVersion": "0.0.1",
  "fingerprint": "vhyxs_3900ef64"
}

Theming

Override these CSS tokens to theme Toast.

--vhyx-z-toastZ-index (500)

--vhyx-shadow-lgToast shadow

--vhyx-color-surface-raisedToast background

--vhyx-radius-lgToast border radius

--vhyx-duration-normalSlide-in animation duration

--vhyx-easing-springEntry easing

Examples

Async form submission with feedback

Show loading then success or error

Custom provider position

tsx

// In your app root — VhyxUIProvider accepts ToastProvider props
<VhyxUIProvider toastPosition="top-center" toastMaxToasts={3}>
  {children}
</VhyxUIProvider>