Compose elements and components in flex container


Group allows you to compose any elements and components in flex container. Use these props to change elements position inside Group:

  • position controls justify-content property
  • grow flex-grow property, items will never wrap to next line if set to true
  • spacing controls space between elements – predefined values from theme.spacing or number for spacing in px
  • noWrap controls flex-wrap property and if set to true prevents elements from wrapping on next line once space on current line was exceeded
  • direction controls flex-direction: row (default) for horizontal orientation, column for vertical
  • withGutter when true, adds padding (equal to spacing prop) to the root component, defaults to false
<Button variant="outline">1</Button>
<Button variant="outline">2</Button>
<Button variant="outline">3</Button>

Group children

Group component uses className prop to add styles, child components must accept it otherwise unexpected negative margins will be applied the element:

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

With divider

You can use Divider component to add additional visual separation and spacing:

<Group position="center">
<Divider orientation="vertical" margins="sm" />
<Divider orientation="vertical" margins="sm" />
Build fully functional accessible web applications with ease
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback