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

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: neither edge is the common case, so the default is a convenience rather than a recommendation. 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" intent="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>

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.

Props

Prop	Type	Default	Description
`edge`	string	`'bottom'`	Which edge carries the rule: `none`, `top`, `bottom`, `both`
`padding`	string	`'sm'`	Inline and block padding: `none`, `xs`, `sm`, `md`, `lg`
`surface`	string	`'none'`	Background treatment for the occasional band that is not on the page background: `none`, `subtle`, `muted`
`as`	string	`'div'`	The element to render. Use a landmark element when the band is one
`scope`	string\|null	`null`	Scoped personalization name

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.

Band

Basic

Which edge

Padding and surface

Why not toolbar, container or card.header

When a band does carry meaning

Props

Keyboard Interaction

Was this page helpful?

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