Form Success State
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { FormSuccessState } from "@corew500/ui/form-success-state"
<FormSuccessState>Content</FormSuccessState>Variants
formSuccessStateVariants
| Axis | Values | Default |
|---|---|---|
| variant | successprimary | success |
| size | defaultsmlg | default |
iconContainerVariants
| Axis | Values | Default |
|---|---|---|
| variant | successprimary | success |
| size | defaultsmlg | default |
iconVariants
| Axis | Values | Default |
|---|---|---|
| variant | successprimary | success |
| size | defaultsmlg | default |
titleVariants
| Axis | Values | Default |
|---|---|---|
| variant | successprimary | success |
| size | defaultsmlg | default |
formSuccessDescriptionVariants
| Axis | Values | Default |
|---|---|---|
| variant | successprimary | success |
| size | defaultsmlg | default |
subDescriptionVariants
| Axis | Values | Default |
|---|---|---|
| variant | successprimary | success |
| size | defaultsmlg | default |
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | enum | — | Custom icon to display. Defaults to a checkmark. |
| title* | string | — | Title text displayed after the icon |
| description | string | — | Description text displayed below the title |
| subDescription | string | — | Secondary description text displayed below the main description |
| action | enum | — | Optional action element (e.g., a button) displayed below the description |
| variant | enum | success | — |
| size | enum | default | — |
Accessibility
Keyboard Navigation
- Action button (if provided) is keyboard accessible
Screen Readers
- - Uses role="status" for ARIA live region
- aria-live="polite" announces success to screen readers without interruption
- Icon uses aria-hidden="true" as it's decorative
Additional
- Semantic heading structure with h3 for title
Localization
Translatable Content
- - Component accepts pre-resolved translated strings
- All user-facing text is customizable via props:
- `action` - Optional action element (render your own button with localized text)
- No internal text hardcoding - all strings flow through props
Additional
- `title` - Main success message
- `description` - Optional detailed description
- `subDescription` - Optional secondary description