Group

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

<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>;