Alert

An alert places a message in the page, where users notice it without leaving their task. Its title names what happened, and its description says what follows or what users can do next.

UsageCopy Anchor Link

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

export function AlertDefault() {
	return (
		<Alert>
			<AlertTitle>Delivery window changed</AlertTitle>
			<AlertDescription>
				The store accepts deliveries from 6:00 to 8:00, starting on Monday.
			</AlertDescription>
		</Alert>
	);
}

ExamplesCopy Anchor Link

With IconCopy Anchor Link

An icon gives a kind of message a recognizable sign, so users who meet it again identify it at a glance. The title still names what happened, which keeps the alert complete for users who do not know the symbol.

With ActionCopy Anchor Link

Some messages ask users for a response, such as accepting a corrected order quantity. With AlertAction, the alert carries that response itself, so users act where they read the message and stay within their task.

Info with IconCopy Anchor Link

Many processes continue without any input, yet users still want to know where they stand, for example once a supplier confirms an order. Set to "info", variant keeps users informed about such progress without asking them to act.

Success with IconCopy Anchor Link

Once a task is complete, users want certainty before they move on, for example after publishing a price list. For such moments, variant set to "success" lets the alert confirm the outcome, so users need not check it a second time.

Warning with IconCopy Anchor Link

A delivery that may arrive late or a promotion that ends soon turns into a problem unless users act in time. Through variant set to "warning", the alert marks such a message as one that needs attention while there is still room to prevent the consequence.

Destructive with IconCopy Anchor Link

Failed actions leave users with a task still open, such as an order that could not be sent or a change that was not saved. Here, variant set to "destructive" lets the alert report the failure, while the description names the step that resolves it.

API ReferenceCopy Anchor Link

AlertCopy Anchor Link

AlertTitleCopy Anchor Link

AlertTitle names what happened. It renders a div and has no props of its own.

AlertDescriptionCopy Anchor Link

AlertDescription says what follows or what users can do next. It renders a div and has no props of its own.

AlertActionCopy Anchor Link

AlertAction holds an action in the top right corner of the alert. It renders a div and has no props of its own.