Layout primitive that arranges children in a row or column with consistent gaps.
align?'start'|'center'|'end'|'stretch'children?ReactNodedirection?'row'|'column''column'gap?GapSize'md'justify?'start'|'center'|'end''between'padding?PaddingSize| Prop | Type | Default |
|---|---|---|
align? | 'start'|'center'|'end'|'stretch' | - |
children? | ReactNode | - |
direction? | 'row'|'column' | 'column' |
gap? | GapSize | 'md' |
justify? | 'start'|'center'|'end'|'between' | - |
padding? |
Type base (some attrs are managed internally): HTMLAttributes<HTMLDivElement>
PaddingSize| - |
import { Stack } from '@k8ordo/ui';<Stack direction="row" gap="sm">
<Badge label="Active" tone="success" />
<Badge label="Pending" tone="warning" />
<Badge label="Error" tone="error" />
</Stack><Stack direction="column" gap="sm">…</Stack>
<Stack direction="row" gap="sm">…</Stack><Stack direction="row" align="center" justify="between">…</Stack><Stack direction="row" gap="none|sm|md|lg|xl">…</Stack>