Group

Usage

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

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

With divider

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

<Group position="center">
  <Badge>Badge</Badge>
  <Divider orientation="vertical" margins="sm" />
  <Badge>Badge</Badge>
  <Divider orientation="vertical" margins="sm" />
  <Badge>Badge</Badge>
</Group>