Saved
Your changes are live.
Controls
Feedback
Toast
Status messages for save states, confirmations and errors.
Component
23
Import
import { Toast, ToastDescription, ToastTitle } from "@swirski/ui";Playground
Usage
<Toast tone="yellow">
<ToastTitle>Saved</ToastTitle>
<ToastDescription>
Your changes are live.
</ToastDescription>
</Toast>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
ToastProvider.childrenRequired | ReactNode | - | Generated from ToastProviderProps. |
ToastProvider.size | 'sm' | 'md' | 'lg' | - | Generated from ToastProviderProps. |
ToastProvider.tone | 'blue' | 'yellow' | 'red' | 'white' | "yellow" | Applies the toast color treatment. |
ToastProvider.variant | 'solid' | 'outline' | - | Generated from ToastProviderProps. |
Toast.size | 'sm' | 'md' | 'lg' | "md" | Generated from ToastProps. |
Toast.tone | 'blue' | 'yellow' | 'red' | 'white' | "yellow" | Applies the toast color treatment. |
Toast.variant | 'solid' | 'outline' | "solid" | Generated from ToastProps. |
ToastTitle.size | 'sm' | 'md' | 'lg' | "md" | Generated from ToastTitleProps. |
ToastTitle.tone | 'blue' | 'yellow' | 'red' | 'white' | "yellow" | Applies the toast color treatment. |
ToastTitle.variant | 'solid' | 'outline' | "solid" | Generated from ToastTitleProps. |
ToastDescription.size | 'sm' | 'md' | 'lg' | "md" | Generated from ToastDescriptionProps. |
ToastDescription.tone | 'blue' | 'yellow' | 'red' | 'white' | "yellow" | Applies the toast color treatment. |
ToastDescription.variant | 'solid' | 'outline' | "solid" | Generated from ToastDescriptionProps. |
ToastClose.size | 'sm' | 'md' | 'lg' | "md" | Generated from ToastCloseProps. |
ToastClose.tone | 'blue' | 'yellow' | 'red' | 'white' | "yellow" | Applies the toast color treatment. |
ToastClose.variant | 'solid' | 'outline' | "solid" | Generated from ToastCloseProps. |
ToastViewport.size | 'sm' | 'md' | 'lg' | "md" | Generated from ToastViewportProps. |
ToastViewport.tone | 'blue' | 'yellow' | 'red' | 'white' | "yellow" | Applies the toast color treatment. |
ToastViewport.variant | 'solid' | 'outline' | "solid" | Generated from ToastViewportProps. |
ToastProvider | { children: ReactNode } | - | Provider for managed toasts and useToast. |
useToast | () => ToastContextValue | - | Adds and removes managed toasts. |