Alert

Inline status feedback for info, success, warning, and error states.

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>}
/>
);
}