ButtonGroup

<ButtonGroup>
  <Button>
    Select Action
  </Button>
  <Button square>
    <Icon>
      pen_edit
    </Icon>
  </Button>
</ButtonGroup>

<div class="btn-group">
  <button class="btn" type="button" role="button">Select Action</button>
  <button class="btn btn-square" type="button" role="button">
    <i class="uikon">pen_edit</i>
  </button>
</div>

<ButtonGroup>
  <Button primary>
    1st Pill
  </Button>
  <Button primary>
    2nd pill
  </Button>
  <Button primary>
    3rd pill
  </Button>
</ButtonGroup>

<div class="btn-group">
  <button class="btn btn-primary" type="button" role="button">1st Pill</button>
  <button class="btn btn-primary" type="button" role="button">2nd pill</button>
  <button class="btn btn-primary" type="button" role="button">3rd pill</button>
</div>

<ButtonGroup vertical>
  <Button primary>
    1st Pill
  </Button>
  <Button primary>
    2nd pill
  </Button>
  <Button primary>
    3rd pill
  </Button>
</ButtonGroup>

<div class="btn-group-vertical">
  <button class="btn btn-primary" type="button" role="button">1st Pill</button>
  <button class="btn btn-primary" type="button" role="button">2nd pill</button>
  <button class="btn btn-primary" type="button" role="button">3rd pill</button>
</div>

<ButtonGroup sm>
  <Button>
    Small Buttons
  </Button>
  <Button square>
    <Icon>
      pen_edit
    </Icon>
  </Button>
</ButtonGroup>

<div class="btn-group btn-group-sm">
  <button class="btn" type="button" role="button">Small Buttons</button>
  <button class="btn btn-square" type="button" role="button">
    <i class="uikon">pen_edit</i>
  </button>
</div>

<ButtonGroup>
  <Button>
    Regular
  </Button>
  <Button square>
    <Icon>
      pen_edit
    </Icon>
  </Button>
</ButtonGroup>

<div class="btn-group">
  <button class="btn" type="button" role="button">Regular</button>
  <button class="btn btn-square" type="button" role="button">
    <i class="uikon">pen_edit</i>
  </button>
</div>

<ButtonGroup lg>
  <Button>
    Large Sized Buttons
  </Button>
  <Dropdown
    buttonProps={{
      square: true
    }}
    buttonText={<Icon>pen_edit</Icon>}
    menuPosition="bottom-left"
  >
    <DropdownItem>
      <Icon mr>
        pen_edit
      </Icon>
      Something here
    </DropdownItem>
  </Dropdown>
</ButtonGroup>

<div class="btn-group btn-group-lg">
  <button class="btn" type="button" role="button">Large Sized Buttons</button>
  <div class="outer-events-handler dropdown btn-group">
    <button class="btn btn-square dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false" type="button" role="button">
      <i class="uikon">pen_edit</i>
    </button>
    <div class="dropdown-menu bottom-left">
      <button class="btn dropdown-item" type="button" role="button">
        <i class="uikon mr">pen_edit</i>Something here
      </button>
    </div>
  </div>
</div>