Button Group

The btn-group utility class provides a flexible and customizable button-group component based on the button component.

TIP

Button groups can be combined with dropdown menus to create dropdown buttons.

Installation

pnpmyarnnpmbun

bash

pnpm i @vue-interface/btn

bash

yarn add @vue-interface/btn

bash

npm i @vue-interface/btn

bash

bun i @vue-interface/btn

Tailwind Setup

css

@import '@vue-interface/btn-group/index.css';

Basic Usage

html

<div class="btn-group">
    <button class="btn btn-secondary">Left</button>
    <button class="btn btn-secondary">Middle</button>
    <button class="btn btn-secondary">Right</button>
</div>

Split Buttons

html

<div role="group" class="btn-dropdown-split btn-dropdown btn-group">
    <button class="btn btn-secondary">Click Me</button>
    <div role="group" class="btn-group">
        <button type="button" aria-haspopup="true" class="btn btn-secondary dropdown-toggle-split dropdown-toggle"></button>
    </div>
</div>

Sizing

Customize the size of a btn-group using a predetermined size, tailwind's numeric sizing classes, or an arbitrary CSS length unit.

Predetermined Sizes

The size can be customized using predetermined size classes: xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl. Use the syntax: btn-group-[size].

Show Code

html

<div class="flex flex-col gap-2">
    <div>
        <div class="btn-group btn-group-xs">
            <button class="btn btn-secondary">Left</button>
            <button class="btn btn-secondary">Middle</button>
            <button class="btn btn-secondary">Right</button>
        </div>
    </div>
    <div>
        <div class="btn-group btn-group-sm">
            <button class="btn btn-secondary">Left</button>
            <button class="btn btn-secondary">Middle</button>
            <button class="btn btn-secondary">Right</button>
        </div>
    </div>
    <div>
        <div class="btn-group btn-group-md">
            <button class="btn btn-secondary">Left</button>
            <button class="btn btn-secondary">Middle</button>
            <button class="btn btn-secondary">Right</button>
        </div>
    </div>
    <div>
        <div class="btn-group btn-group-lg">
            <button class="btn btn-secondary">Left</button>
            <button class="btn btn-secondary">Middle</button>
            <button class="btn btn-secondary">Right</button>
        </div>
    </div>
    <div>
        <div class="btn-group btn-group-xl">
            <button class="btn btn-secondary">Left</button>
            <button class="btn btn-secondary">Middle</button>
            <button class="btn btn-secondary">Right</button>
        </div>
    </div>
    <div>
        <div class="btn-group btn-group-2xl">
            <button class="btn btn-secondary">Left</button>
            <button class="btn btn-secondary">Middle</button>
            <button class="btn btn-secondary">Right</button>
        </div>
    </div>
    <div>
        <div class="btn-group btn-group-3xl">
            <button class="btn btn-secondary">Left</button>
            <button class="btn btn-secondary">Middle</button>
            <button class="btn btn-secondary">Right</button>
        </div>
    </div>
    <div>
        <div class="btn-group btn-group-4xl">
            <button class="btn btn-secondary">Left</button>
            <button class="btn btn-secondary">Middle</button>
            <button class="btn btn-secondary">Right</button>
        </div>
    </div>
    <div>
        <div class="btn-group btn-group-5xl">
            <button class="btn btn-secondary">Left</button>
            <button class="btn btn-secondary">Middle</button>
            <button class="btn btn-secondary">Right</button>
        </div>
    </div>
</div>

Tailwind Sizes

For more granular control over button sizes, use Tailwind's numeric sizing scale classes: btn-group-1 - btn-group-96.

Show Code

html

<div class="flex flex-col gap-2">
    <div>
        <div class="btn-group btn-group-3">
            <button class="btn btn-secondary">btn-group-3</button>
            <button class="btn btn-secondary">btn-group-3</button>
            <button class="btn btn-secondary">btn-group-3</button>
        </div>
    </div>
    <div>
        <div class="btn-group btn-group-4">
            <button class="btn btn-secondary">btn-group-4</button>
            <button class="btn btn-secondary">btn-group-4</button>
            <button class="btn btn-secondary">btn-group-4</button>
        </div>
    </div>
    <div>
        <div class="btn-group btn-group-5">
            <button class="btn btn-secondary">btn-group-5</button>
            <button class="btn btn-secondary">btn-group-5</button>
            <button class="btn btn-secondary">btn-group-5</button>
        </div>
    </div>
</div>

Arbitrary Sizes

For precise sizing, specify exact pixel values using the syntax btn-group-[Npx] or any other CSS length units (rem, em, mm, etc.).

Show Code

html

<div class="flex flex-col gap-2">
    <div>
        <div class="btn-group btn-group-[16px]">
            <button class="btn btn-secondary">btn-group-[16px]</button>
            <button class="btn btn-secondary">btn-group-[16px]</button>
            <button class="btn btn-secondary">btn-group-[16px]</button>
        </div>
    </div>
    <div>
        <div class="btn-group btn-group-[1.2rem]">
            <button class="btn btn-secondary">btn-group-[1.2rem]</button>
            <button class="btn btn-secondary">btn-group-[1.2rem]</button>
            <button class="btn btn-secondary">btn-group-[1.2rem]</button>
        </div>
    </div>
</div>

Orientation

Button groups support four dropdown orientations for flexible positioning.

Show Code

html

<div role="group" class="btn-dropdown btn-group dropdown">
    <button class="btn btn-secondary dropdown-toggle">Dropdown</button>
</div>
<div role="group" class="btn-dropdown btn-group dropup">
    <button class="btn btn-secondary dropdown-toggle">Dropup</button>
</div>
<div role="group" class="btn-dropdown btn-group dropleft">
    <button class="btn btn-secondary dropdown-toggle">Dropleft</button>
</div>
<div role="group" class="btn-dropdown btn-group dropright">
    <button class="btn btn-secondary dropdown-toggle">Dropright</button>
</div>

Split Orientation

Split button dropdowns with orientation support.

Show Code

html

<div role="group" class="btn-dropdown-split btn-dropdown btn-group dropdown">
    <button class="btn btn-secondary">Dropdown</button>
    <div role="group" class="btn-group">
        <button type="button" aria-haspopup="true" class="btn btn-secondary dropdown-toggle-split dropdown-toggle"></button>
    </div>
</div>
<div role="group" class="btn-dropdown-split btn-dropdown btn-group dropup">
    <button class="btn btn-secondary">Dropup</button>
    <div role="group" class="btn-group">
        <button type="button" aria-haspopup="true" class="btn btn-secondary dropdown-toggle-split dropdown-toggle"></button>
    </div>
</div>
<div role="group" class="btn-dropdown-split btn-dropdown btn-group dropleft">
    <div role="group" class="btn-group">
        <button type="button" aria-haspopup="true" class="btn btn-secondary dropdown-toggle-split dropdown-toggle"></button>
    </div>
    <button class="btn btn-secondary">Dropleft</button>
</div>
<div role="group" class="btn-dropdown-split btn-dropdown btn-group dropright">
    <button class="btn btn-secondary">Dropright</button>
    <div role="group" class="btn-group">
        <button type="button" aria-haspopup="true" class="btn btn-secondary dropdown-toggle-split dropdown-toggle"></button>
    </div>
</div>

Regular Sizing

The size of regular dropdown buttons can be customized using the predetermined size classes btn-group-xs - btn-group-5xl.

Show Code

html

<div>
    <div role="group" class="btn-dropdown btn-group btn-group-xs">
        <button class="btn btn-secondary dropdown-toggle">Click Me</button>
    </div>
</div>
<div>
    <div role="group" class="btn-dropdown btn-group btn-group-sm">
        <button class="btn btn-secondary dropdown-toggle">Click Me</button>
    </div>
</div>
<div>
    <div role="group" class="btn-dropdown btn-group btn-group-md">
        <button class="btn btn-secondary dropdown-toggle">Click Me</button>
    </div>
</div>
<div>
    <div role="group" class="btn-dropdown btn-group btn-group-lg">
        <button class="btn btn-secondary dropdown-toggle">Click Me</button>
    </div>
</div>
<div>
    <div role="group" class="btn-dropdown btn-group btn-group-xl">
        <button class="btn btn-secondary dropdown-toggle">Click Me</button>
    </div>
</div>
<div>
    <div role="group" class="btn-dropdown btn-group btn-group-2xl">
        <button class="btn btn-secondary dropdown-toggle">Click Me</button>
    </div>
</div>
<div>
    <div role="group" class="btn-dropdown btn-group btn-group-3xl">
        <button class="btn btn-secondary dropdown-toggle">Click Me</button>
    </div>
</div>
<div>
    <div role="group" class="btn-dropdown btn-group btn-group-4xl">
        <button class="btn btn-secondary dropdown-toggle">Click Me</button>
    </div>
</div>
<div>
    <div role="group" class="btn-dropdown btn-group btn-group-5xl">
        <button class="btn btn-secondary dropdown-toggle">Click Me</button>
    </div>
</div>

Tailwind Sizes

Use Tailwind's numeric sizing scale for more granular control over button group sizes. Tailwind’s default spacing scale has a range of 0 - 96.

Show Code

html

<div>
    <div role="group" class="btn-dropdown btn-group btn-group-3">
        <button class="btn btn-secondary dropdown-toggle">btn-group-3</button>
    </div>
</div>
    <div>
    <div role="group" class="btn-dropdown btn-group btn-group-4">
        <button class="btn btn-secondary dropdown-toggle">btn-group-4</button>
    </div>
</div>
    <div>
    <div role="group" class="btn-dropdown btn-group btn-group-5">
        <button class="btn btn-secondary dropdown-toggle">btn-group-5</button>
    </div>
</div>

Arbitrary Sizes

For precise sizing needs, specify exact pixel values using the btn-group-[Npx] syntax or any other CSS length units (rem, em, mm, etc.).

Show Code

html

<div>
    <div role="group" class="btn-dropdown btn-group btn-group-[16px]">
        <button class="btn btn-secondary dropdown-toggle">btn-group-[16px]</button>
    </div>
</div>
    <div>
    <div role="group" class="btn-dropdown btn-group btn-group-[21px]">
        <button class="btn btn-secondary dropdown-toggle">btn-group-[21px]</button>
    </div>
</div>

Split Sizing

The size of split dropdown buttons can be customized using the predetermined size classes btn-group-xs - btn-group-5xl. Split buttons can also be customized using Tailwind's numeric sizing scale or by pixel size for precise sizing needs.

Show Code

html

<div>
    <div role="group" class="btn-dropdown-split btn-dropdown btn-group btn-group-xs">
        <button class="btn btn-secondary">Click Me</button>
        <div role="group" class="btn-group">
            <button type="button" aria-haspopup="true" class="btn btn-secondary dropdown-toggle-split dropdown-toggle"></button>
        </div>
    </div>
</div>
<div>
    <div role="group" class="btn-dropdown-split btn-dropdown btn-group btn-group-sm">
        <button class="btn btn-secondary">Click Me</button>
        <div role="group" class="btn-group">
            <button type="button" aria-haspopup="true" class="btn btn-secondary dropdown-toggle-split dropdown-toggle"></button>
        </div>
    </div>
</div>
<div>
    <div role="group" class="btn-dropdown-split btn-dropdown btn-group btn-group-md">
        <button class="btn btn-secondary">Click Me</button>
        <div role="group" class="btn-group">
            <button type="button" aria-haspopup="true" class="btn btn-secondary dropdown-toggle-split dropdown-toggle"></button>
        </div>
    </div>
</div>
<div>
    <div role="group" class="btn-dropdown-split btn-dropdown btn-group btn-group-lg">
        <button class="btn btn-secondary">Click Me</button>
        <div role="group" class="btn-group">
            <button type="button" aria-haspopup="true" class="btn btn-secondary dropdown-toggle-split dropdown-toggle"></button>
        </div>
    </div>
</div>
<div>
    <div role="group" class="btn-dropdown-split btn-dropdown btn-group btn-group-xl">
        <button class="btn btn-secondary">Click Me</button>
        <div role="group" class="btn-group">
            <button type="button" aria-haspopup="true" class="btn btn-secondary dropdown-toggle-split dropdown-toggle"></button>
        </div>
    </div>
</div>
<div>
    <div role="group" class="btn-dropdown-split btn-dropdown btn-group btn-group-2xl">
        <button class="btn btn-secondary">Click Me</button>
        <div role="group" class="btn-group">
            <button type="button" aria-haspopup="true" class="btn btn-secondary dropdown-toggle-split dropdown-toggle"></button>
        </div>
    </div>
</div>
<div>
    <div role="group" class="btn-dropdown-split btn-dropdown btn-group btn-group-3xl">
        <button class="btn btn-secondary">Click Me</button>
        <div role="group" class="btn-group">
            <button type="button" aria-haspopup="true" class="btn btn-secondary dropdown-toggle-split dropdown-toggle"></button>
        </div>
    </div>
</div>
<div>
    <div role="group" class="btn-dropdown-split btn-dropdown btn-group btn-group-4xl">
        <button class="btn btn-secondary">Click Me</button>
        <div role="group" class="btn-group">
            <button type="button" aria-haspopup="true" class="btn btn-secondary dropdown-toggle-split dropdown-toggle"></button>
        </div>
    </div>
</div>
<div>
    <div role="group" class="btn-dropdown-split btn-dropdown btn-group btn-group-5xl">
        <button class="btn btn-secondary">Click Me</button>
        <div role="group" class="btn-group">
            <button type="button" aria-haspopup="true" class="btn btn-secondary dropdown-toggle-split dropdown-toggle"></button>
        </div>
    </div>
</div>

Split Tailwind Sizes

Use Tailwind's numeric sizing scale for more granular control over button group sizes. Tailwind’s default spacing scale has a range of 0 - 96.

Show Code

html

<div>
    <div role="group" class="btn-dropdown-split btn-dropdown btn-group btn-group-4">
        <button class="btn btn-secondary">Click Me</button>
        <div role="group" class="btn-group">
            <button type="button" aria-haspopup="true" class="btn btn-secondary dropdown-toggle-split dropdown-toggle"></button>
        </div>
    </div>
</div>
<div>
    <div role="group" class="btn-dropdown-split btn-dropdown btn-group btn-group-5">
        <button class="btn btn-secondary">Click Me</button>
        <div role="group" class="btn-group">
            <button type="button" aria-haspopup="true" class="btn btn-secondary dropdown-toggle-split dropdown-toggle"></button>
        </div>
    </div>
</div>
<div>
    <div role="group" class="btn-dropdown-split btn-dropdown btn-group btn-group-6">
        <button class="btn btn-secondary">Click Me</button>
        <div role="group" class="btn-group">
            <button type="button" aria-haspopup="true" class="btn btn-secondary dropdown-toggle-split dropdown-toggle"></button>
        </div>
    </div>
</div>

Split Arbitrary Sizes

For precise sizing needs, specify exact pixel values using the btn-group-[Npx] syntax or any other CSS length units (rem, em, mm, etc.).

Show Code

html

<div>
    <div role="group" class="btn-dropdown btn-group btn-group-[16px]">
        <button class="btn btn-secondary dropdown-toggle">btn-group-[16px]</button>
    </div>
</div>
    <div>
    <div role="group" class="btn-dropdown btn-group btn-group-[1.2rem]">
        <button class="btn btn-secondary dropdown-toggle">btn-group-[1.2rem]</button>
    </div>
</div>

Vertical Variation

Create vertical button groups using the btn-group-vertical class.

Show Code

html

<div class="btn-group btn-group-vertical">
    <button class="btn btn-secondary">Top</button>
    <button class="btn btn-secondary">Middle</button>
    <button class="btn btn-secondary">Bottom</button>
    <div role="group" class="btn-dropdown-split btn-dropdown btn-group">
        <button class="btn btn-secondary">Click Me</button>
        <div role="group" class="btn-group">
            <button type="button" aria-haspopup="true" class="btn btn-secondary dropdown-toggle-split dropdown-toggle"></button>
        </div>
    </div>
</div>

Form Control

Slide Panel

Button Group

Installation

Tailwind Setup

Basic Usage

Split Buttons

Sizing

Predetermined Sizes

Tailwind Sizes

Arbitrary Sizes

Orientation

Split Orientation

Regular Sizing

Tailwind Sizes

Arbitrary Sizes

Split Sizing

Split Tailwind Sizes

Split Arbitrary Sizes

Vertical Variation

Button Group ​

Installation ​

Tailwind Setup ​

Basic Usage ​

Split Buttons ​

Sizing ​

Predetermined Sizes ​

Tailwind Sizes ​

Arbitrary Sizes ​

Orientation ​

Split Orientation ​

Regular Sizing ​

Tailwind Sizes ​

Arbitrary Sizes ​

Split Sizing ​

Split Tailwind Sizes ​

Split Arbitrary Sizes ​

Vertical Variation ​

Button Group

Installation

Tailwind Setup

Basic Usage

Split Buttons

Sizing

Predetermined Sizes

Tailwind Sizes

Arbitrary Sizes

Orientation

Split Orientation

Regular Sizing

Tailwind Sizes

Arbitrary Sizes

Split Sizing

Split Tailwind Sizes

Split Arbitrary Sizes

Vertical Variation