The v-btn-toggle component is a simple wrapper for v-item-group built specifically to work with v-btn.
Toggle buttons allow you to create a styled group of buttons that can selected or toggled under a single v-model
Select your desired component from below and see the available props, slots, events and functions.
The active-class applied to children when they are activated.
Changes the background-color for the component.
Removes the group's border.
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). You can find list of built in classes on the colors page.
Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes.
Reduces the button size and padding.
Applies the light theme variant to the component.
Forces a value to always be selected (if available).
Sets a maximum number of selections that can be made.
Allow multiple selections. The value prop must be an array.
Round edge buttons
Applies a large border radius on the top left and bottom right of the card.
Removes the component's border-radius.
The designated model value for the component.
The default Vue slot.
Emitted when the input is changed by user interaction
any[] | any$border-radius-root !default;48px !default;0.8 !default;0 12px !default;48px !default;0 8px !default;4px !default;24px !default;24px !default;Below is a collection of simple to complex examples.
You can make VBtnToggle rounded using the rounded prop.
mandatory VBtnToggle always has value.
multiple VBtnToggle allows user to select multiple variants and returns value as an array.
Easily integrate customized button solutions with a v-toolbar
Group similar actions and design your own WYSIWYG component.
Ready for more? Continue reading with: