Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/ui-resolver.
• Live playground: /components/base-ui/alert.

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:

• Alert provides the container and variant styling.
• AlertTitle gives the message a short, scannable heading.
• AlertDescription holds 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.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/ui-resolver.
• Playground route: /sandbox?component=Alert.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes