Official Partner of
Nuxt
๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ Hire us

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

Toggler 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
active-button-text-color

The color of the button text with the selected value

String

-

active-class

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

-

background-opacity

Sets up button background opacity.

Number

1

border-color

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

disabled-by

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

-

exact-active-class

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

String

-

font-sizes-config

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

group-by

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

hover-behavior

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"

hover-mask-color

Mask color for mask behavior.

String

"textInverted"

hover-opacity

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

Number

0.15

href

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

String

-

icon

Sets an icon.

String

""

icon-color

Sets an icon color.

String

""

icon-right

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

String

""

loading

Indicates that something is loading (spinner icon).

Boolean

false

model-value

The value of the v-model bindings.

String | Number | Boolean

""

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

-

pressed-behavior

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"

pressed-mask-color

Mask color for mask behavior.

String

"textPrimary"

pressed-opacity

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"

sizes-config

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

-

text-by

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"

text-color

Text color (theme string or HEX string).

String

""

text-opacity

Sets button text opacity.

Number

1

to

The target route of the link. More info here.

String | Object

-

toggle-color

Color of the toggle button

String

""

track-by

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"

value-by

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-model-value

The event is triggered when the component needs to change the model. Is also used by v-model