Cluster
import { Cluster } from "@combric/react";
export function Example() {
return <Cluster gap="2"><button type="button">Save</button><button type="button">Cancel</button><button type="button">Preview</button></Cluster>;
}Cluster
Wrapping horizontal group for actions and metadata.
@combric/layout · v1.1.1 · Current
Import and usage
import { Cluster } from "@combric/react";The framework-independent CSS contract is available from@combric/layout/css; the React wrapper comes from@combric/react.
Examples
Alignment options
import { Button, Cluster, Stack } from "@combric/react";
export function Example() {
return <Stack gap="3"><Cluster gap="2" align="start"><Button size="sm">Start</Button><Button size="lg">Value</Button></Cluster><Cluster gap="2" align="center"><Button size="sm">Center</Button><Button size="lg">Value</Button></Cluster><Cluster gap="2" align="end"><Button size="sm">End</Button><Button size="lg">Value</Button></Cluster><Cluster gap="2" align="baseline"><Button size="sm">Baseline</Button><Button size="lg">Value</Button></Cluster></Stack>;
}Public API
| Name |
|---|
Cluster |
| Contract |
|---|
| gap |
| align: start | center | end | baseline |
Accessibility
Layout changes presentation only. Choose semantic elements and preserve meaningful source order; Combric does not add ARIA, reorder content, or measure the viewport.