Toast

A provider + portalled viewport with aria-live, swipe-to-dismiss, and pause-on-hover.

Group: Feedback · Import path: @orionshub/lucent/toast · Client component — ships a "use client" boundary.

Import

import { Toast, ToastProvider } from '@orionshub/lucent'
import '@orionshub/lucent/styles.css' // once, at your app root

Examples

Trigger a toast

Trigger a toast

Show source

export function ToastBasic() {
  const [open, setOpen] = useState(false)
  return (
    <ToastProvider swipeDirection="right">
      <Button onClick={() => { setOpen(false); requestAnimationFrame(() => setOpen(true)) }}>
        Show toast
      </Button>
      <Toast.Root open={open} onOpenChange={setOpen} tone="success" duration={4000}>
        <Toast.Title>Saved</Toast.Title>
        <Toast.Description>Your changes were saved successfully.</Toast.Description>
        <Toast.Close aria-label="Dismiss" style={{ marginInlineStart: 'auto' }}>×</Toast.Close>
      </Toast.Root>
      {/* Render the Viewport at the app root — outside any backdrop-filter/transform
          ancestor, which would otherwise trap its position:fixed. */}
      {typeof document !== 'undefined' && createPortal(<Toast.Viewport />, document.body)}
    </ToastProvider>
  )
}

Props

ToastRoot

Prop	Type	Default	Description
tone	ToastTone | undefined	—	Semantic tone. Defaults to `info`.

ToastTitle

This component forwards native element props. It exposes no additional public props, or its props are documented inline above.

ToastDescription

This component forwards native element props. It exposes no additional public props, or its props are documented inline above.

Guidance

One-time CSS import

Import the compiled stylesheet once at your app root: import '@orionshub/lucent/styles.css'. Components ship stable class names and read design tokens from CSS custom properties — there is no style runtime. See CSS Import.

Transparency & solid mode

Every glass surface reads --lucent-glass-opacity (0.60–1.0). Dial it at runtime with setGlassOpacity(), or switch to setContrast('solid') for a fully opaque, high-contrast rendering. See Transparency & Solid Mode.

Portal theming

This component renders through a portal to document.body. Because theme tokens are scoped to :root, portalled content stays themed automatically — do not nest it inside a transformed/backdrop-filter ancestor if you portal it manually. See Portal Theming.

Reduced motion

Animations are CSS-only and disabled under @media (prefers-reduced-motion: reduce). See Reduced Motion.

RTL

Authored with CSS logical properties — set dir="rtl" on a parent (or the document) and layout mirrors with no JS. Toggle RTL from the glass-controls panel to preview. See RTL Support.

SSR / Next.js

Client component — ships a "use client" boundary. All components are safe to import in a Server Component tree; interactive ones carry their own "use client" boundary. See SSR & Next.js.