Form Alert
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { FormAlert } from "@corew500/ui/form-alert"
<FormAlert>Content</FormAlert>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant* | enum | — | Alert variant determining color and icon |
| title | string | — | Optional title (displayed in bold) |
| message* | string | — | Main message content |
| className | string | — | Additional CSS classes |
| dismissible | enum | false | Whether the alert can be dismissed |
| onDismiss | () => void | — | Callback when dismiss button is clicked |
| dismissLabel | string | Dismiss | i18n label for dismiss button |
Accessibility
Screen Readers
- - Built on Alert component with proper ARIA roles.
- Dismiss button has proper aria-label for screen readers.
- Alert is announced to screen readers via Alert's role="alert".
Additional
- Icons have semantic meaning and are not decorative.
Localization
Translatable Content
- - Title and message props should be translated before passing to component.
- dismissLabel should be localized (defaults to "Dismiss").
RTL Support
- Consider RTL layout for dismiss button positioning.