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

import { Playground, Props } from 'docz';
import Button from '../Button';
import IconButton from './../IconButton';
import Icon from './../Icon';
import ButtonGroup from './';

# ButtonGroup

Group Button display buttons together sharing its configurations

## Import

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

## Basic button group

<Playground>
  <div className="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="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="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="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} />