Components / layout

layout · @awesome-ds/react

Cluster

Wrapping horizontal cluster.

Rules: rule.foundations.semantic-tokens

State matrix

idlerequired

Anatomy

  • wrapping flex container
  • inline children
  • tokenized gaps

Keyboard contract

Wrapping never changes DOM or keyboard focus order.

Screen-reader contract

Adds no role and preserves logical reading order.

Content rules

  • Use for peer controls or metadata.
  • Do not imply sequence through visual position alone.

Public API

PropTyperequiredDescription
childrenReactNode—Inline peers
…nativeHTMLAttributes<HTMLDivElement>—Native div attributes

Adaptation contracts

RTL
Logical properties and DOM order determine layout and reading order.
High contrast
Never clip descendant outlines or depend on decorative surfaces for grouping.
Reduced motion
Responsive reflow is immediate and does not animate layout geometry.

Verification IDs

Cluster/wrap-order

Live

Live

ABC

Copyable example

import { Cluster } from "@awesome-ds/react";

<Cluster>…</Cluster>