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
activeButtonTextColor

String

-

activeClass

String

-

append

Boolean

-

backgroundOpacity

Number

1

borderColor

String

""

color

String

"primary"

disabled

Boolean

false

disabledBy

String | Function

"disabled"

exact

Boolean

-

exactActiveClass

String

-

fontSizesConfig

Object

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

Boolean

false

groupBy

String | Function

"group"

grow

Boolean

false

hoverBehavior

String

"mask"

hoverMaskColor

String

"textInverted"

hoverOpacity

Number

0.15

href

String

-

icon

String

""

iconColor

String

""

iconRight

String

""

loading

Boolean

false

modelValue

String | Number | Boolean

""

options

Array

-

plain

Boolean

false

preset

String

-

pressedBehavior

String

"mask"

pressedMaskColor

String

"textPrimary"

pressedOpacity

Number

0.13

replace

Boolean

-

round

Boolean

false

size

String

"medium"

sizesConfig

Object

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

String

"button"

target

String

-

textBy

String | Function

"label"

textColor

String

""

textOpacity

Number

1

to

String | Object

-

toggleColor

String

""

trackBy

String | Function

""

type

String

"button"

valueBy

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