Button Group
import React from 'react';
import { Button, ButtonGroup } from 'reactstrap';
export default class Example extends React.Component {
render() {
return (
<ButtonGroup>
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
);
}
}
Properties
ButtonGroup.propTypes = {
ariaLabel: PropTypes.string,
className: PropTypes.string,
role: PropTypes.string,
size: PropTypes.string,
vertical: PropTypes.bool
};
import React from 'react';
import { Button, ButtonGroup, ButtonToolbar } from 'reactstrap';
export default class Example extends React.Component {
render() {
return (
<ButtonToolbar>
<ButtonGroup>
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
</ButtonGroup>
<ButtonGroup>
<Button>5</Button>
<Button>6</Button>
<Button>7</Button>
</ButtonGroup>
<ButtonGroup>
<Button>8</Button>
</ButtonGroup>
</ButtonToolbar>
);
}
}
Sizing
<ButtonGroup size="lg">
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
<ButtonGroup>
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
<ButtonGroup size="sm">
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
Nesting
<ButtonGroup>
<Button>1</Button>
<Button>2</Button>
<ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Dropdown Link</DropdownItem>
<DropdownItem>Dropdown Link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
Vertical variation
<ButtonGroup vertical>
<Button>1</Button>
<Button>2</Button>
<ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Dropdown Link</DropdownItem>
<DropdownItem>Dropdown Link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>