Basic example
<ButtonGroup className="btn-group" role="group" aria-label="Basic example">
<Button variant="info" type="button" className="btn btn-wave"><i className="bi bi-skip-backward"></i></Button>
<Button variant="info" type="button" className="btn btn-wave"><i className="bi bi-pause"></i></Button>
<Button variant="info" type="button" className="btn btn-wave"><i className="bi bi-skip-forward"></i></Button>
</ButtonGroup>
Navigation
<ButtonGroup className="btn-group">
<Button variant='primary' active href="#!" className="btn active btn-wave" aria-current="page">Active link</Button>
<Button variant='primary' href="#!" className="btn">Link</Button>
<Button variant='primary' href="#!" className="btn ">Link</Button>
</ButtonGroup>
Mixed style
<ButtonGroup className="btn-group" role="group" aria-label="Basic mixed styles example">
<Button variant="danger" type="button" className="btn btn-wave">Left</Button>
<Button variant="warning" type="button" className="btn btn-wave">Middle</Button>
<Button variant="success" type="button" className="btn btn-wave">Right</Button>
</ButtonGroup>
Outline styled
<ButtonGroup className="btn-group" role="group" aria-label="Basic outlined example">
<Button variant="outline-primary" type="button" className="btn btn-wave">Left</Button>
<Button variant="outline-primary" type="button" className="btn btn-wave">Middle</Button>
<Button variant="outline-primary" type="button" className="btn btn-wave">Right</Button>
</ButtonGroup>
Checkbox button groups
<ButtonGroup className="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" className="btn-check" id="btncheck1"/>
<Button variant='outline-primary' className="btn btn-">Checkbox 1</Button>
<input type="checkbox" className="btn-check" id="btncheck2"/>
<label className="btn btn-outline-primary" htmlFor="btncheck2">Checkbox 2</label>
<input type="checkbox" className="btn-check" id="btncheck3"/>
<label className="btn btn-outline-primary" htmlFor="btncheck3">Checkbox 3</label>
</ButtonGroup>
Radio button groups
<ButtonGroup className="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" className="btn-check" name="btnradio" id="btnradio1"
defaultChecked/>
<label className="btn btn-outline-primary" htmlFor="btnradio1">Radio 1</label>
<input type="radio" className="btn-check" name="btnradio" id="btnradio2"
/>
<label className="btn btn-outline-primary" htmlFor="btnradio2">Radio 2</label>
<input type="radio" className="btn-check" name="btnradio" id="btnradio3"
/>
<label className="btn btn-outline-primary" htmlFor="btnradio3">Radio 3</label>
</ButtonGroup>
Sizing
<ButtonGroup className="btn-group btn-group-lg my-1" role="group" aria-label="Large button group">
<Button variant="outline-success" type="button" className="btn">Left</Button>
<Button variant="outline-success" type="button" className="btn">Middle</Button>
<Button variant="outline-success" type="button" className="btn">Right</Button>
</ButtonGroup>
<ButtonGroup className="btn-group my-1" role="group" aria-label="Default button group">
<Button variant="outline-success" type="button" className="btn">Left</Button>
<Button variant="outline-success" type="button" className="btn">Middle</Button>
<Button variant="outline-success" type="button" className="btn">Right</Button>
</ButtonGroup>
<ButtonGroup className="btn-group btn-group-sm my-1" role="group" aria-label="Small button group">
<Button variant="outline-success" type="button" className="btn">Left</Button>
<Button variant="outline-success" type="button" className="btn">Middle</Button>
<Button variant="outline-success" type="button" className="btn">Right</Button>
</ButtonGroup>
Button toolbar
<ButtonToolbar className="mb-4" role="toolbar"
aria-label="Toolbar with button groups">
<ButtonGroup className="btn-group me-2 my-1" role="group" aria-label="First group">
<Button variant="primary" type="button" className="btn">1</Button>
<Button variant="primary" type="button" className="btn">2</Button>
<Button variant="primary" type="button" className="btn">3</Button>
<Button variant="primary" type="button" className="btn">4</Button>
</ButtonGroup>
<ButtonGroup className="btn-group me-2 my-1" role="group" aria-label="Second group">
<Button variant="secondary" type="button" className="btn">5</Button>
<Button variant="secondary" type="button" className="btn">6</Button>
<Button variant="secondary" type="button" className="btn">7</Button>
</ButtonGroup>
<ButtonGroup className="btn-group my-1" role="group" aria-label="Third group">
<Button variant="info" type="button" className="btn btn-info">8</Button>
</ButtonGroup>
</ButtonToolbar>
<ButtonToolbar className="mb-3" role="toolbar"
aria-label="Toolbar with button groups">
<ButtonGroup className="btn-group me-2 my-1" role="group" aria-label="First group">
<Button variant="outline-secondary" type="button" className="btn">1</Button>
<Button variant="outline-secondary" type="button" className="btn">2</Button>
<Button variant="outline-secondary" type="button" className="btn">3</Button>
<Button variant="outline-secondary" type="button" className="btn">4</Button>
</ButtonGroup>
<InputGroup>
<InputGroup.Text id="btnGroupAddon">@</InputGroup.Text>
<Form.Control type="text"
placeholder="Input group example"
aria-label="Input group example"
aria-describedby="btnGroupAddon"/>
</InputGroup>
</ButtonToolbar>
<ButtonToolbar className="justify-content-between" role="toolbar"
aria-label="Toolbar with button groups">
<ButtonGroup className="btn-group my-1" role="group" aria-label="First group">
<Button variant="outline-secondary" type="button" className="btn">1</Button>
<Button variant="outline-secondary" type="button" className="btn">2</Button>
<Button variant="outline-secondary" type="button" className="btn">3</Button>
<Button variant="outline-secondary" type="button" className="btn">4</Button>
</ButtonGroup>
<InputGroup>
<InputGroup.Text id="btnGroupAddon2">@</InputGroup.Text>
<Form.Control type="text"
placeholder="Input group example"
aria-label="Input group example"
aria-describedby="btnGroupAddon2"/>
</InputGroup>
</ButtonToolbar>
Nesting
<ButtonGroup className="btn-group" role="group"
aria-label="Button group with nested dropdown">
<Button variant="" type="button" className="btn btn-primary">1</Button>
<Button variant="" type="button" className="btn btn-primary">2</Button>
<DropdownButton as={ButtonGroup} title="Dropdown" id="bg-nested-dropdown">
<Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
<Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
Vertical variation
<Col sm={3}>
<ButtonGroup vertical role="group" aria-label="Vertical button group">
<Button variant="primary" type="button" className="btn ">Button</Button>
<Button variant="primary" type="button" className="btn ">Button</Button>
<DropdownButton as={ButtonGroup} title="Dropdown" id="bg-vertical-dropdown-1">
<Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
<Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
</DropdownButton>
<Button variant="primary" type="button" className="btn ">Button</Button>
<Button variant="primary" type="button" className="btn ">Button</Button>
<DropdownButton as={ButtonGroup} title="Dropdown" id="bg-vertical-dropdown-1">
<Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
<Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
</DropdownButton>
<DropdownButton as={ButtonGroup} title="Dropdown" id="bg-vertical-dropdown-1">
<Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
<Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
</DropdownButton>
<DropdownButton as={ButtonGroup} title="Dropdown" id="bg-vertical-dropdown-1">
<Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
<Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
</Col>
<Col sm={3}>
<ButtonGroup vertical role="group" aria-label="Vertical button group">
<Button variant="" type="button" className="btn btn-info">Button</Button>
<Button variant="" type="button" className="btn btn-info">Button</Button>
<Button variant="" type="button" className="btn btn-info">Button</Button>
<Button variant="" type="button" className="btn btn-info">Button</Button>
<Button variant="" type="button" className="btn btn-info">Button</Button>
<Button variant="" type="button" className="btn btn-info">Button</Button>
</ButtonGroup>
</Col>
<Col sm={3}>
<ButtonGroup vertical role="group"
aria-label="Vertical radio toggle button group">
<input type="radio" className="btn-check" name="vbtn-radio" id="vbtn-radio1"
defaultChecked/>
<Button variant='outline-danger' className="btn btn-outline-danger" htmlFor="vbtn-radio1">Radio 1</Button>
<input type="radio" className="btn-check" name="vbtn-radio" id="vbtn-radio2"
/>
<Button variant='outline-danger' className="btn btn-outline-danger" htmlFor="vbtn-radio2">Radio 2</Button>
<input type="radio" className="btn-check" name="vbtn-radio" id="vbtn-radio3"
/>
<Button variant='outline-danger' className="btn btn-outline-danger" htmlFor="vbtn-radio3">Radio 3</Button>
</ButtonGroup>
</Col>
Social Group Buttons
<ButtonGroup className="btn-group" role="group" aria-label="Basic example">
<Button variant="" className="btn btn-icon btn-facebook btn-wave">
<i className="ri-facebook-line"></i>
</Button>
<Button variant="" className="btn btn-icon btn-twitter btn-wave">
<i className="ri-twitter-line"></i>
</Button>
<Button variant="" className="btn btn-icon btn-instagram btn-wave">
<i className="ri-instagram-line"></i>
</Button>
<Button variant="" className="btn btn-icon btn-github btn-wave">
<i className="ri-github-line"></i>
</Button>
<Button variant="" className="btn btn-icon btn-youtube btn-wave">
<i className="ri-youtube-line"></i>
</Button>
<Button variant="" className="btn btn-icon btn-google btn-wave">
<i className="ri-google-line"></i>
</Button>
</ButtonGroup>