Button Groups

The v-btn-toggle component is a simple wrapper for v-item-group built specifically to work with v-btn.

Usage

Toggle buttons allow you to create a styled group of buttons that can selected or toggled under a single v-model

API

v-btn-toggle
Name
active-class
Default
'v-btn--active'
Type
string

CSS Class to apply when active

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
mandatory
Default
false
Type
boolean

Forces a value to always be selected

Name
max
Default
undefined
Type
number | string

Sets maximum width

Name
multiple
Default
false
Type
boolean

Allows for multiple selections. Model used must be an Array

Name
rounded
Default
false
Type
boolean

Components.ButtonGroups.

Name
value
Default
undefined
Type
any

Controls visibility

Examples

In toolbar

Easily integrate customized button solutions with a v-toolbar

Selected action

Group similar actions and design your own WYSIWYG component.

Custom groups

Icons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.

Edit this page | language on Github