Component reference
Alert
Contextual feedback with a title, supporting text and optional actions.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Loading the interactive example?
Width adapts to the available space
"use client";
import { useState } from "react";
import { Alert, Button } from "@pimolu/react";
export function AlertExample() {
const [visible, setVisible] = useState(true);
return (
<div className="space-y-6">
{
visible
? <Alert
variant="success"
title="Your workspace is ready."
description="Everything has a place. Start with your first project."
onDismiss={() => setVisible(false)}
dismissLabel="Dismiss workspace message"
/>
: <Button
appearance="outline"
onClick={() => setVisible(true)}
>
Show the message again
</Button>
}
</div>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Variants
The semantic tone drives the icon, the border and the tinted surface.
Anatomy
An optional title, description, body, actions and a dismiss button.
Dismissible
The component is controlled: the consumer hides it when onDismiss fires.
Usage
Choose a semantic tone and keep the action near the message. onDismiss is controlled: your application must hide the alert when it fires.
Danger defaults to role=alert; other variants default to role=status. Override role only when the announcement behavior suits the situation.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluAlertProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
variant | "neutral" | "success" | "warning" | "danger" | "info" | undefined | "info" | Semantic tone of the message. |
title | ReactNode | — | Short, emphasised summary. |
description | ReactNode | — | Optional supporting text. |
icon | ReactNode | — | Decorative leading icon, hidden from assistive technology. |
children | ReactNode | — | Extra content rendered below the description. |
actions | ReactNode | — | Action buttons or links rendered at the end of the content. |
onDismiss | (() => void) | undefined | — | Shows an accessible close button. The component is controlled: hide it yourself when this callback fires. |
dismissLabel | string | undefined | "Dismiss alert" | Accessible name of the close button. |
role | AriaRole | undefined | "alert" for danger and "status" for every other variant | Explicit landmark role. Defaults to "alert" for danger and "status" for every other variant. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onClick | MouseEventHandler<HTMLDivElement> | undefined | — | Standard React/HTML attribute. |
variant"neutral" | "success" | "warning" | "danger" | "info" | undefinedDefault: "info"
Semantic tone of the message.
titleReactNodeNo default extracted.
Short, emphasised summary.
descriptionReactNodeNo default extracted.
Optional supporting text.
iconReactNodeNo default extracted.
Decorative leading icon, hidden from assistive technology.
childrenReactNodeNo default extracted.
Extra content rendered below the description.
actionsReactNodeNo default extracted.
Action buttons or links rendered at the end of the content.
onDismiss(() => void) | undefinedNo default extracted.
Shows an accessible close button. The component is controlled: hide it yourself when this callback fires.
dismissLabelstring | undefinedDefault: "Dismiss alert"
Accessible name of the close button.
roleAriaRole | undefinedDefault: "alert" for danger and "status" for every other variant
Explicit landmark role. Defaults to "alert" for danger and "status" for every other variant.
onChangeChangeEventHandler<HTMLDivElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onClickMouseEventHandler<HTMLDivElement> | undefinedNo default extracted.
Standard React/HTML attribute.
Accessibility
- Use a clear title and actionable text. Do not rely on the decorative icon for meaning.
- Avoid filling the initial page with assertive announcements, and give the dismiss button a meaningful label.