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

#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