Alert
Inline notice for validation feedback, status messages, and lightweight system warnings.
Best for
Import
import { Alert } from "@enadhq/enad-react-sdk/client/ui-resolver"When to use it
Use Alert when the message should stay in the page flow and keep a clear relationship to the content around it. It works well for validation summaries, shipping warnings, promo-code failures, and account notices that need to be visible without taking over the whole screen.
If the message needs a user decision or blocks the next step, reach for a dialog or sheet instead.
Slot strategy
Alert is a small parent-led composition:
Alertprovides the container and variant styling.AlertTitlegives the message a short, scannable heading.AlertDescriptionholds the supporting detail.
Keep the title brief and let the description carry the longer explanation.
Behavior and theming guidance
Use the default variant for neutral or helpful messages. Reserve variant="destructive" for actual errors and recovery states so the stronger color treatment keeps its meaning.
Alerts work best when they are concise. Keep the copy short, place them close to the affected form or module, and do not rely on color alone to explain the problem.
Examples
Live examples you can edit directly in the sandbox.
Informational notice
Use the default treatment for helpful context that should stay close to the content it affects.
Destructive alert
Switch to the destructive variant when the visitor needs to correct an error before they can continue.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | string | — | No description yet. |