Alert
Contextual feedback messages for user actions. Info, success, warning, error variants.
Examples
Info
Informational alert for neutral messages.
Your session will expire in 10 minutes. Save your work.
Success
Confirms a successful operation.
Profile updated successfully.
Warning
Flags something that may need attention.
Your storage is 90% full. Consider upgrading your plan.
Error
Communicates a failure or blocking issue.
Payment failed. Please check your card details and try again.
With title and action
Rich alert combining a title, body text, and a call-to-action.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { Alert } from "@rokle/components";import { Alert } from "@rokle/components";
export function Example() {
return (
<div className="flex flex-col gap-3">
<Alert variant="info">This is an informational message.</Alert>
<Alert variant="success">Operation completed successfully.</Alert>
<Alert variant="warning">Please review before proceeding.</Alert>
<Alert variant="error">Something went wrong.</Alert>
</div>
);
}Source
The implementation source for this component. Copy it into your project and customise.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "info" | "success" | "warning" | "error" | "info" | Visual style variant. |
| children | ReactNode | - | Alert content. |