Button Dropdown

#

Applied when the link is active. More info here.

String

-

Anchor CSS selector instead of passing slot

String

""

When set, always appends the relative path to the current path. More info here.

Boolean

-

The aria-label of the component

String

"$t:toggleDropdown"

If dropdown doesn't fit viewport, it will be placed automatically to fit viewport

Boolean

true

Sets up button background opacity.

Number

1

Color CSS style border (theme supported options or HEX).

String

""

Dropdown will be closed when anchor is clicked

Boolean

true

Dropdown will be closed when clicked outside dropdown content and anchor

Boolean

true

Sets dropdown content on click behavior.

Boolean

true

Color of the component (theme string or HEX string).

String

"primary"

Dropdown will be rendered relative to cursor position

Boolean

false

Disables the button.

Boolean

false

Disables the dropdown menu.

Boolean

false

Applies disabled style and removes all user interaction effects.

Boolean

false

Exactly match the link. Without this, '/' will match every route. More info here.

Boolean

-

Applied when the link is active with exact match. More info here.

String

-

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

Makes the button background color a gradient (only if backgroundColor prop is equal to 1).

Boolean

false

Hide icon (when split is disabled).

Boolean

false

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"

Mask color for mask behavior.

String

"textInverted"

Opacity value for opacity behavior and mask opacity for mask behavior.

Number

0.15

Time in ms after mouse leave dropdown before it will be closed

Number

200

Time in ms after mouse enter dropdown before it will be opened

Number

30

Designates the component as anchor and applies the href attribute. More info here.

String

-

Applies a custom icon in the dropdown section.

String

"va-arrow-down"

Sets an icon color.

String

""

Anchor CSS selector inside passed slot

String

""

If true, dropdown content will be hoverable

Boolean

true

Keeps anchor position the same.

Boolean

false

Enables keyboard navigation for the component.

Boolean

false

Same as native label.

String

-

Sets the icon position to the left.

Boolean

false

Indicates that something is loading (spinner icon).

Boolean

false

Sets a dropdown state.

Boolean

false

Sets the distance between dropdown and anchor.

Number | Array

2

Applies a custom icon in the dropdown section when the dropdown is opened.

String

"va-arrow-up"

Sets the placement of the dropdown content. More about placements

String

"auto"

Applies plain styling.

Boolean

false

Named preset combination of component props.

String

-

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"

Mask color for mask behavior.

String

"textPrimary"

Opacity value for opacity behavior and mask opacity for mask behavior.

Number

0.13

If true, dropdown will be teleported to target ignoring overflow: hidden on relative position elements.

Boolean

false

Doesn't look disabled, but acts like one. Mostly useful for wrapper components.

Boolean

-

When set, calls router.replace() instead of router.push() when navigated, so it will not leave a history record. More info here.

Boolean

-

Adds rounded corners (or make a button fully rounded if only icon is passed).

Boolean

false

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"

Provide a set of sizes as a global component specific setting.

Object

{
  "defaultSize": 48,
  "sizes": {
    "small": 32,
    "medium": 48,
    "large": 64
  }
}

Divides the button into two parts. This is useful when you have main action (button) and a number of secondary actions (icon + dropdown).

Boolean

-

Sets a native navigation link in a split component.

String

""

Sets a vue navigation link in a split component.

String

""

Add possibility to work with component without setting v-model.

Boolean

true

Dropdown will not be rendered outside of viewport. It will be moved in opposite direction.

Boolean

false

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"

Navigation target, More info here.

String | Object

-

Element where content will be rendered

String | Object

-

Text color (theme string or HEX string).

String

""

Sets button text opacity.

Number

1

The target route of the link. More info here.

String | Object

-

Action that will triggered when open and close dropdown.

String

"click"

Will be used as value for html type attribute.

String

"button"

click

main-button-click

Emitted when user clicks on main button in split component.

mainButtonClick

update-model-value

The event is triggered when the component needs to change the model. Is also used by v-model

default

Dropdown content slot.

label

Content for dropdown button.