Button toggles

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 be selected or toggled under a single v-model.

v-btn-toggle/usage.vue

API

Examples

Props

Divided

You can add a visual divider between buttons with the divided prop.

v-btn-toggle/prop-divided.vue

Variant

You can switch the button variant by using variant prop on v-btn-toggle.

v-btn-toggle/prop-variant.vue

Mandatory

A v-btn-toggle with the mandatory prop will always have a value.

v-btn-toggle/prop-mandatory.vue

Multiple

A v-btn-toggle with the multiple prop will allow a user to select multiple return values as an array.

v-btn-toggle/prop-multiple.vue

Rounded

You can control the border radius with the rounded prop.

v-btn-toggle/prop-rounded.vue

Misc

WYSIWYG

Group similar actions and design your own WYSIWYG component.

v-btn-toggle/misc-wysiwyg.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.