Vue Interface

Appearance

Button Dropdown ​

The btn-dropdown component provides an interactive button paired with a dropdown menu. It extends the standard button, button-group, and dropdown-menu components.

Installation ​

bash
pnpm i @vue-interface/btn-dropdown
bash
yarn add @vue-interface/btn-dropdown
bash
npm i @vue-interface/btn-dropdown
bash
bun i @vue-interface/btn-dropdown

Tailwind Setup ​

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

Basic Usage ​

html
<BtnDropdown label="Dropdown" @click-toggle="onToggle">
    <a href="#/test" @click="onClickItem">Action</a>
    <a href="#">Another Action</a>
    <hr>
    <a href="#">Something else here</a>
</BtnDropdown>

Split Button ​

Create a split btn-dropdown component by adding the split prop.

html
<BtnDropdown label="Dropdown" @click-toggle="onToggle" split>
    <a href="#/test" @click="onClickItem">Action</a>
    <a href="#">Another Action</a>
    <hr>
    <a href="#">Something else here</a>
</BtnDropdown>

TIP

The split dropdown button is a combination of a button-group button and a dropdown-menu.

Custom Buttons ​

Show Code - (+)
html
<BtnDropdown :caret="false" label="+" button-class="btn-primary rounded-full p-0 size-8" @click-toggle="onToggle">
    <a href="#/test" @click="onClickItem">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
Show Code - Elipses
html
<BtnDropdown>
    <template #button="{ target, onBlur, onClickToggle, expanded }">
        <button :ref="target" class="bg-gray-100 p-2 rounded-full outline-none active:ring-4 focus:ring-4 ring-blue-500/50" :class="{'rotate-z-90': expanded}" @blur="onBlur" @click="onClickToggle">
            <svg version="1.0" class="w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet">
                <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="#000" stroke="none">
                    <path d="M570 3243 c-71 -12 -189 -60 -255 -104 -194 -130 -315 -353 -315
                    -580 0 -288 202 -567 473 -655 110 -36 263 -44 372 -19 341 76 582 414 536
                    754 -48 358 -338 615 -690 610 -53 -1 -107 -4 -121 -6z"/>
                    <path d="M2395 3234 c-243 -59 -452 -270 -509 -514 -20 -83 -20 -237 0 -320
                    45 -195 188 -372 369 -460 104 -51 187 -70 305 -70 118 0 201 19 305 70 137
                    66 249 178 315 315 51 104 70 187 70 305 0 118 -19 201 -70 305 -87 180 -253
                    316 -446 365 -93 24 -249 26 -339 4z"/>
                    <path d="M4254 3231 c-198 -54 -360 -186 -448 -366 -51 -104 -69 -183 -69
                    -305 0 -122 18 -201 69 -306 68 -139 186 -253 334 -323 204 -97 472 -77 664
                    49 190 124 316 355 316 580 0 290 -200 567 -474 656 -111 37 -287 43 -392 15z"/>
                </g>
            </svg>
        </button>
    </template>
    <a href="#/test" @click="onClickItem">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>

Variants ​

Show Code
html
<BtnDropdown label="Primary" variant="btn-primary">
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Secondary" variant="btn-secondary">
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Success" variant="btn-success">
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Info" variant="btn-info">
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Warning" variant="btn-warning">
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Danger" variant="btn-danger">
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Dark" variant="btn-dark">
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Light" variant="btn-light">
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Muted" variant="btn-muted">
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>

Outline Variants ​

Show Code
html
<BtnDropdown label="Primary" variant="btn-outline-primary">
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Secondary" variant="btn-outline-secondary">
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Success" variant="btn-outline-success">
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Info" variant="btn-outline-info">
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Warning" variant="btn-outline-warning">
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Danger" variant="btn-outline-danger">
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Dark" variant="btn-outline-dark">
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Light" variant="btn-outline-light">
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Muted" variant="btn-outline-muted">
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>

Split Button Variants ​

Show Code
html
<BtnDropdown label="Primary" variant="btn-primary" split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Secondary" variant="btn-secondary" split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Success" variant="btn-success" split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Info" variant="btn-info" split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Warning" variant="btn-warning" split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Danger" variant="btn-danger" split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Dark" variant="btn-dark" split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Light" variant="btn-light" split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Muted" variant="btn-muted" split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>

Split Outline Variants ​

Show Code
html
<BtnDropdown label="Primary" variant="btn-outline-primary" split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Secondary" variant="btn-outline-secondary" split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Success" variant="btn-outline-success" split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Info" variant="btn-outline-info" split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Warning" variant="btn-outline-warning" split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Danger" variant="btn-outline-danger" split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Dark" variant="btn-outline-dark" split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Light" variant="btn-outline-light" split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Muted" variant="btn-outline-muted" outline split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>

Sizes ​

Customize the size of a btn-dropdown component 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>
    <BtnDropdown label="xs" size="btn-group-xs" variant="btn-secondary">
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>
<div>
    <BtnDropdown label="sm" size="btn-group-sm" variant="btn-secondary">
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>
<div>
    <BtnDropdown label="md" size="btn-group-md" variant="btn-secondary">
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>
<div>
    <BtnDropdown label="lg" size="btn-group-lg" variant="btn-secondary">
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>
<div>
    <BtnDropdown label="xl" size="btn-group-xl" variant="btn-secondary">
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>
<div>
    <BtnDropdown label="2xl" size="btn-group-2xl" variant="btn-secondary">
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>
<div>
    <BtnDropdown label="3xl" size="btn-group-3xl" variant="btn-secondary">
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>
<div>
    <BtnDropdown label="4xl" size="btn-group-4xl" variant="btn-secondary">
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>
<div>
    <BtnDropdown label="5xl" size="btn-group-5xl" variant="btn-secondary">
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</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>
    <BtnDropdown label="btn-group-3" size="btn-group-3" variant="btn-secondary">
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>
<div>
    <BtnDropdown label="btn-group-4" size="btn-group-4" variant="btn-secondary">
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>
<div>
    <BtnDropdown label="btn-group-5" size="btn-group-5" variant="btn-secondary">
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</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>
    <BtnDropdown label="btn-group-[16px]" size="btn-group-[16px]" variant="btn-secondary">
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>
<div>
    <BtnDropdown label="btn-group-[1rem]" size="btn-group-[1rem]" variant="btn-secondary">
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>

Split Sizes ​

Customize the size of a split btn-dropdown component 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>
    <BtnDropdown label="xs" size="btn-group-xs" variant="btn-secondary" split>
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>
<div>
    <BtnDropdown label="sm" size="btn-group-sm" variant="btn-secondary" split>
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>
<div>
    <BtnDropdown label="md" size="btn-group-md" variant="btn-secondary" split>
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>
<div>
    <BtnDropdown label="lg" size="btn-group-lg" variant="btn-secondary" split>
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>
<div>
    <BtnDropdown label="xl" size="btn-group-xl" variant="btn-secondary" split>
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>
<div>
    <BtnDropdown label="2xl" size="btn-group-2xl" variant="btn-secondary" split>
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>
<div>
    <BtnDropdown label="3xl" size="btn-group-3xl" variant="btn-secondary" split>
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>
<div>
    <BtnDropdown label="4xl" size="btn-group-4xl" variant="btn-secondary" split>
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>
<div>
    <BtnDropdown label="5xl" size="btn-group-5xl" variant="btn-secondary" split>
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</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>
    <BtnDropdown label="btn-group-3" size="btn-group-3" variant="btn-secondary" split>
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>
<div>
    <BtnDropdown label="btn-group-4" size="btn-group-4" variant="btn-secondary" split>
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>
<div>
    <BtnDropdown label="btn-group-5" size="btn-group-5" variant="btn-secondary" split>
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</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>
    <BtnDropdown label="btn-group-[16px]" size="btn-group-[16px]" variant="btn-secondary" split>
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>
<div>
    <BtnDropdown label="btn-group-[1rem]" size="btn-group-[1rem]" variant="btn-secondary" split>
        <a href="#">Action</a>
        <a href="#">Another Action</a>
        <a href="#">Something else here</a>
    </BtnDropdown>
</div>

Customize the alignment of the dropdown menu relative to the button using the align prop. Use start value to align the left side of the menu to the button, and the end value to align right edge of the menu to the button.

Show Code
html
<BtnDropdown align="start" label="Align Left" variant="btn-secondary">
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown align="start" label="Align Left (Split)" variant="btn-secondary" split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown align="end" label="Align Right" variant="btn-secondary">
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown align="end" label="Align Right (Split)" variant="btn-secondary" split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>

Specify the direction of the dropdown menu using the dropup, dropright, or dropleft props.

Dropup ​

Show Code
html
<BtnDropdown label="Dropup" variant="btn-secondary" dropup>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Dropup (Split)" variant="btn-secondary" dropup split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>

Dropright ​

Show Code
html
<BtnDropdown label="Dropright" variant="btn-secondary" dropright>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Dropright (Split)" variant="btn-secondary" dropright split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>

Dropleft ​

Show Code
html
<BtnDropdown label="Dropleft" variant="btn-secondary" dropleft>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>
<BtnDropdown label="Dropleft (Split)" variant="btn-secondary" dropleft split>
    <a href="#">Action</a>
    <a href="#">Another Action</a>
    <a href="#">Something else here</a>
</BtnDropdown>