Library · Foundations

Cluster

Horizontal wrapping group for button rows, tag lists, logo rows — wrap flex with a --space-* token gap.

Live preview — edit theme bottom-right

---
import Cluster from "../components/primitives/layout/Cluster.astro";
import Button from "../components/primitives/button/Button.astro";
import Badge from "../components/primitives/badge/Badge.astro";
---
<Cluster gap="s">
  <Button as="a" href="#" class="button-cta">Enquire now</Button>
  <Button as="a" href="#" variant="outlined" type="primary">Download brochure</Button>
</Cluster>
<Cluster gap="2xs" justify="start">
  <Badge type="info">3 bed</Badge>
  <Badge type="info">2 bath</Badge>
  <Badge type="info">2 car</Badge>
  <Badge type="success">Titled land</Badge>
</Cluster>

Props

Name	Type	Required	Description
`gap`	`'5xs' \| '4xs' \| '3xs' \| '2xs' \| 'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| '2xl' \| '3xl' \| '4xl' \| '5xl'`	—	Gap between children as a --space-* token name (default: 's')
`align`	`'center' \| 'start' \| 'end' \| 'baseline'`	—	Cross-axis alignment (default: 'center')
`justify`	`'start' \| 'center' \| 'end' \| 'between'`	—	Main-axis distribution (default: 'start')
`class`	`string`	—	Additional classes
`[key: string]`	`unknown`	—	HTML attributes
`(slot)`	`children`	—	Clustered children.

Example with all props

<Cluster gap="s" align="center" justify="start" class="cta-row">
  <Button as="a" href="/contact" class="button-cta">Enquire</Button>
  <Button as="a" href="/brochure" variant="outlined">Download brochure</Button>
</Cluster>