Ynex - Buttongroup

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

Active link Link Link

 <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

Checkbox 1Checkbox 2Checkbox 3

  <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

Radio 1Radio 2Radio 3

  <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

Radio 1Radio 2Radio 3

<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>

Switcher

Buttongroup