Cluster
Lays children out in a horizontal row that wraps to new lines as needed.
Import
import { Cluster } from "@hyzer-labs/ui"Demo
gap is the space between chips, on both axes when the row wraps. The tinted
zone is the Cluster; the space between its edge and the chips is the padding. padding applies on both axes; paddingInline and paddingBlock override one axis and win where
set. Both stay correct in RTL and vertical writing modes. near and away are the density distances:
context-aware values that tighten inside data-density-shift regions.
<Cluster gap="sm" padding="md">…</Cluster>
<Cluster gap="sm" paddingInline="md">…</Cluster>
<Cluster gap="sm" paddingBlock="md">…</Cluster>justify distributes the row's leftover inline space. between pushes the first and last children to the edges.
<Cluster justify="start">
<span class="chip">One</span>
<span class="chip">Two</span>
<span class="chip">Three</span>
</Cluster>align positions children of different heights on the cross axis. baseline lines up their text baselines regardless of box size.
<Cluster align="center">
<span class="chip">small</span>
<span class="chip chip--lg">large type</span>
<span class="chip chip--tall">tall box</span>
</Cluster>The default wraps onto new lines as space runs out. wrap={false} keeps a
single line. The second demo sits in a scrollable wrapper, so the overflow is reachable.
wrap (default)
wrap={false}
<Cluster>…sixteen chips…</Cluster>
<!-- nowrap keeps one line; pair with overflow-x on a wrapper to scroll -->
<Cluster wrap={false}>…sixteen chips…</Cluster>Props
| Name | Type | Default | Note |
|---|---|---|---|
gap | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'near' | 'away' | 'sm' | near/away are the density distances — they tighten inside data-density-shift regions. |
justify | 'start' | 'center' | 'end' | 'between' | 'around' | 'start' | |
align | 'start' | 'center' | 'end' | 'stretch' | 'baseline' | 'center' | Shared LayoutAlign scale (Stack/Cluster/Grid). |
wrap | boolean | true | |
padding | 'none' | 'sm' | 'md' | 'lg' | 'near' | 'away' | 'none' | Both axes. Shared LayoutPadding scale — near/away tighten inside data-density-shift regions. |
paddingInline | 'none' | 'sm' | 'md' | 'lg' | 'near' | 'away' | — | Per-axis override — wins over padding on the inline axis. Same LayoutPadding scale. |
paddingBlock | 'none' | 'sm' | 'md' | 'lg' | 'near' | 'away' | — | Per-axis override — wins over padding on the block axis. Same LayoutPadding scale. |
as | string | 'div' | |
class | string | — | Merged after the hz-cluster class. |
children | Snippet | — |
Anything not listed above is forwarded as an attribute to the root element (or the native control in form components). So id, data-*, aria-*, and event handlers just work.
Theme hooks
What this component promises your CSS. The reference theme styles exactly these — from @layer hz-theme, so your unlayered rules win. See Styling Components for the how.
Root class: .hz-cluster
Data attributes
| Hook | Values | Styles |
|---|---|---|
data-gap | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'near' | 'away' | Gap between items. Default sm. |
data-justify | 'start' | 'center' | 'end' | 'between' | 'around' | justify-content. Default start. |
data-align | 'start' | 'center' | 'end' | 'stretch' | 'baseline' | align-items. Default center. |
data-wrap | present when wrapping | Present by default; its absence is styled too (:not([data-wrap]) sets nowrap). |
data-padding | 'none' | 'sm' | 'md' | 'lg' | 'near' | 'away' | Padding on both axes. Default none. |
Accessibility
Cluster is a layout primitive with no ARIA semantics. Reading and focus order follow DOM order.