---
title: Band
description: An edge-to-edge strip with padding and a single rule — the divider between two areas of a multi-band window.
visibility: guest
related:
  - /components/card
  - /components/row
  - /components/toolbar
---

# Band

A band is the strip that separates two areas of a window: the search field under a toolbar, the
composer under a message list, the action row along the bottom. Padding, and one rule on one
edge.

It renders a plain `<div>` with no ARIA role, and that is the design rather than an oversight.
The shape is chrome, not meaning.

## Basic

:::preview{title="A band under a header"}
<x-wirekit::stack gap="none">
    <x-wirekit::band edge="bottom">
        <x-wirekit::row justify="between" align="center">
            <x-wirekit::text weight="medium">Inbox</x-wirekit::text>
            <x-wirekit::badge>24</x-wirekit::badge>
        </x-wirekit::row>
    </x-wirekit::band>
    <x-wirekit::band edge="none" padding="md">
        <x-wirekit::text>Message list goes here.</x-wirekit::text>
    </x-wirekit::band>
</x-wirekit::stack>
:::

## Which edge

`edge` takes `top`, `bottom`, `both` or `none`.

::: info
The default is `bottom`, and it is a coin toss made explicit: across the blueprint catalog the
split is exactly 12 bands ruled on top and 12 on the bottom. Say which one you mean at the call
site rather than relying on the default to match your layout.
:::

:::preview{title="Top, bottom and both"}
<x-wirekit::stack gap="none">
    <x-wirekit::band edge="bottom"><x-wirekit::text size="sm">edge="bottom"</x-wirekit::text></x-wirekit::band>
    <x-wirekit::band edge="none" padding="md"><x-wirekit::text size="sm" variant="muted">content between two bands</x-wirekit::text></x-wirekit::band>
    <x-wirekit::band edge="top"><x-wirekit::text size="sm">edge="top"</x-wirekit::text></x-wirekit::band>
</x-wirekit::stack>
:::

## Padding and surface

`padding` takes `none`, `xs`, `sm`, `md` or `lg` on the token scale. `surface` takes `none`,
`subtle` or `muted` for the band that sits on its own background.

:::preview{title="A footer band on a subtle surface"}
<x-wirekit::stack gap="none">
    <x-wirekit::band edge="none" padding="md">
        <x-wirekit::text>Draft saved a moment ago.</x-wirekit::text>
    </x-wirekit::band>
    <x-wirekit::band edge="top" padding="md" surface="subtle">
        <x-wirekit::row justify="end" gap="sm">
            <x-wirekit::button intent="neutral" surface="ghost" size="sm">Discard</x-wirekit::button>
            <x-wirekit::button size="sm">Send</x-wirekit::button>
        </x-wirekit::row>
    </x-wirekit::band>
</x-wirekit::stack>
:::

## Why not `toolbar`, `container` or `card.header`

All three were considered and rejected, and the reasons are worth knowing because they are the
reasons a band exists at all.

| Candidate | Why it does not fit |
|---|---|
| `toolbar` | renders `role="toolbar"`, an ARIA composite widget promising operable controls with arrow-key navigation. A band holding one search field does not deliver that, and the role would be a promise the surface does not keep. |
| `container` | caps and centers its width. A band runs edge to edge; capping it is the opposite of the point. |
| `card.header` / `card.footer` | bring exactly this shape — and only at the two ends of a card. A window with seven bands has two of them. |

## When a band does carry meaning

Use `as` when the strip is a real landmark, and give it a name:

```blade
{{-- A band that IS the page footer, not one that merely looks like one. --}}
<x-wirekit::band as="footer" edge="top" aria-label="Page actions">
    …
</x-wirekit::band>
```

Without `as`, no role is emitted and none is implied.

## Keyboard Interaction

A band is a layout wrapper and takes no focus of its own. Keyboard interaction belongs to
whatever it contains — and that is the reason it emits no `role`: a `role="toolbar"` would
announce arrow-key navigation between the controls inside, which nothing here implements.