--- meta: title: Channel Tile description: A channel/queue slot tile with an active (occupied) face showing an in-progress item, and an available (empty) face advertising capacity with optional auto-accept. layout: component --- The channel tile represents a single slot in a queue or channel rail. It has two faces: - **Active** — the slot is occupied by an in-progress item (header, leading icon, title/subtitle, and a progress/SLA bar). - **Available** — the slot is empty and advertising capacity. When `incoming` is set it reserves an arriving item with a countdown that can auto-accept. Tiles are designed to sit side by side in a horizontal rail; each is a fixed-width block with a right divider. ```html:preview
``` ## Examples ### Active Tile The default (occupied) face. Set `header` for the top bar, `icon` + `color` for the leading badge, and `title`/ `subtitle` for the item. The `progress` value (0–100) fills the SLA bar along the bottom edge. ```html:preview
``` ### Available Tile Set `available` to render the empty face. When `title` is omitted it defaults to "Available". The leading slot shows a built-in accept button. ```html:preview
``` ### Accepting an Item Provide `accept-uri` and the built-in accept button becomes a link to it. When a tile is accepted, a cancelable `zn-accept` event fires before the fetch — call `preventDefault()` on it to take over the accept yourself. ```html:preview
``` ### Incoming with Auto-Accept An `available` tile with `incoming` reserves an arriving item. Provide `reserved-until` (an epoch in seconds or milliseconds marking the end of the window) and `auto-accept-delay` (the window length in milliseconds) to drive the countdown overlay. When the window elapses the tile auto-accepts via `accept-uri`. ```html:preview
``` ### Rejectable Add `rejectable` to an incoming tile to offer a reject control. Pressing it emits `zn-reject` (and suppresses accept). ```html:preview
``` ### Colors The `color` attribute sets the accent (the leading icon badge and the `--channel-tile-color` custom property). Available colors are: `default`, `primary`, `info`, `success`, `warning`, `error`, and `disabled`. ```html:preview
``` ### Custom Title and Subtitle The `title` and `subtitle` attributes cover plain text. For richer content, use the `title` and `subtitle` slots — they override the matching attribute (which is used as the fallback when the slot is empty). ```html:preview
Jane Cooper Billing question · #4821
``` ### Custom Leading Content Use the `leading` slot to replace the leading icon in the active state. ```html:preview
``` ### Custom Action Use the `action` slot to replace the default accept button on an available tile — for example with a form. ```html:preview
``` ### Footer Use the `footer` slot for trailing content such as status badges in the active state. ```html:preview
SLA
```