I9kCluster

Flex-wrap row that keeps items center-aligned and evenly gapped, wrapping onto new lines instead of overflowing. Use it for groups of buttons, badges, or other inline controls.

View as MarkdownView source

import { I9kCluster } from '@9klabs/design';

Examples

Default

Status

<I9kCluster>
  <I9kButton>Primary action</I9kButton>
  <I9kButton variant="link">Secondary action</I9kButton>
  <I9kBadge variant="outline">Status</I9kBadge>
</I9kCluster>

Sizes

SmallCluster

LargeCluster

<div style="display: grid; gap: var(--spacing-8)">
  <I9kCluster size="sm"><I9kBadge>Small</I9kBadge><I9kBadge>Cluster</I9kBadge></I9kCluster>
  <I9kCluster size="lg"><I9kBadge>Large</I9kBadge><I9kBadge>Cluster</I9kBadge></I9kCluster>
</div>

Wrapping

#Design systems#Vue#Accessibility#RTL

<I9kCluster style="max-width: 16rem">
  <I9kBadge variant="tag">Design systems</I9kBadge>
  <I9kBadge variant="tag">Vue</I9kBadge>
  <I9kBadge variant="tag">Accessibility</I9kBadge>
  <I9kBadge variant="tag">RTL</I9kBadge>
</I9kCluster>

Watch out

• size sets the gap only — there is no column or breakpoint prop, wrapping is automatic flex-wrap.
• Items are center-aligned on the cross axis, not baseline-aligned.

API

Props

Prop	Type	Default	Required
as	string | Component	'div'	no
size	'sm' | 'md' | 'lg'	'md'	no

Slots

• default

Agent prompt

Paste this into an agent to have it use the component correctly. It is self-contained.

Use I9kCluster from @9klabs/design to lay out a horizontal group of items that should wrap instead of overflow.

import { I9kCluster } from '@9klabs/design';

Props:
- as?: string | Component (default 'div') — the rendered root tag or component.
- size?: 'sm' | 'md' | 'lg' (default 'md') — sets the gap between items only.

Emits: none.

Slots: default — the items to cluster.

Behavior: renders `display: flex; flex-wrap: wrap; align-items: center;` with a size-driven gap. Items wrap onto new rows as the container narrows; there is no column count or breakpoint logic to configure.

IMPORTANT: items are vertically centered (`align-items: center`), not baseline-aligned — mixed-height items (e.g. a button next to a badge) line up on their centers, not their text baselines.

Usage:
<I9kCluster size="md"><I9kButton>Primary action</I9kButton><I9kButton variant="link">Secondary action</I9kButton><I9kBadge variant="outline">Status</I9kBadge></I9kCluster>