Group

Compose elements and components in flex container
Import

Usage

Group allows you to compose any elements and components in a 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
Direction
Spacing
xs
sm
md
lg
xl
<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, 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>
Build fully functional accessible web applications faster than ever
Feedback
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