Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# Button group

Groups a series of buttons together on a single line.

Bootstrap docs

## Basic example

    <!-- Solid button group -->
    <div class="btn-group" role="group" aria-label="Solid button group">
      <button type="button" class="btn btn-primary">Left</button>
      <button type="button" class="btn btn-primary">Middle</button>
      <button type="button" class="btn btn-primary">Right</button>
    </div>

    <!-- Outline button group -->
    <div class="btn-group" role="group" aria-label="Outline button group">
      <button type="button" class="btn btn-outline-primary">Left</button>
      <button type="button" class="btn btn-outline-primary">Middle</button>
      <button type="button" class="btn btn-outline-primary">Right</button>
    </div>

## Button toolbar

    <!-- Toolbar example -->
    <div class="btn-toolbar" role="toolbar" aria-label="Settings toolbar">
      <div class="btn-group me-2" role="group" aria-label="Settings group">
        <button class="btn btn-dark btn-icon" type="button">
          <i class="bx bx-undo"></i>
        </button>
        <button class="btn btn-secondary btn-icon" type="button">
          <i class="bx bx-font-family"></i>
        </button>
        <button class="btn btn-secondary btn-icon" type="button"><i class="bx bx-share-alt"></i></button>
        <button class="btn btn-secondary btn-icon" type="button"><i class="bx bx-fullscreen"></i></button>
      </div>
      <div class="btn-group me-2" role="group" aria-label="Apply settings">
        <button class="btn btn-success" type="button">
          <i class="bx bx-check fs-5 lh-1 me-2"></i>
          Apply
        </button>
      </div>
      <div class="btn-group" role="group" aria-label="Delete settings">
        <button class="btn btn-outline-danger btn-icon" type="button"><i class="bx bx-trash"></i></button>
      </div>
    </div>

    <!-- Pagination example -->
    <div class="btn-toolbar" role="toolbar" aria-label="Pagination">
      <div class="btn-group me-2 mb-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-outline-secondary">1</button>
        <button type="button" class="btn btn-outline-secondary">2</button>
        <button type="button" class="btn btn-outline-secondary">3</button>
      </div>
      <div class="btn-group me-2 mb-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-outline-secondary">4</button>
        <button type="button" class="btn btn-outline-secondary">5</button>
      </div>
      <div class="btn-group mb-2" role="group" aria-label="Third group">
        <button type="button" class="btn btn-outline-secondary">6</button>
      </div>
    </div>

## Nested dropdown

    <!-- Button group with nested dropdown -->
    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
      <button type="button" class="btn btn-primary">1</button>
      <button type="button" class="btn btn-primary">2</button>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </button>
        <div class="dropdown-menu my-1">
          <a href="#" class="dropdown-item">Dropdown link</a>
          <a href="#" class="dropdown-item">Dropdown link</a>
          <a href="#" class="dropdown-item">Dropdown link</a>
        </div>
      </div>
    </div>

    <!-- Button group with nested dropdown -->
    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
      <button type="button" class="btn btn-outline-primary">1</button>
      <button type="button" class="btn btn-outline-primary">2</button>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </button>
        <div class="dropdown-menu my-1">
          <a href="#" class="dropdown-item">Dropdown link</a>
          <a href="#" class="dropdown-item">Dropdown link</a>
          <a href="#" class="dropdown-item">Dropdown link</a>
        </div>
      </div>
    </div>

## Sizing

    <!-- Large button group -->
    <div class="btn-group btn-group-lg" role="group" aria-label="Large group">...</div>

    <!-- Normal button group -->
    <div class="btn-group" role="group" aria-label="Normal group">...</div>

    <!-- Small button group -->
    <div class="btn-group btn-group-sm" role="group" aria-label="Small group">...</div>

Top