Group

Compose elements and components in a horizontal flex container
Import

Usage

Spacing
xs
sm
md
lg
xl
import { Group, Button } from '@mantine/core';
function Demo() {
return (
<Group>
<Button variant="outline">1</Button>
<Button variant="outline">2</Button>
<Button variant="outline">3</Button>
</Group>
);
}

Group children

!important Group works correctly only with React elements. Strings, numbers, fragments may have incorrect styles if grow prop is set:

// Invalid Group usage, do not do this
import { Group } from '@mantine/core';
function InvalidDemo() {
return (
<Group>
First string
<>
<div>element inside fragment</div>
<div>another inside fragment</div>
</>
{20}
</Group>
);
}

Browser support

Group uses flexbox gap to add spacing between children. In older browsers Group children will not have spacing.

Download more icon variants from https://tabler-icons.io/i/search

Group component props

NameTypeDescription
align
AlignItems
Defines align-items css property
grow
boolean
Defines flex-grow property for each element, true -> 1, false -> 0
noWrap
boolean
Defined flex-wrap property
position
"left" | "right" | "center" | "apart"
Defines justify-content property
spacing
number | "xs" | "sm" | "md" | "lg" | "xl"
Space between elements