feedback
Toast
Ephemeral overlay notification built on Radix UI. Wrap app with ToastProvider + ToastViewport once, then render Toast anywhere.
Import
import { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction } from '@stella-ds/react'ToastProviderToastViewportToastToastTitleToastDescriptionToastCloseToastAction
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'info' | 'success' | 'warning' | 'error' | 'info' | Visual style and semantic meaning |
| label (ToastClose) | string | 'Close notification' | aria-label for close button |
Examples
Setup + usage
// In layout.tsx — wrap once:
<ToastProvider>
{children}
<ToastViewport />
</ToastProvider>
// Then render anywhere:
<Toast open={open} onOpenChange={setOpen} variant="success">
<ToastTitle>Saved!</ToastTitle>
<ToastDescription>Your file has been saved.</ToastDescription>
<ToastClose />
</Toast>