Cluster

Cluster lays out children in a horizontal row that wraps to multiple lines with a consistent gap. Its reason to exist is the wrap — items flow to new rows without losing the shared spacing. justify aligns the row.

Use it for

• Tag / chip lists — the most common case, where the set can overflow to new rows
• Action button rows, usually with justify="end"
• Any horizontal group of peers that should wrap rather than overflow

Import

import { Cluster } from '@brikdesigns/bds';

Variants

Gap

The spacing scale — tiny through xl (default sm). The gap applies both between items and between wrapped rows.

<Cluster gap="xs">…</Cluster>

Justify

justify aligns items along the row — start (default behavior), center, end, or between.

<Cluster justify="end">…</Cluster>

When not to use

• For a two-dimensional grid of equal-width cells, use Grid.

Accessibility

• Renders a plain element (<div> by default, override with as) with display: flex; flex-wrap: wrap. It adds no semantics; children keep their own roles.

API

Plus all standard HTML attributes for the rendered element.

Related

• Stack — one-axis layout that doesn't wrap
• Grid — two-axis layout
• Storybook playground