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 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.

<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'],
    ]"
/>

Saying more than the intent does

intent is severity — five values, each with its own color and shape. Your domain probably has more states than that, and the ones that collide are usually the ones worth telling apart.

A health check that ran and reports a problem and a check that crashed are both danger. One points at your application, the other at your monitoring, and an operator sent to the wrong one loses the time you were trying to save them. The color cannot separate them, because it is the same color by definition.

Give the entry a status and the tile says your word instead of the derived one:

{{-- 1. Same severity, different states — the tiles now say so. --}}
<x-wirekit::status-tiles show-status :items="[
    ['key' => 'db', 'label' => 'Database', 'intent' => 'danger',
     'status' => 'Failed', 'meta' => 'Connection refused'],
    ['key' => 'disk', 'label' => 'Disk space', 'intent' => 'danger',
     'status' => 'Crashed', 'meta' => 'Check threw an exception'],
]" />

The word travels into the screen-reader text as well, so Status: Crashed is what a listener hears — the two never disagree. Everything else is unchanged: the tint, the shaped icon, and the Status: prefix all still come from intent, so a custom word cannot cost the tile its non-color channel.

Leave status out and nothing changes.

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.

<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.

<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) to control how many sit per row — tighten it for a dense fleet wall, loosen it for a handful of services.

<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

Each items entry accepts:

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.

Design Tokens

Tiles reuse the intent grammar of 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.

Further Reading

• Status Matrix — for a 2D rows × columns cross
• Badge — the intent grammar these tiles share
• WCAG 1.4.1 Use of Color