Button
#

The va-button component replaces the standard HTML button. It offers multiple built-in style presets and allows user to change different attributes (size, color, opacity etc.) manually.

Examples
#

Default
#

Just a simple button.

Presets
#

The preset prop is used to change the build-in style of the component.

Colors
#

The color prop is used to change the color of the component.

Gradient
#

Used to apply a gradient style to a background (only if backgroundOpacity prop is equals 1).

Text colors
#

The text-color prop is used to change the color of the button description.

Sizes
#

The size prop is used to fit your button to any place on your web page.

Rounded
#

You can make your button rounded using round prop.

Outlined
#

You can make the button outlined using prop border-color.

Add icons
#

You can add icons to va-button with 2 different props: icon and icon-right. Also you can specify color for them via icon-color prop.

Loading state
#

You can add loading state to the button.

Behavior
#

You can change hover or pressed behavior of the button via hover/pressedBehavior, hover/pressedMaskColor and hover/pressedOpacity props.

Disabled
#

The disabled prop prevents any actions with button.

Tag
#

You can change the tag of the button wrapper to any other necessary one. However, we recommend to use other properties. For example, if the href property is set, then button will be replaced with a, and if the value of the to property is passed, the button tag will automatically change to router-link.

External Inner

I'm button (no)

API
#

Name	Description	Types	Default
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`	-
backgroundOpacity	Sets up button background opacity.	`Number \| String`	`1`
block	Applies block styling (will take 100% of container width).	`Boolean`	`false`
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	Makes the button background color a gradient (only if `backgroundColor` prop is equal to `1`).	`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	Will be used as value for html `href` attribute (if used, `<button />` will be replaced with `<a>` tag).	`String`	-
icon	The icon to be displayed to the left of the title.	`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	Will be used as value for html `target` attribute.	`String`	-
textColor	Text color (theme string or HEX string).	`String`	`""`
textOpacity	Sets button text opacity.	`Number \| String`	`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"`

Name	Description
click	Emitted when user clicks on button. The event argument is: `() => Event`

Name	Description
append	Slot to input before button's content. Slot scope properties available: `{ '{ icon, iconAttributes }' }`.
default	Default slot for button's content.
loading	Slot for loading state. Slot scope properties available: `{ '{ icon, iconAttributes }' }`.
prepend	Slot to input after button's content. Slot scope properties available: `{ '{ icon, iconAttributes }' }`.

Name	Description
blur	Removes focus from button
focus	Sets focus on button

Name	Default Value
--va-button-display	inline-flex
--va-button-justify-content	center
--va-button-align-items	center
--va-button-background-image	none
--va-button-box-shadow	none
--va-button-border-width	0
--va-button-border-color	unset
--va-button-border-style	none
--va-button-font-weight	600
--va-button-transition	none
--va-button-padding	0
--va-button-cursor	pointer
--va-button-sm-size	1.5rem
--va-button-sm-content-py	0.25rem
--va-button-sm-content-px	0.375rem
--va-button-sm-only-icon-content-px	0.25rem
--va-button-sm-font-size	0.8125rem
--va-button-sm-letter-spacing	0
--va-button-sm-line-height	1rem
--va-button-sm-border-radius	0.125rem
--va-button-sm-icon-side-padding	var(--va-button-sm-content-py)
--va-button-sm-icons-spacing	0.125rem
--va-button-size	2.25rem
--va-button-content-py	0.5rem
--va-button-content-px	0.75rem
--va-button-only-icon-content-px	0.5rem
--va-button-font-size	1rem
--va-button-letter-spacing	0
--va-button-line-height	1.25rem
--va-button-border-radius	0.25rem
--va-button-icon-side-padding	var(--va-button-content-py)
--va-button-icons-spacing	0.25rem
--va-button-lg-size	3rem
--va-button-lg-content-py	0.75rem
--va-button-lg-content-px	1rem
--va-button-lg-only-icon-content-px	1rem
--va-button-lg-font-size	1.05rem
--va-button-lg-letter-spacing	0
--va-button-lg-line-height	1.5rem
--va-button-lg-border-radius	0.5rem
--va-button-lg-icon-side-padding	var(--va-button-lg-content-py)
--va-button-lg-icons-spacing	0.25rem
--va-button-bordered-border	1px
--va-button-bordered-style	solid

Button
#

Examples
#

Default
#

Presets
#

Colors
#

Gradient
#

Text colors
#

Sizes
#

Rounded
#

Outlined
#

Add icons
#

Loading state
#

Behavior
#

Disabled
#

Tag
#

API
#

Props #

Events #

Slots #

Methods #

Css Variables #

Button #

Examples #

Default #

Presets #

Colors #

Gradient #

Text colors #

Sizes #

Rounded #

Outlined #

Add icons #

Loading state #

Behavior #

Disabled #

Tag #

API #

Props #

Events #

Slots #

Methods #

Css Variables #

Button
#

Examples
#

Default
#

Presets
#

Colors
#

Gradient
#

Text colors
#

Sizes
#

Rounded
#

Outlined
#

Add icons
#

Loading state
#

Behavior
#

Disabled
#

Tag
#

API
#