No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Svelte Bootstrap Button group
 
Svelte Button group - Bootstrap 4 & Material Design
 
See the following button groups examples:
 
Basic example
 
   
  
 
 
<script>
  import {MDBBtnGroup, MDBBtn} from "mdbsvelte";
</script>
<MDBBtnGroup>
  <MDBBtn>Left</MDBBtn>
  <MDBBtn>Middle</MDBBtn>
  <MDBBtn>Right</MDBBtn>
</MDBBtnGroup>

 
Button toolbar
 
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to
  space out groups, buttons, and more.
 
   
 
 
<script>
  import {MDBBtnGroup, MDBBtn} from "mdbsvelte";
</script>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <MDBBtnGroup class="mr-2">
    <MDBBtn>1</MDBBtn>
    <MDBBtn>2</MDBBtn>
    <MDBBtn>3</MDBBtn>
    <MDBBtn>4</MDBBtn>
  </MDBBtnGroup>
  <MDBBtnGroup class="mr-2">
    <MDBBtn>5</MDBBtn>
    <MDBBtn>6</MDBBtn>
    <MDBBtn>7</MDBBtn>
  </MDBBtnGroup>
  <MDBBtnGroup>
    <MDBBtn>8</MDBBtn>
  </MDBBtnGroup>
</div>

 
Sizing
 
Instead of applying button sizing classes to every button in a group, just add size prop to each
  <MDBBtnGroup>,
  including each one when nesting multiple groups.

 
   
  
 
  
 
  
 
 
<script>
  import {MDBBtnGroup, MDBBtn, MDBRow, MDBCol} from "mdbsvelte";
</script>
<MDBRow>
  <MDBCol md='12' class="mb-4">
    <MDBBtnGroup size="lg">
      <MDBBtn color="unique">Left</MDBBtn>
      <MDBBtn color="unique">Middle</MDBBtn>
      <MDBBtn color="unique">Right</MDBBtn>
    </MDBBtnGroup>
  </MDBCol>
  <MDBCol md='12' class="mb-4">
    <MDBBtnGroup>
      <MDBBtn color="unique">Left</MDBBtn>
      <MDBBtn color="unique">Middle</MDBBtn>
      <MDBBtn color="unique">Right</MDBBtn>
    </MDBBtnGroup>
  </MDBCol>
  <MDBCol md='12' class="mb-4">
    <MDBBtnGroup size="sm">
      <MDBBtn color="unique">Left</MDBBtn>
      <MDBBtn color="unique">Middle</MDBBtn>
      <MDBBtn color="unique">Right</MDBBtn>
    </MDBBtnGroup>
  </MDBCol>
</MDBRow>

 
Nesting
 
Place a <MDBBtnGroup> within another <MDBBtnGroup> when you want dropdown
  menus mixed with
  a
  series of buttons.

 
   
  
 
 
 
 
<script>
  import {MDBBtn, MDBBtnGroup, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem} from "mdbsvelte";
</script>

<MDBBtnGroup>
  <MDBBtn color="info" size="lg">1</MDBBtn>
  <MDBBtn color="info" size="lg">2</MDBBtn>
  <MDBBtnGroup>
    <MDBDropdown>
      <MDBDropdownToggle caret color="info" class="h-100">
        Dropdown
      </MDBDropdownToggle>
      <MDBDropdownMenu color="info">
        <MDBDropdownItem>Dropdown link</MDBDropdownItem>
        <MDBDropdownItem>Dropdown link</MDBDropdownItem>
      </MDBDropdownMenu>
    </MDBDropdown>
  </MDBBtnGroup>
</MDBBtnGroup>

 
Vertical variation
 
Make a set of buttons appear vertically stacked rather than horizontally.
 
   
     
 
  
 
 
   
 
 
 
 
 
 
 
 
 
 
<script>
  import {
    MDBBtn,
    MDBBtnGroup,
    MDBDropdown,
    MDBDropdownToggle,
    MDBDropdownMenu,
    MDBDropdownItem,
    MDBRow,
    MDBCol
  } from "mdbsvelte";
</script>
<MDBRow center>
  <MDBCol xl="2" lg="3" md="4" class="mb-md-0 mb-4">
    <MDBBtnGroup vertical>
      <MDBBtn color="amber" class="ml-0">Button</MDBBtn>
      <MDBBtn color="amber">Button</MDBBtn>
      <MDBBtn color="amber">Button</MDBBtn>
      <MDBBtn color="amber">Button</MDBBtn>
      <MDBBtn color="amber">Button</MDBBtn>
      <MDBBtn color="amber">Button</MDBBtn>
    </MDBBtnGroup>
  </MDBCol>
  <MDBCol xl="2" lg="3" md="4">
    <MDBBtnGroup vertical>
      <MDBBtn color="indigo" class="ml-0">Button</MDBBtn>
      <MDBBtn color="indigo">Button</MDBBtn>

      <MDBDropdown class="w-100">
        <MDBDropdownToggle caret color="indigo" class="m-0">
          Dropdown
        </MDBDropdownToggle>
        <MDBDropdownMenu color="info">
          <MDBDropdownItem>Dropdown link</MDBDropdownItem>
          <MDBDropdownItem>Dropdown link</MDBDropdownItem>
        </MDBDropdownMenu>
      </MDBDropdown>

      <MDBBtn color="indigo">Button</MDBBtn>
      <MDBBtn color="indigo">Button</MDBBtn>

      <MDBDropdown class="w-100">
        <MDBDropdownToggle caret color="indigo" class="m-0 rounded-0">
          Dropdown
        </MDBDropdownToggle>
        <MDBDropdownMenu color="indigo">
          <MDBDropdownItem>Dropdown link</MDBDropdownItem>
          <MDBDropdownItem>Dropdown link</MDBDropdownItem>
        </MDBDropdownMenu>
      </MDBDropdown>
      <MDBDropdown class="w-100">
        <MDBDropdownToggle caret color="indigo" class="m-0 rounded-0">
          Dropdown
        </MDBDropdownToggle>
        <MDBDropdownMenu color="indigo">
          <MDBDropdownItem>Dropdown link</MDBDropdownItem>
          <MDBDropdownItem>Dropdown link</MDBDropdownItem>
        </MDBDropdownMenu>
      </MDBDropdown>
      <MDBDropdown class="w-100">
        <MDBDropdownToggle caret color="indigo" class="m-0 rounded-0">
          Dropdown
        </MDBDropdownToggle>
        <MDBDropdownMenu color="indigo">
          <MDBDropdownItem>Dropdown link</MDBDropdownItem>
          <MDBDropdownItem>Dropdown link</MDBDropdownItem>
        </MDBDropdownMenu>
      </MDBDropdown>

    </MDBBtnGroup>
  </MDBCol>
</MDBRow>

 
Multicolored button group
 
   
  
 
  
 
  
 
    
 
 
 
 
<script>
  import {MDBBtn, MDBBtnGroup, MDBIcon, MDBCol, MDBRow} from "mdbsvelte";
</script>
<MDBRow>
  <MDBCol xl="5" md="6" class="mb-xl-0 mb-4">

    <MDBBtnGroup size="lg" class="mb-4">
      <MDBBtn color="primary">Left</MDBBtn>
      <MDBBtn color="warning">Left</MDBBtn>
      <MDBBtn color="danger">Left</MDBBtn>
    </MDBBtnGroup>

    <MDBBtnGroup class="mb-4">
      <MDBBtn color="primary">Left</MDBBtn>
      <MDBBtn color="warning">Left</MDBBtn>
      <MDBBtn color="danger">Left</MDBBtn>
    </MDBBtnGroup>

    <MDBBtnGroup size="sm" class="mb-4">
      <MDBBtn color="primary">Left</MDBBtn>
      <MDBBtn color="warning">Left</MDBBtn>
      <MDBBtn color="danger">Left</MDBBtn>
    </MDBBtnGroup>

  </MDBCol>

  <MDBCol xl="3" md="12" class="mb-xl-0 mb-4">
    <MDBBtnGroup vertical>
      <MDBBtn color="primary" class="ml-0">1</MDBBtn>
      <MDBBtn color="pink">2</MDBBtn>
      <MDBBtn color="success">3</MDBBtn>
      <MDBBtn color="amber">4</MDBBtn>
      <MDBBtn color="red">5</MDBBtn>
    </MDBBtnGroup>
  </MDBCol>

  <MDBCol xl="4" md="12">
    <div class="btn-toolbar mb-4" role="toolbar">
      <MDBBtnGroup class="mr-2">
        <MDBBtn color="mdb-color lighten-2">1</MDBBtn>
        <MDBBtn color="indigo lighten-2">2</MDBBtn>
        <MDBBtn color="blue lighten-2">3</MDBBtn>
        <MDBBtn color="light-blue lighten-2">4</MDBBtn>
        <MDBBtn color="cyan lighten-2">5</MDBBtn>
      </MDBBtnGroup>
    </div>
    <div class="btn-toolbar" role="toolbar">
      <MDBBtnGroup class="mr-2">
        <MDBBtn color="indigo lighten-2">
          <MDBIcon icon="star"/>
        </MDBBtn>
        <MDBBtn color="blue lighten-2">
          <MDBIcon icon="heart"/>
        </MDBBtn>
        <MDBBtn color="light-blue lighten-2">
          <MDBIcon icon="user"/>
        </MDBBtn>
        <MDBBtn color="cyan lighten-2">
          <MDBIcon fab icon="twitter"/>
        </MDBBtn>
      </MDBBtnGroup>
    </div>
  </MDBCol>
</MDBRow>