Alert
Raised clay panels for feedback messages, each with its own inset icon well. Four tones cover success, danger, warning and info.
import { Alert } from "marclayui";Variants
Deployment complete
Your site is live on the edge network.Build failed
TypeScript found 2 errors in ./src/app.tsx.Heads up
This will invalidate your cached assets.Did you know
Alerts can render any React node as children.Dismissible
Heads up
Click the ✕ to dismiss — the state is yours to manage.| Prop | Type | Default | Description |
|---|---|---|---|
variant | "success" | "danger" | "warning" | "info" | "info" | Icon glyph and accent color. |
title | React.ReactNode | — | Bold lead line. |
icon | React.ReactNode | — | Override the default glyph (✓ ✕ ! i). |
onClose | () => void | — | When provided, shows a ✕ button. |
…rest | HTMLAttributes<HTMLDivElement> | — | Standard div props; role=alert is set for you. |