feedback
Alert
Inline feedback banner for status messages. Uses role="alert" for errors/warnings and role="status" for info/success.
Import
import { Alert, AlertTitle, AlertDescription } from '@stella-ds/react'AlertAlertTitleAlertDescription
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| 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.
Examples
Basic
<Alert variant="success" onClose={() => {}}>
<AlertTitle>Success</AlertTitle>
<AlertDescription>Your changes have been saved.</AlertDescription>
</Alert>