ButtonGroup

Group a series of buttons together on a single line with the button group.

WARNING

When using tooltips or popovers on elements within a btn-group, make sure they're appended to body.

Example

Wrap a series of <btn> in <btn-group>.

<template>
  <div class="uiv">
    <BtnGroup>
      <Btn>Left</Btn>
      <Btn>Middle</Btn>
      <Btn>Right</Btn>
    </BtnGroup>
  </div>
</template>

<script setup>
import { Btn, BtnGroup } from 'uiv';
</script>

Button toolbar

Combine sets of <btn-group> into a <btn-toolbar> for more complex components.

<template>
  <div class="uiv">
    <BtnToolbar>
      <BtnGroup>
        <Btn>1</Btn>
        <Btn>2</Btn>
        <Btn>3</Btn>
        <Btn>4</Btn>
      </BtnGroup>
      <BtnGroup>
        <Btn>5</Btn>
        <Btn>6</Btn>
        <Btn>7</Btn>
      </BtnGroup>
      <BtnGroup>
        <Btn>8</Btn>
      </BtnGroup>
    </BtnToolbar>
  </div>
</template>

<script setup>
import { Btn, BtnGroup, BtnToolbar } from 'uiv';
</script>

Sizing

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

<template>
  <div class="uiv">
    <p>
      <BtnGroup size="lg">
        <Btn>Left</Btn>
        <Btn>Middle</Btn>
        <Btn>Right</Btn>
      </BtnGroup>
    </p>
    <p>
      <BtnGroup>
        <Btn>Left</Btn>
        <Btn>Middle</Btn>
        <Btn>Right</Btn>
      </BtnGroup>
    </p>
    <p>
      <BtnGroup size="sm">
        <Btn>Left</Btn>
        <Btn>Middle</Btn>
        <Btn>Right</Btn>
      </BtnGroup>
    </p>
    <p>
      <BtnGroup size="xs">
        <Btn>Left</Btn>
        <Btn>Middle</Btn>
        <Btn>Right</Btn>
      </BtnGroup>
    </p>
  </div>
</template>

<script setup>
import { Btn, BtnGroup } from 'uiv';
</script>

Nesting

btn-group class will be automatically added to <dropdown> when you want dropdown menus mixed with a series of buttons.

<template>
  <div class="uiv">
    <BtnGroup>
      <Btn>Left</Btn>
      <Btn>Middle</Btn>
      <Dropdown>
        <Btn class="dropdown-toggle">Dropdown <span class="caret"></span></Btn>
        <template #dropdown>
          <li><a role="button">Action</a></li>
          <li><a role="button">Another action</a></li>
          <li><a role="button">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a role="button">Separated link</a></li>
        </template>
      </Dropdown>
      <Btn>Right</Btn>
    </BtnGroup>
  </div>
</template>

<script setup>
import { Btn, BtnGroup, Dropdown } from 'uiv';
</script>

Vertical

Make a set of buttons appear vertically stacked rather than horizontally by adding vertical.

WARNING

Split button dropdowns are not supported here.

<template>
  <div class="uiv">
    <BtnGroup vertical>
      <Btn>Top</Btn>
      <Btn>Center</Btn>
      <Dropdown>
        <Btn class="dropdown-toggle">Dropdown <span class="caret"></span></Btn>
        <template #dropdown>
          <li><a role="button">Action</a></li>
          <li><a role="button">Another action</a></li>
          <li><a role="button">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a role="button">Separated link</a></li>
        </template>
      </Dropdown>
      <Btn>Bottom</Btn>
    </BtnGroup>
  </div>
</template>

<script setup>
import { Btn, BtnGroup, Dropdown } from 'uiv';
</script>

Justified

Make a group of buttons stretch at equal sizes to span the entire width of its parent by adding justified. Also works with button dropdowns within the button group.

WARNING

Due to Bootstrap limitation, justified prop on <btn> is needed while it is render as button.

<template>
  <div class="uiv">
    <BtnGroup justified>
      <Btn href="javascript:;">Left</Btn>
      <Btn href="javascript:;">Middle</Btn>
      <Btn href="javascript:;">Right</Btn>
    </BtnGroup>
    <br />
    <BtnGroup justified>
      <Btn justified>Left</Btn>
      <Btn justified>Middle</Btn>
      <Dropdown>
        <Btn class="dropdown-toggle">Dropdown <span class="caret"></span></Btn>
        <template #dropdown>
          <li><a role="button">Action</a></li>
          <li><a role="button">Another action</a></li>
          <li><a role="button">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a role="button">Separated link</a></li>
        </template>
      </Dropdown>
    </BtnGroup>
  </div>
</template>

<script setup>
import { Btn, BtnGroup, Dropdown } from 'uiv';
</script>

API Reference

BtnGroup

Props

NameTypeDefaultRequiredDescription
sizeStringOptional button sizes. Supported: lg, sm, xs.
verticalBooleanfalseApply vertical style.
justifiedBooleanfalseApply justified style.

Slots

NameDescription
defaultThe button group body.

BtnToolbar

This component has no props.