v4.2.12

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

Group component uses className prop to add styles to its children, child components must accept it::

// Will not work with Group – component does not handle className
const MyButton = ({ label }) => <button>{label}</button>;


// Will work with Group – handles className
const MyButton = ({ label, className }) => <button className={className}>{label}</button>;


// Will work with Group – handles className
const MyButton = ({ label, ...others }) => <button {...others}>{label}</button>;

!important Group will work only with React elements. Strings, numbers, fragments and other parts will not have correct styles:

// Invalid Group usage, do not do this
import { Group } from '@mantine/core';


function InvalidDemo() {
  return (
    <Group>
      First string
      <>
        <div>element 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
Build fully functional accessible web applications faster than ever
About
ContributeMedia assetsChangelogReleases
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