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>
  <BtnGroup>
    <Btn>Left</Btn>
    <Btn>Middle</Btn>
    <Btn>Right</Btn>
  </BtnGroup>
</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>
  <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>
</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>
  <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>
</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>
  <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>
</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>
  <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>
</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>
  <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>
</template>

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

API Reference

BtnGroup

Props

Name	Type	Default	Required	Description
size	String			Optional button sizes. Supported: lg, sm, xs.
vertical	Boolean	false		Apply vertical style.
justified	Boolean	false		Apply justified style.

Slots

Name	Description
default	The button group body.

BtnToolbar

This component has no props.