Alert
Displays a callout message to the user with contextual feedback.
Default
The default alert establishes the baseline presentation before moving into semantic variants.
This is an informational alert message.
tsx
<Alert>This is an informational alert message.</Alert>Installation
tsx
import { Alert } from "madagent";Variants
Alert variants are best compared one at a time because the semantic tone is the main axis, not layout.
Info
Info
Something you should know about.
tsx
<Alert variant="info" title="Info">
Something you should know about.
</Alert>Success
Success
Operation completed successfully.
tsx
<Alert variant="success" title="Success">
Operation completed successfully.
</Alert>Warning
Warning
Please proceed with caution.
tsx
<Alert variant="warning" title="Warning">
Please proceed with caution.
</Alert>Error
Error
Something went wrong.
tsx
<Alert variant="error" title="Error">
Something went wrong.
</Alert>Dismissible
Dismissible
Click the X to dismiss this alert.
tsx
<Alert variant="info" title="Dismissible" dismissible onDismiss={() => {}}>
Click the X to dismiss this alert.
</Alert>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "info""success""warning""error" | "info" | Alert variant |
title | ReactNode | - | Optional title displayed above the content |
dismissible | boolean | false | Whether the alert can be dismissed |
onDismiss | () => void | - | Callback when dismiss button is clicked |
children* | ReactNode | - | Alert content |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
نجح
تم إكمال العملية بنجاح
تحذير
يرجى التحقق من المدخلات
خطأ
حدث خطأ أثناء المعالجة
Usage
tsx
<div style={{ display: "flex", flexDirection: "column", gap: 16, padding: 20, maxWidth: 400 }}>
<Alert variant="success" title="نجح">تم إكمال العملية بنجاح</Alert>
<Alert variant="warning" title="تحذير">يرجى التحقق من المدخلات</Alert>
<Alert variant="error" title="خطأ">حدث خطأ أثناء المعالجة</Alert>
</div>