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 Group
#

It is a special component that wrap buttons and applies special styles to them.

Examples
#

Basic usage
#

By default, you need to wrap your buttons with a va-button-group component.

Open in GitHub

Colors
#

Component provides color to each child button.

Open in GitHub

Gradient
#

It’s used to apply a gradient style to a background.

Open in GitHub

Sizes
#

You can set different sizes.

Open in GitHub

Grow
#

Makes button group grow to the width of its container.

Open in GitHub

Presets & 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

Icons
#

Looks good with icons provided to buttons.

Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
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

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

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

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. If you want more control, you can provide number (will be used as px) or string value (rem and px sizes are supported).

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

-

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

-

type

Will be used as value for html type attribute.

String

"button"

Slots #

NameDescription

default

Slot for buttons

Css Variables #

NameDefault Value
--va-button-group-display flex
--va-button-group-justify-content stretch
--va-button-group-border-radius 999px
--va-button-group-gap 0.25rem
--va-button-group-button-margin 0
--va-button-group-button-width auto
--va-button-group-button-padding 0.25rem