Status Tiles Row
Ops summary strip of four Badge-styled status tiles showing service counts for Operational, Degraded, Partial outage, and Maintenance.
Ops summary strip of four Badge-styled status tiles showing service counts for Operational, Degraded, Partial outage, and Maintenance.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Status Tiles Row is the ops summary strip, four tiles in a responsive grid: Operational 18 services, Degraded 2 services, Partial outage 1 service, and Maintenance 3 services. Each tile carries a Badge with a status dot (foreground opacity only, no fixed colors) and a large count below. The secondary badge variant marks Operational and outline marks the three degraded states, so the read hierarchy is clear without any color-coded traffic lights.
Tiles are one const array, each with a variant and a dotClass that stay within theme tokens. The count is text-3xl so the number reads from a distance on a wall monitor.
Reach for this block at the top of an incident dashboard or status page, wired to your service health aggregation endpoint so the counts update as incidents open and close.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the service health overview strip. Other status tile rows:
Tip: link each tile to a filtered incident list so operators can drill from the count to the affected services in one click.