Stack component manages the vertical or horizontal layout of direct children using flexbox and adjustable spacing.

Open in new tab 
import { Stack } from "@kesko/components";

export default () => (
  <Stack direction="row" gap="sm" align="center">
    <div>First</div>
    <div>Second</div>
    <div>Third</div>
  </Stack>
);
import { Button, Stack } from "@kesko/components";

export default () => (
  <Stack gap="sm">
    <Button variant="primary">Column, gap sm</Button>
    <Button variant="primary">Column, gap sm</Button>
    <Button variant="primary">Column, gap sm</Button>
  </Stack>
);
import { Button, Stack } from "@kesko/components";

export default () => (
  <Stack direction="row" gap="sm" align="center">
    <Button variant="primary">Row, gap sm</Button>
    <Button variant="primary">Row, gap sm</Button>
    <Button variant="primary">Row, gap sm</Button>
  </Stack>
);

Props

NameTypeDefaultDescription
direction"column" | "row""column"

Layout direction. Defaults to "column".

gap"3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl""md"

Gap between children, mapped to the --k-space- scale. Defaults to "md".

align"start" | "center" | "end" | "stretch""start"

Cross-axis alignment. Defaults to "start".

wrapbooleanfalse

Allow items to wrap to a new line when they overflow the container.

CSS custom properties

CSS custom properties provide finer-grained control than props. Prefer the props API when it suits your need.

NameDescriptionDefault
--k-stack-gap

Overrides the gap between children.

var(--k-space-md)