Column — dotmatrix

Flex fixed to direction: column. The default vertical layout primitive — every stacked group of content in this documentation site is built from it.

tsx

<Column gap="8">
  <Text>A</Text>
  <Text>B</Text>
</Column>

tsx

<Column>
  ...
</Column>

Examples

gap alone is almost always the right way to space stacked content — reaching for a marginBottom on every child instead tends to double up once something changes order or gets conditionally hidden:

tsx

Title

Some supporting copy.

<Column gap="16">
  <Heading as="h2">Title</Heading>
  <Text>Some supporting copy.</Text>
  <Button>Continue</Button>
</Column>

alignItems="center" centers children along the cross axis (horizontally, for a Column) — handy for a centered empty state or a modal's content without hand-picking margins:

tsx

<Column gap="8" alignItems="center">
  <Icon name="check" size="l" />
  <Text weight="medium">All done</Text>
</Column>

Props

Prop	Type	Default	Description
href	text	—	Shorthand for `as="a"` — see system/ElementType.tsx.