Group

Arranges children in a horizontal flex row. Control spacing with gap, distribution with justify, and cross-axis alignment with align.

Default

<Group>
  <Button>First</Button>
  <Button variant="light">Second</Button>
  <Button variant="outline">Third</Button>
</Group>

Gap

gap="xs"
B
C
gap="sm"
B
C
gap="md"
B
C
gap="lg"
B
C
gap="xl"
B
C
<Group gap="xs"><Badge>A</Badge><Badge>B</Badge></Group>
<Group gap="sm"><Badge>A</Badge><Badge>B</Badge></Group>
<Group gap="md"><Badge>A</Badge><Badge>B</Badge></Group>
<Group gap="lg"><Badge>A</Badge><Badge>B</Badge></Group>
<Group gap="xl"><Badge>A</Badge><Badge>B</Badge></Group>

Justify

flex-start
B
C
center
B
C
flex-end
B
C
space-between
B
C
<Group justify="flex-start">...</Group>
<Group justify="center">...</Group>
<Group justify="flex-end">...</Group>
<Group justify="space-between">...</Group>

Align

<Group align="flex-start">
  <Button size="lg">Tall</Button>
  <Button size="xs">Short</Button>
</Group>

Grow

<Group grow>
  <Button>A</Button>
  <Button variant="light">B</Button>
  <Button variant="outline">C</Button>
</Group>

Wrap

One
Two
Three
Four
Five
Six
<Group wrap="wrap" gap="xs">
  <Badge>One</Badge>
  <Badge>Two</Badge>
  <Badge>Three</Badge>
  <Badge>Four</Badge>
</Group>

Props

PropTypeDefaultDescription
gap'xs' | 'sm' | 'md' | 'lg' | 'xl'—Space between children
align'stretch' | 'center' | 'flex-start' | 'flex-end' | 'baseline'—Cross-axis alignment
justify'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'—Main-axis distribution
wrap'wrap' | 'nowrap' | 'wrap-reverse'—Wrapping behaviour
growbooleanfalseEach child grows equally to fill the row
preventGrowOverflowbooleantrueStops grown children from overflowing their flex basis
componentstring'div'Root HTML element