Button Dropdown
#

Component with a button that displays dropdown content when getting clicked. It inherits properties, provided by VaButton and VaDropdown components.

Examples
#

Basic usage
#

Just wrap your content with va-button-dropdown component and it will become available only via click.

Split
#

The split prop allows you to split the button into two, with different purposes of using. One of them can be a link (you can set href for it via split-to or split-href props, which are analogues of the to and href attributes).

Colors
#

The component can be colored via color, gradient and text-color props.

Sizes
#

You are able to set component's size via size prop (small, medium or large presets are available, px and rem values are also suitable).

Presets
#

Disabled
#

The component can be disabled via disabled prop. For the split state can be disabled both or only one button (via disableButton and disableDropdown props).

Icons
#

You can set the dropdown icon and its color via icon and icon-color props. Also you are able to change icon's position from right to left side of the button via left-icon boolean prop. If you want to remove icon at all, use the hide-icon property. Opened-state icon can be changed using openedIcon prop.

Click inside
#

You are able to set up the dropdown to be closed or not after clicking on its content using the close-on-content-click prop.

API
#

Name	Description	Types	Default
activeClass	Applied when the link is active. More info here.	`String`	-
anchor		`String \| Object`	-
anchorSelector	Anchor CSS selector instead of passing slot	`String`	`""`
append	When set, always appends the relative path to the current path. More info here.	`Boolean`	-
ariaLabel	The aria-label of the component	`String`	`"$t:toggleDropdown"`
autoPlacement	If dropdown doesn't fit viewport, it will be placed automatically to fit viewport	`Boolean`	`true`
backgroundOpacity	Sets up button background opacity.	`Number`	`1`
borderColor	Color CSS style `border` (theme supported options or `HEX`).	`String`	`""`
closeOnAnchorClick	Dropdown will be closed when anchor is clicked	`Boolean`	`true`
closeOnClickOutside	Dropdown will be closed when clicked outside dropdown content and anchor	`Boolean`	`true`
closeOnContentClick	Sets dropdown content on click behavior.	`Boolean`	`true`
closeOnFocusOutside		`Boolean`	`true`
color	Color of the component (theme string or `HEX` string).	`String`	`"primary"`
cursor	Dropdown will be rendered relative to cursor position	`Boolean \| Object`	`false`
disableButton	Disables the button.	`Boolean`	`false`
disabled	Applies `disabled` style and removes all user interaction effects.	`Boolean`	`false`
disableDropdown	Disables the dropdown menu.	`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`
hideIcon	Hide icon (when `split` is disabled).	`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`
hoverOutTimeout	Time in `ms` after mouse leave dropdown before it will be closed	`Number`	`200`
hoverOverTimeout	Time in `ms` after mouse enter dropdown before it will be opened	`Number`	`30`
href	Designates the component as anchor and applies the href attribute. More info here.	`String`	-
icon	Applies a custom icon in the dropdown section.	`String`	`"va-arrow-down"`
iconColor	Sets an icon color.	`String`	`""`
innerAnchorSelector	Anchor CSS selector inside passed slot	`String`	`""`
isContentHoverable	If true, dropdown content will be hoverable	`Boolean`	`true`
keepAnchorWidth	Keeps anchor position the same.	`Boolean`	`false`
keyboardNavigation	Enables keyboard navigation for the component.	`Boolean`	`true`
label	Same as native `label`.	`String`	-
leftIcon	Sets the icon position to the left.	`Boolean`	`false`
loading	Indicates that something is loading (spinner icon).	`Boolean`	`false`
modelValue	Sets a dropdown state.	`Boolean`	`false`
offset	Sets the distance between dropdown and anchor.	`Number \| Array`	`2`
openedIcon	Applies a custom icon in the dropdown section when the dropdown is opened.	`String`	`"va-arrow-up"`
placement	Sets the placement of the dropdown content. More about placements	`String`	`"auto"`
plain	Applies `plain` styling.	`Boolean`	`false`
preset	Named preset combination of component props.	`String`	-
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`
readonly	Doesn't look disabled, but acts like one. Mostly useful for wrapper components.	`Boolean`	-
replace	When set, calls `router.replace()` instead of `router.push()` when navigated, so it will not leave a history record. More info here.	`Boolean`	-
role	Sets the `role` attribute.	`String`	`"button"`
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 } }`
split	Divides the button into two parts. This is useful when you have main action (button) and a number of secondary actions (icon + dropdown).	`Boolean`	-
splitHref	Sets a native navigation link in a split component.	`String`	`""`
splitTo	Sets a vue navigation link in a split component.	`String`	`""`
stateful	Add possibility to work with component without setting `v-model`.	`Boolean`	`true`
stickToEdges	Dropdown will not be rendered outside of viewport. It will be moved in opposite direction.	`Boolean`	`false`
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	Navigation target, More info here.	`String \| Object`	-
teleport	Element where content will be rendered	`String \| Object`	-
textColor	Text color (theme string or HEX string).	`String`	`""`
textOpacity	Sets button text opacity.	`Number`	`1`
to	The target route of the link. More info here.	`String \| Object`	-
trigger	Action that will triggered when open and close dropdown.	`String \| Array`	`[ "click", "space", "enter", "arrow-down", "arrow-up" ]`
type	Will be used as value for html `type` attribute.	`String`	`"button"`
verticalScrollOnOverflow		`Boolean`	`true`

Name	Description
click	Emitted when user clicks on button.. The event argument is: `() => Event`
mainButtonClick	Emitted when user clicks on main button in split component.. The event argument is: `() => Event`
update:modelValue	The event is triggered when the component needs to change the model. Is also used by `v-model` and must be listed after the `v-model`

Name	Description
default	Dropdown content slot.
label	Content for dropdown button.

Name	Default Value
--va-button-dropdown-button-margin	0

Button Dropdown
#

Examples
#

Basic usage
#

Split
#

Colors
#

Sizes
#

Presets
#

Disabled
#

Icons
#

Click inside
#

API
#

Props #

Events #

Slots #

Css Variables #

Change log #

Button Dropdown #

Examples #

Basic usage #

Split #

Colors #

Sizes #

Presets #

Disabled #

Icons #

Click inside #

API #

Props #

Events #

Slots #

Css Variables #

Change log #

Button Dropdown
#

Examples
#

Basic usage
#

Split
#

Colors
#

Sizes
#

Presets
#

Disabled
#

Icons
#

Click inside
#

API
#