Need help with Vue or Nuxt? We build fast apps, custom UI libraries, and help you move to Vue 3 and Nuxt 3 — start with a free 2-week trial.
Talk to an Engineer

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.

Open in GitHub

Colors
#

Applies color presets and HEX colors.

Open in GitHub

Toggle color
#

Use toggle-color prop to set the color of the active button.

Open in GitHub

Gradient
#

Applies gradient style to background.

Open in GitHub

Sizes
#

You can provide size presets to the component.

Open in GitHub

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.

Open in GitHub

Disabled
#

The component can be disabled via disabled prop.

Open in GitHub

Icons
#

You can set icon instead (or in addition) of label for buttons via options props (icon and iconRight attributes).

Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
activeButtonTextColor

The color of the button text with the selected value

String

-

activeClass

Applied when the link is active. More info here.

String

-

append

When set, always appends the relative path to the current path. More info here.

Boolean

-

autofocus

Boolean

false

backgroundOpacity

Sets up button background opacity.

String | Number

1

borderColor

Color CSS style border (theme supported options or HEX).

String

""

color

Color of the component (theme string or HEX string).

String

"primary"

disabled

Applies disabled style and removes all user interaction effects.

Boolean

false

disabledBy

Specify the key in the object to be used as item disabled prop. Can be string (path to the key) or function of type: (option) => option.disabled

String | Function

"disabled"

exact

Exactly match the link. Without this, '/' will match every route. More info here.

Boolean

-

exactActiveClass

Applied when the link is active with exact match. More info here.

String

-

fontSizesConfig

Provide a set of sizes for fonts as a global component specific setting.

Object

{
  "defaultSize": 1,
  "sizes": {
    "small": 0.75,
    "medium": 1,
    "large": 1.25
  }
}
gradient

Adds a background gradient.

Boolean

false

groupBy

When options prop is an object, this key will be used to group up options. Can be string (path to the key) or function of type: (option) => option.group

String | Function

"group"

grow

Take all container width

Boolean

false

hoverBehavior

Behavior of the button, when it's being hovered. Can be mask (superimposes color mask on the background or text color for plain state) or opacity (adds opacity to the background or text color for plain state).

String

"mask"

hoverMaskColor

Mask color for mask behavior.

String

"textInverted"

hoverOpacity

Opacity value for opacity behavior and mask opacity for mask behavior.

Number | String

0.15

href

Designates the component as anchor and applies the href attribute. More info here.

String

-

icon

Sets an icon.

String

""

iconColor

Sets an icon color.

String

""

iconRight

The icon to be displayed to the right of a title.

String

""

loading

Indicates that something is loading (spinner icon).

Boolean

false

modelValue

The value of the v-model bindings.

String | Number | Boolean | Object

""

options

The array of objects with label and value properties

Array

-

plain

Applies plain styling.

Boolean

false

preset

Named preset combination of component props.

String | Array

-

pressedBehavior

Behavior of the button, when it's being pressed. Can be mask (superimposes color mask on the background or text color for plain state) or opacity (adds opacity to the background or text color for plain state).

String

"mask"

pressedMaskColor

Mask color for mask behavior.

String

"textPrimary"

pressedOpacity

Opacity value for opacity behavior and mask opacity for mask behavior.

Number

0.13

replace

When set, calls router.replace() instead of router.push() when navigated, so it will not leave a history record. More info here.

Boolean

-

round

Adds rounded corners (or make a button fully rounded if only icon is passed).

Boolean

false

size

Specify size for component. "small", "medium", "large" sizes are available

String

"medium"

sizesConfig

Provide a set of sizes as a global component specific setting.

Object

{
  "defaultSize": 48,
  "sizes": {
    "small": 32,
    "medium": 48,
    "large": 64
  }
}
tag

Replaces html tag. This is useful for semantics and also to allow for valid markup in some cases (ul > li and tr > td etc.).

String

"button"

target

Navigation target, More info here.

String

-

textBy

When options prop is an object, this key will be used as displayed text. Can be string (path to the key) or function of type: (option) => option.text

String | Function

"label"

textColor

Text color (theme string or HEX string).

String

""

textOpacity

Sets button text opacity.

String | Number

1

to

The target route of the link. More info here.

String | Object

-

toggleColor

Color of the toggle button

String

""

trackBy

When options prop is an object, this key will be used to track selected options. Can be string (path to the key) or function of type: (option) => option.track

String | Function

""

type

Will be used as value for html type attribute.

String

"button"

valueBy

When options prop is an object, this key will be used as modelValue. Can be string (path to the key) or function of type: (option) => option.value

String | Function

"value"

Events #

NameDescription

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model and must be listed after the v-model