ngx-admin/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html

<nb-card>
  <nb-card-header>Button Groups</nb-card-header>
  <nb-card-body>
    <div class="row">
      <div class="col-md-12">
        <div class="example-container toggle-types">
          <div class="container-title">Toggle Types</div>
          <div [(ngModel)]="radioModel" ngbRadioGroup
               class="btn-group btn-toggle-group btn-outline-toggle-group btn-group-full-width btn-toggle-radio-group">
            <label class="btn btn-outline-primary">
              <input type="radio" value="left"> Left
            </label>
            <label class="btn btn-outline-primary">
              <input type="radio" value="middle"> Middle
            </label>
            <label class="btn btn-outline-primary">
              <input type="radio" value="right"> Right
            </label>
          </div>
          <div class="btn-group btn-toggle-group btn-group-full-width" data-toggle="buttons">
            <label class="btn btn-primary" [class.active]="checkboxModel.left">
              <input type="checkbox" [(ngModel)]="checkboxModel.left"> Left
            </label>
            <label class="btn btn-primary" [class.active]="checkboxModel.middle">
              <input type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
            </label>
            <label class="btn btn-primary" [class.active]="checkboxModel.right">
              <input type="checkbox" [(ngModel)]="checkboxModel.right"> Right
            </label>
          </div>
        </div>
        <div class="example-container toolbars-container">
          <div class="row">
            <div class="pagination-container col-xxxl-6">
              <div class="container-title">Pagination</div>
              <div class="btn-group btn-toggle-group btn-outline-toggle-group" data-toggle="buttons"
                   [(ngModel)]="paginationModel" ngbRadioGroup>
                <label class="btn btn-outline-success">
                  <input type="radio" [value]="1"> 1
                </label>
                <label class="btn btn-outline-success">
                  <input type="radio" [value]="2"> 2
                </label>
                <label class="btn btn-outline-success">
                  <input type="radio" [value]="3"> 3
                </label>
                <label class="btn btn-outline-success">
                  <input type="radio" [value]="4"> 4
                </label>
                <label class="btn btn-outline-success">
                  <input type="radio" [value]="5"> 5
                </label>
              </div>
            </div>
            <div class="icon-toolbar-container col-xxxl-6">
              <div class="container-title">Icon Toolbar</div>
              <div class="btn-group btn-toggle-group" data-toggle="buttons">
                <label class="btn btn-success" [class.active]="iconToolbarModel.one">
                  <input type="checkbox" [(ngModel)]="iconToolbarModel.one"> 1
                </label>
                <label class="btn btn-success" [class.active]="iconToolbarModel.two">
                  <input type="checkbox" [(ngModel)]="iconToolbarModel.two"> 2
                </label>
                <label class="btn btn-success" [class.active]="iconToolbarModel.three">
                  <input type="checkbox" [(ngModel)]="iconToolbarModel.three"> 3
                </label>
                <label class="btn btn-success" [class.active]="iconToolbarModel.four">
                  <input type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4
                </label>
                <label class="btn btn-success" [class.active]="iconToolbarModel.five">
                  <input type="checkbox" [(ngModel)]="iconToolbarModel.five"> 5
                </label>
              </div>
            </div>
          </div>
        </div>
        <div class="example-container">
          <div class="container-title divided-button-group">Divided Button Group</div>
          <div class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width btn-divided-checkbox-group "
            data-toggle="buttons">
            <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.monday">
              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"> <i
              class="nb-arrow-thin-down"></i>
            </label>
            <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.tuesday">
              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"> <i
              class="nb-arrow-thin-up"></i>
            </label>
            <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.wednesday">
              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"> <i class="nb-arrow-thin-left"></i>
            </label>
            <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.thursday">
              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"> <i
              class="nb-arrow-thin-right"></i>
            </label>
            <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.friday">
              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"> <i class="nb-arrow-left"></i>
            </label>
            <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.saturday">
              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"> <i
              class="nb-arrow-right"></i>
            </label>
          </div>
        </div>
        <div class="example-container">
          <div class="container-title">Divided Button Group</div>
          <div class="row">
            <div [(ngModel)]="dividedButtonGroupOne" ngbRadioGroup
                 class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width col-md-12">
              <label class="btn btn-outline-primary">
                <input type="radio" value="left"> Left
              </label>
              <label class="btn btn-outline-primary">
                <input type="radio" value="middle"> Middle
              </label>
              <label class="btn btn-outline-primary">
                <input type="radio" value="right"> Right
              </label>
            </div>
          </div>
          <div class="btn-group btn-divided-group btn-group-full-width" data-toggle="buttons">
            <label class="btn btn-primary" [class.active]="dividedButtonGroupTwo.left">
              <input type="checkbox" [(ngModel)]="dividedButtonGroupTwo.left"> Left
            </label>
            <label class="btn btn-primary" [class.active]="dividedButtonGroupTwo.middle">
              <input type="checkbox" [(ngModel)]="dividedButtonGroupTwo.middle"> Middle
            </label>
            <label class="btn btn-primary" [class.active]="dividedButtonGroupTwo.right">
              <input type="checkbox" [(ngModel)]="dividedButtonGroupTwo.right"> Right
            </label>
          </div>
        </div>
      </div>
    </div>
  </nb-card-body>
</nb-card>