Prometheus Design System

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)
/query
/query light
/alerts
/alerts light
/rules
/rules light
/alertmanager-discovery
/alertmanager-discovery light

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

PropertyValue
padding16px alert-padding
border-radius4px sm

Accessibility

ARIArole='alert' or role='status' depending on interruptiveness.

Related inconsistencies