Component: Alert
Purpose
Displays a highlighted message box to draw attention to important information.
When to Use
- Providing tips or extra information (
info). - Warning users about potential issues (
warning). - Confirming a successful action (
success). - Highlighting errors or critical problems (
error).
How to Use (Options / Props)
The main message goes between the opening <Alert> and closing </Alert> tags.
Option ( | Description | Required? | Example Value(s) |
|---|---|---|---|
| The style/color of the alert box. | Yes | |
| An optional bold title at the start of the alert. | No | |
| The main message text inside the alert box. | Yes | Put text between tags |
Example MDX Usage
Informational Alert:
<Alert type="info" title="Did You Know?">
You can customize your dashboard settings in the profile section.
</Alert>
Warning Alert:
<Alert type="warning">
Please save your changes before navigating away from this page.
</Alert>
Success Alert:
<Alert type="success" title="Profile Updated">
Your changes have been saved successfully.
</Alert>
Error Alert:
<Alert type="error" title="Upload Failed">
The selected file format is not supported. Please upload a JPG or PNG file.
</Alert>
Updated on: 13/05/2026
Thank you!