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.
Colors #
Component provides color to each child button.
Gradient #
Itโs used to apply a gradient style to a background.
Sizes #
You can set different sizes.
Grow #
Makes button group grow to the width of its container.
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.
Icons #
Looks good with icons provided to buttons.
API #
Props #
Name | Description | Types | Default |
---|---|---|---|
activeClass |
| - | |
append |
| - | |
backgroundOpacity |
|
| |
borderColor |
|
| |
color |
|
| |
disabled |
|
| |
exact |
| - | |
exactActiveClass |
| - | |
fontSizesConfig |
|
| |
gradient |
|
| |
grow |
|
| |
hoverBehavior |
|
| |
hoverMaskColor |
|
| |
hoverOpacity |
|
| |
href |
| - | |
icon |
|
| |
iconColor |
|
| |
iconRight |
|
| |
loading |
|
| |
plain |
|
| |
preset |
| - | |
pressedBehavior |
|
| |
pressedMaskColor |
|
| |
pressedOpacity |
|
| |
replace |
| - | |
round |
|
| |
size |
|
| |
sizesConfig |
|
| |
tag |
|
| |
target |
| - | |
textColor |
|
| |
textOpacity |
|
| |
to |
| - | |
type |
|
|
Slots #
Name | Description |
---|---|
default | Slot for buttons |
Css Variables #
Name | Default 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 |