Skip to main content
WireKit
Copy for LLM

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

A band under a header

Inbox

24

Message list goes here. 

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

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.

Top, bottom and both

edge="bottom"

content between two bands

edge="top" 

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

A footer band on a subtle surface

Draft saved a moment ago. 

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

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