Button Groups

Single Select Group (Inline)Single Select Group (Vertical) Multiple Select Group (Inline) Multiple Select Group (Vertical)Primary Button DropdownSecondary Button DropdownText Button Dropdown

Single Select Group (Inline)




<div class="btn-group radio-based">
   <label class="btn btn-secondary" ng-model="radioModel1" uib-btn-radio="'Today'">Today</label>
   <label class="btn btn-secondary" ng-model="radioModel1" uib-btn-radio="'Week'">Week</label>
   <label class="btn btn-secondary" ng-model="radioModel1" uib-btn-radio="'Month'">Month</label>
</div>

<div class="btn-group radio-based">
   <label class="btn btn-secondary disabled" ng-model="radioModel2" uib-btn-radio="'Today'">Today</label>
   <label class="btn btn-secondary disabled" ng-model="radioModel2" uib-btn-radio="'Week'">Week</label>
   <label class="btn btn-secondary disabled" ng-model="radioModel2" uib-btn-radio="'Month'">Month</label>
</div>

<div class="btn-group radio-based">
   <label class="btn btn-secondary btn-sm" ng-model="radioModel3" uib-btn-radio="'Today'">Today</label>
   <label class="btn btn-secondary btn-sm" ng-model="radioModel3" uib-btn-radio="'Week'">Week</label>
   <label class="btn btn-secondary btn-sm" ng-model="radioModel3" uib-btn-radio="'Month'">Month</label>
</div>

<div class="btn-group radio-based">
   <label class="btn btn-secondary btn-sm disabled" ng-model="radioModel4" uib-btn-radio="'Today'">Today</label>
   <label class="btn btn-secondary btn-sm disabled" ng-model="radioModel4" uib-btn-radio="'Week'">Week</label>
   <label class="btn btn-secondary btn-sm disabled" ng-model="radioModel4" uib-btn-radio="'Month'">Month</label>
</div>

Single Select Group (Vertical) 

<div class="btn-group-vertical radio-based">
   <label class="btn btn-secondary" ng-model="radioModel5" uib-btn-radio="'Today'">Today</label>
   <label class="btn btn-secondary" ng-model="radioModel5" uib-btn-radio="'Week'">Week</label>
   <label class="btn btn-secondary" ng-model="radioModel5" uib-btn-radio="'Month'">Month</label>
</div>

<div class="btn-group-vertical radio-based">
   <label class="btn btn-secondary disabled" ng-model="radioModel6" uib-btn-radio="'Today'">Today</label>
   <label class="btn btn-secondary disabled" ng-model="radioModel6" uib-btn-radio="'Week'">Week</label>
   <label class="btn btn-secondary disabled" ng-model="radioModel6" uib-btn-radio="'Month'">Month</label>
</div>

<div class="btn-group-vertical radio-based">
   <label class="btn btn-secondary btn-sm" ng-model="radioModel7" uib-btn-radio="'Today'">Today</label>
   <label class="btn btn-secondary btn-sm" ng-model="radioModel7" uib-btn-radio="'Week'">Week</label>
   <label class="btn btn-secondary btn-sm" ng-model="radioModel7" uib-btn-radio="'Month'">Month</label>
</div>

<div class="btn-group-vertical radio-based">
   <label class="btn btn-secondary btn-sm disabled" ng-model="radioModel8" uib-btn-radio="'Today'">Today</label>
   <label class="btn btn-secondary btn-sm disabled" ng-model="radioModel8" uib-btn-radio="'Week'">Week</label>
   <label class="btn btn-secondary btn-sm disabled" ng-model="radioModel8" uib-btn-radio="'Month'">Month</label>
</div>

Multiple Select Group (Inline) 




<div class="btn-group checkbox-based">
   <label class="btn btn-secondary" ng-model="checkModel.today1" uib-btn-checkbox>Today</label>
   <label class="btn btn-secondary" ng-model="checkModel.week1" uib-btn-checkbox>Week</label>
   <label class="btn btn-secondary" ng-model="checkModel.month1" uib-btn-checkbox>Month</label>
</div>

<div class="btn-group checkbox-based">
   <label class="btn btn-secondary disabled" ng-model="checkModel.today2" uib-btn-checkbox>Today</label>
   <label class="btn btn-secondary disabled" ng-model="checkModel.week2" uib-btn-checkbox>Week</label>
   <label class="btn btn-secondary disabled" ng-model="checkModel.month2" uib-btn-checkbox>Month</label>
</div>

<div class="btn-group checkbox-based">
   <label class="btn btn-secondary" ng-model="checkModel.today3" uib-btn-checkbox>Today</label>
   <label class="btn btn-secondary" ng-model="checkModel.week3" uib-btn-checkbox>Week</label>
   <label class="btn btn-secondary" ng-model="checkModel.month3" uib-btn-checkbox>Month</label>
</div>

<div class="btn-group checkbox-based">
   <label class="btn btn-secondary btn-sm disabled" ng-model="checkModel.today4" uib-btn-checkbox>Today</label>
   <label class="btn btn-secondary btn-sm disabled" ng-model="checkModel.week4" uib-btn-checkbox>Week</label>
   <label class="btn btn-secondary btn-sm disabled" ng-model="checkModel.month4" uib-btn-checkbox>Month</label>
</div>

Multiple Select Group (Vertical)

<div class="btn-group-vertical checkbox-based">
   <label class="btn btn-secondary" ng-model="checkModel.today5" uib-btn-checkbox>Today</label>
   <label class="btn btn-secondary" ng-model="checkModel.week5" uib-btn-checkbox>Week</label>
   <label class="btn btn-secondary" ng-model="checkModel.month5" uib-btn-checkbox>Month</label>
</div>

<div class="btn-group-vertical checkbox-based">
   <label class="btn btn-secondary disabled" ng-model="checkModel.today6" uib-btn-checkbox>Today</label>
   <label class="btn btn-secondary disabled" ng-model="checkModel.week6" uib-btn-checkbox>Week</label>
   <label class="btn btn-secondary disabled" ng-model="checkModel.month6" uib-btn-checkbox>Month</label>
</div>

<div class="btn-group-vertical checkbox-based">
   <label class="btn btn-secondary btn-sm" ng-model="checkModel.today7" uib-btn-checkbox>Today</label>
   <label class="btn btn-secondary btn-sm" ng-model="checkModel.week7" uib-btn-checkbox>Week</label>
   <label class="btn btn-secondary btn-sm" ng-model="checkModel.month7" uib-btn-checkbox>Month</label>
</div>

<div class="btn-group-vertical checkbox-based">
   <label class="btn btn-secondary btn-sm disabled" ng-model="checkModel.today8" uib-btn-checkbox>Today</label>
   <label class="btn btn-secondary btn-sm disabled" ng-model="checkModel.week8" uib-btn-checkbox>Week</label>
   <label class="btn btn-secondary btn-sm disabled" ng-model="checkModel.month8" uib-btn-checkbox>Month</label>
</div>


Primary Button Dropdown


<div class="btn-group mb-2" uib-dropdown is-open="status.isopenPrimaryDropdown">
   <button id="primaryDropdown" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
   Button <span class="caret"></span>
   </button>
   <div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="primaryDropdown">
      <a href="#" class="dropdown-item">Action</a>
      <a href="#" class="dropdown-item">Another action</a>
      <a href="#" class="dropdown-item">Something else here</a>
      <div class="dropdown-divider"></div>
      <a href="#" class="dropdown-item">Separated link</a>
   </div>
</div>

<div class="btn-group mb-2" uib-dropdown is-open="status.isopenPrimaryDropdownDisabled">
   <button id="primaryDropdownDisabled" type="button" class="btn btn-primary disabled" uib-dropdown-toggle ng-disabled="disabled">
   Button <span class="caret"></span>
   </button>
   <div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="primaryDropdownDisabled">
      <a href="#" class="dropdown-item">Action</a>
      <a href="#" class="dropdown-item">Another action</a>
      <a href="#" class="dropdown-item">Something else here</a>
      <div class="dropdown-divider"></div>
      <a href="#" class="dropdown-item">Separated link</a>
   </div>
</div>

Secondary Button Dropdown


<div class="btn-group mb-2" uib-dropdown is-open="status.isopenSecondaryDropdown">
   <button id="secondaryDropdown" type="button" class="btn btn-secondary" uib-dropdown-toggle ng-disabled="disabled">
   Button <span class="caret"></span>
   </button>
   <div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="secondaryDropdown">
      <a href="#" class="dropdown-item">Action</a>
      <a href="#" class="dropdown-item">Another action</a>
      <a href="#" class="dropdown-item">Something else here</a>
      <div class="dropdown-divider"></div>
      <a href="#" class="dropdown-item">Separated link</a>
   </div>
</div>

<div class="btn-group mb-2" uib-dropdown is-open="status.isopenSecondaryDropdownDisabled">
   <button id="secondaryDropdownDisabled" type="button" class="btn btn-secondary disabled" uib-dropdown-toggle ng-disabled="disabled">
   Button <span class="caret"></span>
   </button>
   <div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="secondaryDropdownDisabled">
      <a href="#" class="dropdown-item">Action</a>
      <a href="#" class="dropdown-item">Another action</a>
      <a href="#" class="dropdown-item">Something else here</a>
      <div class="dropdown-divider"></div>
      <a href="#" class="dropdown-item">Separated link</a>
   </div>
</div>

Text Button Dropdown


<div class="btn-group text-dropdown mb-2" uib-dropdown is-open="status.isopenTextDropdown">
   <button id="textDropdown" type="button" class="btn btn-text" uib-dropdown-toggle ng-disabled="disabled">
   Button <span class="caret"></span>
   </button>
   <div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="textDropdown">
      <a href="#" class="dropdown-item">Action</a>
      <a href="#" class="dropdown-item">Another action</a>
      <a href="#" class="dropdown-item">Something else here</a>
      <div class="dropdown-divider"></div>
      <a href="#" class="dropdown-item">Separated link</a>
   </div>
</div>

<div class="btn-group text-dropdown mb-2" uib-dropdown is-open="status.isopenTextDropdownDisabled">
   <button id="textDropdownDisabled" type="button" class="btn btn-text disabled" uib-dropdown-toggle ng-disabled="disabled">
   Button <span class="caret"></span>
   </button>
   <div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="textDropdownDisabled">
      <a href="#" class="dropdown-item">Action</a>
      <a href="#" class="dropdown-item">Another action</a>
      <a href="#" class="dropdown-item">Something else here</a>
      <div class="dropdown-divider"></div>
      <a href="#" class="dropdown-item">Separated link</a>
   </div>
</div>