feedback
Toast
Radix UI ベースの一時的なオーバーレイ通知。アプリを ToastProvider と ToastViewport で一度ラップすれば、どこからでも表示可能。
インポート
import { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction } from '@stella-ds/react'ToastProviderToastViewportToastToastTitleToastDescriptionToastCloseToastAction
Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
| variant | 'info' | 'success' | 'warning' | 'error' | 'info' | Visual style and semantic meaning |
| label (ToastClose) | string | 'Close notification' | aria-label for close button |
使用例
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>