Default cluster
All
Design
Code
Accessibility
Docs
Performance
Customize alignment and gap
React
Vue
Svelte
Web Components
Solid
Layout
Cluster
The .cluster layout groups tags, buttons, filters, and other inline controls with consistent spacing, and wraps them to prevent overflow.
Usage
- Add
class="cluster"to the parent element. - Place items as direct children.
Use these optional custom properties to adjust the layout:
--gap: Sets the space between items (default token value: ).--cluster-horizontal-alignment: Aligns items horizontally (fallback:flex-start).--cluster-vertical-alignment: Aligns items vertically (fallback:center).