Alert

Contextual messages with hierarchy, an icon and optional actions.

Changes saved

Your settings were updated successfully.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add alert

What add alert installs alongside the component. The CLI skips any you already have in a compatible version.

2 examples · 1 component

Changes saved

Your settings were updated successfully.

Storage almost full

You are using 90% of your storage.

Could not publish

Check your connection and try again.

Success, warning and error with soft surfaces.

New version available

Update to get the latest improvements.

An indicator reinforces the message without relying on color.

Forwards props and ref to the container element; it only adds composition utilities.

Prop	Type	Default
`variant` Intent and semantic color.	`"default" \| "success" \| "warning" \| "info" \| "destructive"`	`"default"`

The states that apply to this component and their visual treatment.

State	Treatment
Variant	default, success, warning, info and destructive with a soft surface.
Static	Message present on the page; consider removing the role.
Dynamic	role="alert" announces the message when it appears.

Every state is understood through text, not color alone: use AlertTitle and AlertDescription.

role="alert" announces messages that appear dynamically; for static content consider removing the role.