Alert

Inline status feedback for info, success, warning, and error states, including action-oriented messages with buttons.

Loading preview

Examples

Practical examples and common states for the same installable component.

Info

Guidance and background state without warning-level emphasis.

examples/alert-info.tsx
import { Alert } from "@/components/wensity/alert";
export function InfoAlert() {
return (
<Alert
variant="info"
title="Workspace indexing started"
description="Search results will update as components are processed."
/>
);
}

Success

Completion state with confident confirmation.

examples/alert-success.tsx
import { Alert } from "@/components/wensity/alert";
export function SuccessAlert() {
return (
<Alert
variant="success"
title="Payment method verified"
description="Invoices and renewal reminders will use this card."
/>
);
}

Warning

Attention state for recoverable issues and upcoming risk.

examples/alert-warning.tsx
import { Alert } from "@/components/wensity/alert";
export function WarningAlert() {
return (
<Alert
variant="warning"
title="Scheduled maintenance starts soon"
description="Template previews may be briefly unavailable."
/>
);
}

Error

Assertive feedback for failed operations.

examples/alert-error.tsx
import { Alert } from "@/components/wensity/alert";
export function ErrorAlert() {
return (
<Alert
variant="error"
title="Webhook signature rejected"
description="Rotate the shared secret and replay the latest event."
/>
);
}

With Action

Inline recovery path and dismiss affordance.

Requires: button

examples/alert-with-action.tsx
import { Alert } from "@/components/wensity/alert";
import { Button } from "@/components/wensity/button";
export function AlertWithAction() {
return (
<Alert
variant="neutral"
title="Connect production domain"
description="Finish DNS verification before enabling checkout links."
action={<Button size="sm" variant="secondary">Open settings</Button>}
/>
);
}

Props

PropTypeDefaultDescription
variant"neutral" | "info" | "success" | "warning" | "error""info"Status colour recipe and the default icon that comes with it.
density"comfortable" | "compact""comfortable"Padding scale. compact suits inline or stacked alerts.
titleReact.ReactNode-Bold heading line. Also settable via the AlertTitle subcomponent.
descriptionReact.ReactNode-Body copy under the title. Also settable via AlertDescription.
iconReact.ReactNode-Overrides the icon the variant supplies. Pass null to drop it.
actionReact.ReactNode-Trailing slot for a button or link.
onDismiss() => void-When set, renders a dismiss button and calls this on press.
dismissLabelstring"Dismiss alert"Accessible label for the dismiss button.