D
Design System
Design System/Atoms/Status Tile

Status Tile

Compact status tiles for service health, operational states, and dense responsive panels.

When To Use

  • Use Status Tile when information needs to be scanned quickly and compared across multiple rows, cards, or values.
  • Choose the example that best matches whether the user is browsing, monitoring, or drilling into structured data.
  • Lean on these patterns when you want consistent spacing and hierarchy before tuning the visual treatment.

When Not To Use

  • Do not use a dense data pattern when the primary task is storytelling, onboarding, or one-off explanation.
  • Do not flatten nuanced data into a compact summary card if the user still needs the underlying structure to make a decision.

Accessibility Notes

  • Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
  • Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
  • Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.

Key Props / API

Props

columns, title, status, description, meta, icon

Key exports

StatusTile, StatusTileGrid, type StatusTileProps, type StatusTileGridProps

Example Code

import { StatusTile, StatusTileGrid } from "@hilum/ui";
import { MonitorSmartphone } from "@hilum/ui/icons";

<StatusTileGrid>
  <StatusTile
    title="Catalog"
    status="healthy"
    icon={MonitorSmartphone}
    description="operational"
    meta={<p className="caption truncate">https://catalog.internal/health</p>}
  />
  <StatusTile title="Checkout" status="degraded" description="carrier rates delayed" />
  <StatusTile title="Renderer" status="critical" description="origin checks failing" />
</StatusTileGrid>

Status Tile

Service health

Service status tiles collapse into divided rows on small screens

Catalog

Healthy

operational

https://catalog.internal/health

Checkout

Degraded

carrier rates delayed

Renderer

Critical

origin checks failing

Four columns

Compact status grids for platform monitoring and readiness views

Catalog

Healthy

operational

Commerce

Healthy

operational

Identity

Healthy

operational

Renderer

Degraded

slower than expected