---
name: ButtonGroup
menu: General
route: components/buttonGroup
---

import { Playground, Props } from 'docz';
import { ButtonGroup, Button, IconButton, Icon } from '@ohif/ui';

# ButtonGroup

Group Button display buttons together sharing its configurations

## Import

```javascript
import { ButtonGroup } from '@ohif/ui';
```

## Basic button group

<Playground>
  <div className="p-4 flex flex-col items-center">
    <ButtonGroup color="primary" className="m-2">
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Tree</Button>
    </ButtonGroup>
    <ButtonGroup color="primary" variant="contained" className="m-2">
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Tree</Button>
    </ButtonGroup>
    <ButtonGroup color="primary" variant="text" className="m-2">
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Tree</Button>
    </ButtonGroup>
  </div>
</Playground>

## Group sizes and colorss

<Playground>
  <div className="p-4 flex flex-col items-center">
    <ButtonGroup color="default" size="small" className="m-2">
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Tree</Button>
    </ButtonGroup>
    <ButtonGroup color="primary" size="medium" className="m-2">
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Tree</Button>
    </ButtonGroup>
    <ButtonGroup color="secondary" size="large" className="m-2">
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Tree</Button>
    </ButtonGroup>
  </div>
</Playground>

## Group orientation

<Playground>
  <div className="p-4 flex flex-row justify-center">
    <ButtonGroup orientation="vertical" color="primary" className="m-2">
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Tree</Button>
    </ButtonGroup>
    <ButtonGroup
      orientation="vertical"
      color="primary"
      variant="contained"
      className="m-2"
    >
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Tree</Button>
    </ButtonGroup>
    <ButtonGroup
      orientation="vertical"
      color="primary"
      variant="text"
      className="m-2"
    >
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Tree</Button>
    </ButtonGroup>
  </div>
</Playground>

## Split Button

<Playground>
  <div className="p-4 flex flex-col items-center">
    <ButtonGroup color="primary" className="m-2">
      <Button>Options</Button>
      <IconButton className="mr-2">
        <Icon name="settings" />
      </IconButton>
    </ButtonGroup>
  </div>
</Playground>

## Properties

<Props of={ButtonGroup} />