Button Groups

Button groups allow you to group buttons together on a single line.

Basic Example

You can create button groups using the <d-button-group> component.

Default button group

<d-button-group>
    <d-button>Left</d-button>
    <d-button>Middle</d-button>
    <d-button>Right</d-button>
</d-button-group>

<!-- button-group-1.vue -->

Button Group Size

The button group's size can be controlled via the size prop. The button group can be normal (default with no value), small or large.


<div>
    <!-- Large Button Group -->
    <d-button-group size="large" class="mr-2">
        <d-button>Large</d-button>
        <d-button>Large</d-button>
    </d-button-group>

    <!-- Normal Button Group -->
    <d-button-group class="mr-2">
        <d-button>Normal</d-button>
        <d-button>Normal</d-button>
    </d-button-group>

    <!-- Small Button Group -->
    <d-button-group size="small">
        <d-button>Small</d-button>
        <d-button>Small</d-button>
    </d-button-group>
</div>

<!-- button-group-3.vue -->

Vertical Button Group

You can stack button groups vertically using the vertical prop.

<d-button-group vertical>
    <d-button>Button 1</d-button>
    <d-button>Button 2</d-button>
</d-button-group>

<!-- button-group-3.vue -->

Alias

The <d-button-group> component is also aliased as <d-btn-group>.

Props

Prop	Description	Type	Default	Required
:vertical	Whether it is a vertical button group, or not.	`Boolean`	false	False
:size	The button group size.	`String`	null	False
:aria-role	The button group's aria role.	`String`	"group"	False
:aria-label	The button group's aria label.	`String`	"Button group"	False