Epicmax - We are the core team behind Vuestic UI and Vuestic Admin and frontend development company specializing in Vue.js since our founding in 2017.
🔥🔥🔥 Hire us

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.

Open in GitHub

Presets
#

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

Open in GitHub

Colors
#

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

Open in GitHub

Gradient
#

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

Open in GitHub

Text colors
#

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

Open in GitHub

Sizes
#

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

Open in GitHub

Rounded
#

You can make your button rounded using round prop.

Open in GitHub

Outlined
#

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

Open in GitHub

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.

Open in GitHub

Loading state
#

You can add loading state to the button.

Open in GitHub

Behavior
#

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

Open in GitHub

Disabled
#

The disabled prop prevents any actions with button.

Open in GitHub

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)
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

-

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"

Events #

NameDescription

click

Emitted when user clicks on button. The event argument is:

`() => Event`

Slots #

NameDescription

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 }' }.

Methods #

NameDescription

blur

Removes focus from button

focus

Sets focus on button

Css Variables #

NameDefault 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