Button Group

Button Group

<div id="button-groups">
  <p>
    <span id="button-group"></span>
  </p>
  <p>
    <span id="button-group-with-caption"></span>
  </p>
  <p>
    <span id="button-group-wrapped"></span>
  </p>
</div>

import React from 'react';
import {render} from 'react-dom';
import Button from '@jetbrains/ring-ui/components/button/button';
import ButtonGroup, {Caption} from '@jetbrains/ring-ui/components/button-group/button-group';

render(
<ButtonGroup>
  <Button>1st button</Button>
  <Button active>2nd button</Button>
  <Button disabled>3rd button</Button>
  <Button>4th button</Button>
  <Button short>...</Button>
</ButtonGroup>
,
document.getElementById('button-group'));

render(
<ButtonGroup>
  <Caption>Side:</Caption>
  <Button>Left</Button>
  <Button>Right</Button>
</ButtonGroup>
, document.getElementById('button-group-with-caption'));

render(
<ButtonGroup>
  <span><Button>1st button</Button></span>
  <span><Button>2nd button</Button></span>
  <Button>3rd button</Button>
</ButtonGroup>
, document.getElementById('button-group-wrapped')
);