EmptyState

Centered empty state display with icon, message, description, and optional action.

Description

Centered empty state display with icon, message, description, and optional action. Used when filter results are empty, data hasn't loaded, or there are genuinely no items to display.

Design

Where this component exists in the Prometheus UI

View in Prometheus UI → /alerts

EmptyState on the Alerts page — shown when no alerts match filters

Implementation

From pages/AlertsPage.tsx in the Prometheus codebase:

{alertsPageData.groups.length === 0 ? (
  <Alert title="No rules found" icon={<IconInfoCircle />}>
    No rules found.
  </Alert>
) : (
  !showEmptyGroups &&
  alertsPageData.groups.length !== shownGroups.length && (
    <Alert title="Hiding groups with no matching rules" icon={<IconInfoCircle />}>
      Hiding {alertsPageData.groups.length - shownGroups.length} empty groups.
      <Anchor ml="md" fz="1em" onClick={() => setShowEmptyGroups(true)}>
        Show empty groups
      </Anchor>
    </Alert>
  )
)}

Layout Specs

Accessibility

• Icon has aria-hidden="true" (decorative)
• Message text is the primary accessible content
• Action element should be a focusable button or link