Feedback

Alert

Communicates important status messages with semantic variants, optional action slots, and accessible roles.

idle

Usage

import { Alert, AlertDescription, AlertIcon, AlertTitle } from "@mizen-labs/ui";

The parts and how they nest, taken from the preview above.

<Alert>
	<AlertIcon />
	<AlertTitle />
	<AlertDescription />
</Alert>

Presents critical messages across five semantic tones with token-backed colors and contrast.

Interactive alerts should use role="region" with aria-labelledby to provide polite navigation landmarks.

Renders without an icon slot; title and description align flush with container padding.

Renders concise notification copy without a separate heading element.

Guidance	Practice
Do	Explain the status and a useful next action. Choose announcement urgency to match the message.

Guidance	Boundary
Scope	Use Alert Dialog when a decision must interrupt the task. Do not announce routine updates as urgent alerts.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`variant`	`"default" \| "error" \| "info" \| "success" \| "warning"`	`"default"`	Selects the semantic visual variant and token palette.
`role`	`AriaRole`	`"alert"`	Sets the ARIA role; defaults to assertive alert for urgent dynamic text, overridable to status or region.
`Alert`	`AlertProps`	`—`	Root compound container for the alert message, icon, and action slots.
`AlertIcon`	`AlertIconProps`	`—`	Slot for decorative status icon; defaults to aria-hidden.
`AlertTitle`	`AlertTitleProps`	`—`	Slot for the primary alert heading or title.
`AlertDescription`	`AlertDescriptionProps`	`—`	Slot for supporting alert description text.
`AlertAction`	`AlertActionProps`	`—`	Layout slot for secondary action controls.