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

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

String

-

append

Boolean

-

backgroundOpacity

Number

1

borderColor

String

""

color

String

"primary"

disabled

Boolean

false

exact

Boolean

-

exactActiveClass

String

-

fontSizesConfig

Object

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

Boolean

false

grow

Boolean

false

hoverBehavior

String

"mask"

hoverMaskColor

String

"textInverted"

hoverOpacity

Number

0.15

href

String

-

icon

String

""

iconColor

String

""

iconRight

String

""

loading

Boolean

false

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

-

textColor

String

""

textOpacity

Number

1

to

String | Object

-

type

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