feedback
Alert
ステータスメッセージを表示するインラインバナー。エラーや警告には role="alert"、情報や成功を表すには role="status" を使用。
インポート
import { Alert, AlertTitle, AlertDescription } from '@stella-ds/react'AlertAlertTitleAlertDescription
Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
| variant | 'info' | 'success' | 'warning' | 'error' | 'info' | Visual style and semantic meaning |
| onClose | () => void | undefined | Renders an × button when provided |
Preview
Info
This is an informational message.
Success
Your changes have been saved.
Warning
Please review before continuing.
Error
Something went wrong.
使用例
Basic
<Alert variant="success" onClose={() => {}}>
<AlertTitle>Success</AlertTitle>
<AlertDescription>Your changes have been saved.</AlertDescription>
</Alert>