Group

Compose elements and components in a horizontal flex container
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

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.

Go back
Grid – @mantine/core
Up next
MediaQuery – @mantine/core

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
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter