Toast

Portal-based notifications rendered in the bottom-right corner. Wrap your app in ToastProvider and call useToast() to fire toasts with variants, durations, and dismiss callbacks.

Import

tsx

import { ToastProvider, useToast } from '@velocityuikit/velocityui'

Preview

Variants

Persistent (no auto-dismiss)

Props

Prop	Type	Default	Description
message	`string`	—	The notification text to display.
variant	`'info' \| 'success' \| 'warning' \| 'danger'`	`'info'`	Controls the color and semantic tone of the toast.
duration	`number`	`4000`	Auto-dismiss delay in milliseconds. Set to 0 to disable auto-dismiss.

Examples

Setup and usage

Wrap your app with ToastProvider, then call addToast() anywhere inside.

tsx

import { ToastProvider, useToast, Button } from '@velocityuikit/velocityui'

function Demo() {
  const { addToast } = useToast()
  return (
    <Button onClick={() => addToast({ message: 'Saved successfully!', variant: 'success' })}>
      Save
    </Button>
  )
}

export default function Example() {
  return (
    <ToastProvider>
      <Demo />
    </ToastProvider>
  )
}

All variants

tsx

import { ToastProvider, useToast, Button } from '@velocityuikit/velocityui'

function Demo() {
  const { addToast } = useToast()
  return (
    <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
      <Button onClick={() => addToast({ message: 'Info message', variant: 'info' })}>Info</Button>
      <Button variant="secondary" onClick={() => addToast({ message: 'Changes saved', variant: 'success' })}>Success</Button>
      <Button variant="outline" onClick={() => addToast({ message: 'Please review', variant: 'warning' })}>Warning</Button>
      <Button variant="danger" onClick={() => addToast({ message: 'Action failed', variant: 'danger' })}>Danger</Button>
    </div>
  )
}

export default function Example() {
  return (
    <ToastProvider>
      <Demo />
    </ToastProvider>
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */