Skip to main content
xoji

Cluster
Info:Layout html svelte astro Success: coverage 9/9

A horizontal flex row that wraps, for toolbars, tag lists, and inline action groups.

Live demo

live · @xoji/astro

Cluster

Action toolbar

A cluster centers its children and wraps gracefully — the workhorse for inline button groups.

Wrapping tag list

Many children flow onto new rows; the same gap applies both between items and across wrapped rows.

oklch derivation open-register coverage xript gauntlet tokens astro

Distribution

justify controls main-axis spread — useful for split headers and footers.

justify=start

justify=between

justify=end

Cluster lays its children out in a horizontal flex row that wraps onto new lines as space runs out, with a token-driven gap (0–8) between every item, including across wrapped rows. It vertically centers its children by default and exposes align and justify for finer control.

A nowrap flag pins everything to a single row when wrapping is unwanted. Like Stack it carries no chrome of its own, making it the natural home for button groups, badge and tag lists, breadcrumb trails, and any run of inline-ish boxes that should breathe consistently.

When to use

How this component composes with the rest of the set.

The horizontal counterpart to Stack; reach for Grid when items need to line up in columns.
Use for button groups, badge/tag lists, breadcrumbs, and toolbar runs.
Set nowrap for single-row controls like a segmented toolbar; leave it off for tag clouds that should reflow.

Props

5 props, straight from the manifest.

PropTypeDefaultBindingsDescription
gap number
0 1 2 3 4 5 6 7 8
2
html svelte astro
Spacing between children (and across wrapped rows), as a step on the `--space` scale (0–8).
align ClusterAlign
start center end stretch baseline
—
html svelte astro
Cross-axis alignment (`align-items`). Defaults to centered.
justify ClusterJustify
start center end between around evenly
—
html svelte astro
Main-axis distribution (`justify-content`).
nowrap boolean false
html svelte astro
Pins children to a single row instead of letting them wrap.
inline boolean false
html svelte astro
Renders as an inline-flex row instead of a block-level one.

Anatomy

The named parts that make up the component, with their selectors.

root

 .xoji-cluster

The wrapping flex-row container carrying the gap, align, and justify classes.
--space-2

Tokens & coverage

What the component consumes, checked live against what the algorithm produces.

Success:fully covered 9/9 consumed tokens produced default register: 276 tokens

Live coverage check against the xoji-default register (derive(xojiDefault, { anchors }) → coverComponent(manifest, register)). Every token this component consumes must be a key the algorithm produces.

--space-0 --space-1 --space-2 --space-3 --space-4 --space-5 --space-6 --space-7 --space-8

Slots
default
html svelte astro

The children to arrange in a wrapping row.

Accessibility
A generic presentational container with no implicit semantics. It adds no roles and announces nothing.
Wrap in a landmark or list element (<nav>, <ul>) where the run of items carries meaning.

Code

Wrapping row

Children flow left to right and wrap onto new lines, gapped consistently in both axes.

 
<xoji-cluster gap="2">
	<xoji-button variant="solid" tone="accent">Save</xoji-button>
	<xoji-button variant="outline" tone="neutral">Cancel</xoji-button>
</xoji-cluster>

<xoji-cluster gap="1" justify="between">
	<xoji-badge tone="success">Active</xoji-badge>
	<xoji-badge tone="info">Beta</xoji-badge>
	<xoji-badge tone="warn">Limited</xoji-badge>
</xoji-cluster>
 
<script lang="ts">
	import { Cluster, Button, Badge } from "@xoji/svelte";
</script>

<Cluster gap={2}>
	<Button variant="solid" tone="accent">Save</Button>
	<Button variant="outline" tone="neutral">Cancel</Button>
</Cluster>

<Cluster gap={1} justify="between">
	<Badge tone="success">Active</Badge>
	<Badge tone="info">Beta</Badge>
	<Badge tone="warn">Limited</Badge>
</Cluster>
 
---
import { Cluster, Button, Badge } from "@xoji/astro";
---

<Cluster gap={2}>
	<Button variant="solid" tone="accent">Save</Button>
	<Button variant="outline" tone="neutral">Cancel</Button>
</Cluster>

<Cluster gap={1} justify="between">
	<Badge tone="success">Active</Badge>
	<Badge tone="info">Beta</Badge>
	<Badge tone="warn">Limited</Badge>
</Cluster>