Feedback

Alert

An inline status strip with a colored icon, a title, an optional description and an optional action, in four semantic variants.

Usage

Included in the GliaKit boilerplate. Import it where you need it:

tsx

import { Alert } from "@/components/ui/alert";

Page or section level messages that stay visible until the situation changes, like a trial ending or a failed sync.
Form level errors shown above the fields, summarizing what needs fixing.
Pair a message with one clear next step by passing a Button as the action.

For short confirmations that should disappear on their own ("Changes saved"), use Toast.
For a decision that must be made before continuing, use Dialog.
For field level validation, show the message next to the field instead.

Info, success, warning and error. Always pass variant: the default is warning.

Leave out children for a one-line message.

Put an icon button in the action slot and hide the alert from state.

Override the role with alert so screen readers announce it immediately.

Extends native div attributes (id, className, role, aria-*). The native title attribute is replaced by the title prop.

Prop	Type	Default	Description
variant	"info" \| "success" \| "warning" \| "error"	"warning"	Color of the strip and icon. The function default is warning, so pass a variant explicitly.
title	string	-	Required. The headline, rendered in medium weight.
children	React.ReactNode	-	Optional description under the title. Rendered inside a <p>, so pass inline content only.
action	React.ReactNode	-	Optional element on the right, usually a small Button.
role	string	"status"	Live region role. Override with "alert" for urgent errors that should interrupt.

Renders with role="status", a polite live region: screen readers announce it when it appears without interrupting.
Pass role="alert" for urgent errors; it is spread after the default and replaces it.
The icon glyph is aria-hidden, so the title must carry the meaning on its own, not just the color.
An icon-only dismiss button in the action slot needs an aria-label such as "Dismiss".