Alert

Contextual feedback for information, warnings, and failed operations.

Built on Workshop1 compositionUpstream API

Invoice saved

The draft is ready for review.

Stock is running low

Two filters remain at this location.

Payment could not be processed

Check the card details and try again.

Usage

import { Alert, AlertDescription, AlertTitle } from "@workshop1/ui/components/alert"

Place an alert beside the content or action it explains. Use the default variant for neutral information, warning for a condition that needs attention, and destructive for a failed or unsafe outcome. Write a short title, then tell the user what happened and what they can do next.

AlertAction is for one concise recovery action. Keep destructive consequences explicit and avoid dismissing errors before the user has read them.

Accessibility

Alerts use role="alert", so mount them when timely announcement is required. Do not repeatedly remount unchanged content. Icons support scanning, but the title and description must carry the message.