Button Toggle #
The button is used to switch between different values.
Examples #
Basic usage #
By default, an object with parameters and a v-model is to be passed.
Colors #
Applies color presets and HEX colors.
Toggler color #
Use toggle-color
prop to set the color of the active button.
Gradient #
Applies gradient style to background.
Sizes #
You can provide size presets to the component.
Presets and styles #
You can use the same preset
's (default
, primary
, secondary
, plain
, plainOpacity
) and styles (round
, outline via borderColor
property) as in va-button.
Disabled #
The component can be disabled via disabled
prop.
Icons #
You can set icon instead (or in addition) of label for buttons via options
props (icon
and iconRight
attributes).
API #
Props #
Name | Description | Types | Default |
---|---|---|---|
activeButtonTextColor |
| - | |
activeClass |
| - | |
append |
| - | |
backgroundOpacity |
|
| |
borderColor |
|
| |
color |
|
| |
disabled |
|
| |
disabledBy |
|
| |
exact |
| - | |
exactActiveClass |
| - | |
fontSizesConfig |
|
| |
gradient |
|
| |
groupBy |
|
| |
grow |
|
| |
hoverBehavior |
|
| |
hoverMaskColor |
|
| |
hoverOpacity |
|
| |
href |
| - | |
icon |
|
| |
iconColor |
|
| |
iconRight |
|
| |
loading |
|
| |
modelValue |
|
| |
options required |
| - | |
plain |
|
| |
preset |
| - | |
pressedBehavior |
|
| |
pressedMaskColor |
|
| |
pressedOpacity |
|
| |
replace |
| - | |
round |
|
| |
size |
|
| |
sizesConfig |
|
| |
tag |
|
| |
target |
| - | |
textBy |
|
| |
textColor |
|
| |
textOpacity |
|
| |
to |
| - | |
toggleColor |
|
| |
trackBy |
|
| |
type |
|
| |
valueBy |
|
|
Events #
Name | Description |
---|---|
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |