Mantine Alert Info Callout
Mantine Alert with color='blue'. Translucent brand-blue background, brand-blue icon and title, body in primary text color. Used for info callouts and as the visual shell of Empty States.
DO
Use body copy to add new information beyond the title — don't restate the title (INC-001).
DON'T
Ship identical empty-state copy on /alerts and /rules — specify the rule type (INC-007).
Design
default
No data queried yet
Enter a PromQL expression to begin.
Info Alert with leading circle-info icon.
Component reference (screenshots)
Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.
Implementation
<Alert color="blue" icon={<IconInfoCircle />} title="No data queried yet">
Enter a PromQL expression to begin.
</Alert>Layout
| Property | Value |
|---|---|
| padding | 16px alert-padding |
| border-radius | 4px sm |
Accessibility
| ARIA | role='alert' or role='status' depending on interruptiveness. |