---
title: Status Tiles
description: N entities as colored status tiles — a fleet light you read at a glance
visibility: guest
draft: false
---

# Status Tiles

The `<x-wirekit::status-tiles>` component renders a list of entities as colored
status tiles — a fleet light you read at a glance. Each tile is tinted by its
intent, but status never rides on color alone: every tile also carries a distinct
icon shape and a screen-reader status word, so the grid stays legible for
colorblind users and assistive technology (WCAG 1.4.1).

Reach for it when you have *N of the same kind of thing* and want to see all their
states in one screen: thirty apps on one dashboard, a rack of services, a batch of
jobs. For a two-dimensional cross of rows × columns, use
[Status Matrix](/components/status-matrix) instead.

## Usage

Pass `items` — a list of `['key', 'label', 'intent']` maps. Add `href` to make a
tile a link, and `meta` for a small caption under the label.

:::preview{title="Fleet status at a glance"}
<x-wirekit::status-tiles
    aria-label="Fleet status"
    :items="[
        ['key' => 'shop', 'label' => 'shop.example', 'intent' => 'danger', 'meta' => '2 incidents'],
        ['key' => 'blog', 'label' => 'blog.example', 'intent' => 'warning', 'meta' => 'elevated latency'],
        ['key' => 'api', 'label' => 'api.example', 'intent' => 'success'],
        ['key' => 'docs', 'label' => 'docs.example', 'intent' => 'success'],
        ['key' => 'cdn', 'label' => 'cdn.example', 'intent' => 'success'],
        ['key' => 'mail', 'label' => 'mail.example', 'intent' => 'info', 'meta' => 'maintenance'],
    ]"
/>
:::

## Legend

Set `:legend="true"` to show a count-per-intent legend above the grid. Only the
intents actually present are listed, each with its shaped icon, word, and count —
so the summary is readable without color too.

:::preview{title="Status tiles with a legend"}
<x-wirekit::status-tiles
    aria-label="Service health"
    :legend="true"
    :items="[
        ['key' => 'a', 'label' => 'auth', 'intent' => 'success'],
        ['key' => 'b', 'label' => 'billing', 'intent' => 'success'],
        ['key' => 'c', 'label' => 'search', 'intent' => 'warning'],
        ['key' => 'd', 'label' => 'queue', 'intent' => 'danger'],
        ['key' => 'e', 'label' => 'webhooks', 'intent' => 'success'],
        ['key' => 'f', 'label' => 'exports', 'intent' => 'neutral'],
    ]"
/>
:::

## Clickable tiles

Give an item an `href` and its tile becomes a keyboard-operable link with a focus
ring — click through to the entity's detail view. Tiles without `href` stay static.

:::preview{title="Tiles that link to detail views"}
<x-wirekit::status-tiles
    aria-label="Apps"
    :items="[
        ['key' => '1', 'label' => 'orders', 'intent' => 'danger', 'href' => '#orders'],
        ['key' => '2', 'label' => 'inventory', 'intent' => 'warning', 'href' => '#inventory'],
        ['key' => '3', 'label' => 'reports', 'intent' => 'success', 'href' => '#reports'],
    ]"
/>
:::

## Density

The tiles fill a responsive grid. Pass `columns` (the same syntax as
[Grid](/components/grid)) to control how many sit per row — tighten it for a dense
fleet wall, loosen it for a handful of services.

:::preview{title="A denser wall of tiles"}
<x-wirekit::status-tiles
    aria-label="Nodes"
    columns="2 sm:4 md:6 lg:8"
    :items="[
        ['key' => 'n1', 'label' => 'node-1', 'intent' => 'success'],
        ['key' => 'n2', 'label' => 'node-2', 'intent' => 'success'],
        ['key' => 'n3', 'label' => 'node-3', 'intent' => 'warning'],
        ['key' => 'n4', 'label' => 'node-4', 'intent' => 'success'],
        ['key' => 'n5', 'label' => 'node-5', 'intent' => 'danger'],
        ['key' => 'n6', 'label' => 'node-6', 'intent' => 'success'],
        ['key' => 'n7', 'label' => 'node-7', 'intent' => 'success'],
        ['key' => 'n8', 'label' => 'node-8', 'intent' => 'success'],
    ]"
/>
:::

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `array` | `[]` | The fleet — each entry a map: `key`, `label`, `intent`, optional `href`, optional `meta`. |
| `legend` | `bool` | `false` | Show a count-per-intent legend above the grid (only present intents listed). |
| `columns` | `string` | `'2 sm:3 md:4 lg:6'` | Responsive grid column spec, forwarded to [Grid](/components/grid). |
| `gap` | `string` | `'sm'` | Grid gap token. |
| `scope` | `string\|null` | `null` | Scoped personalization key. |

Each `items` entry accepts:

| Key | Type | Description |
| --- | --- | --- |
| `key` | `string` | Stable identifier, emitted as `data-key` (optional but recommended). |
| `label` | `string` | The visible entity name. |
| `intent` | `string` | `success`, `warning`, `danger`, `info`, or `neutral`. Anything else falls back to `neutral`. |
| `href` | `string` | Makes the tile a link to the entity's detail view. |
| `meta` | `string` | Optional small caption under the label (a count, a note). |

## Accessibility

- The grid is an ARIA `list`; each tile is a `listitem`. Always pass an `aria-label`
  naming the fleet (`aria-label="Fleet status"`).
- **Status is never color-only** (WCAG 1.4.1): each tile carries a distinct icon
  shape *and* a visually-hidden status word (`Status: Critical`), so colorblind and
  screen-reader users get the state without relying on the tint.
- Linked tiles are real `<a>` elements — tab-reachable, with a visible focus ring.
- The legend repeats the same shaped-icon + word + count triad, readable in grayscale.

## Keyboard Interaction

Status tiles carry no interaction model of their own — a tile is keyboard-operable
only when it is a link (has an `href`). Static tiles are read-only status displays
and are intentionally not focusable.

| Key | Action |
| --- | --- |
| `Tab` | Move focus to the next linked tile (skips static tiles) |
| `Enter` | Activate the focused linked tile (follow its `href`) |

## Design Tokens

Tiles reuse the intent grammar of [Badge](/components/badge) — a soft `color-mix`
tinted surface with a matching 25%-tinted border and the `-text` intent color for
the icon. No new tokens are introduced.

| Token | Used for |
| --- | --- |
| `--color-wk-success` / `--color-wk-warning` / `--color-wk-danger` / `--color-wk-accent` | Tile tint + border per intent |
| `--color-wk-success-text` / `--color-wk-warning-text` / `--color-wk-danger-text` / `--color-wk-info-text` | Status icon color per intent |
| `--color-wk-bg-muted` / `--color-wk-border-subtle` | Neutral tile surface |
| `--radius-wk-md` | Tile corner radius |
| `--color-wk-ring` | Focus ring on linked tiles |

## Further Reading

- [Status Matrix](/components/status-matrix) — for a 2D rows × columns cross
- [Badge](/components/badge) — the intent grammar these tiles share
- [WCAG 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html)