The Alert component is used to display contextual feedback messages to users. It supports different severities, styles, and can include icons, titles, and close actions.
1. Basic Properties
- Name → Unique identifier for the component (e.g.,
Alert1). - Text → Main content of the alert (e.g.,
This is an alert – check it out!). - Title → Optional title shown at the top of the alert.
- Icon → Allows attaching an icon (e.g., warning, check, info).
- Hidden → Toggles the visibility of the alert.
2. Layout
- Breakpoints → Defines responsive column widths.
- Spacing → Sets spacing relative to surrounding elements.
📘 See Common Properties → Layout.
3. Events
- onClose → Triggered when the alert is closed by the user.
- Example: reset a form after a success alert.
4. Color
The color property defines the alert’s theme:
- error → Red, indicates an error or failure.
- info → Blue, provides informational messages.
- success → Green, shows success or confirmation.
- warning → Yellow/Orange, highlights potential issues.
5. Severity
Defines the importance and visual weight of the alert:
- error
- info
- success
- warning
(Usually aligned with color property.)
6. Variant
Controls the style of the alert box:
- filled → Solid background color.
- outlined → Border style with transparent background.
- standard → Default style, lightweight background.
7. Close Text
- Allows customizing the close button label (default:
Close).
8. Style
Custom CSS or inline styles can be applied for:
- Font size
- Background
- Padding
- Border radius
📘 See Common Properties → Style.
9. Business Use Cases
- Success alerts → Show confirmation after saving data.
- Error alerts → Inform users when an operation fails.
- Warning alerts → Alert users about potential risks before proceeding.
- Info alerts → Provide tips, instructions, or general notices.
✅ The Alert component is a flexible and user-friendly way to provide immediate feedback to users, improving the overall user experience with clear and contextual messages.