Official Partner of
Nuxt
๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ Hire us

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.

Open in GitHub

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

Open in GitHub

Colors
#

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

Open in GitHub

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

Open in GitHub

buttonDropdown.examples.presets.title
#

Open in GitHub

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

Open in GitHub

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.

Open in GitHub

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.

Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
activeClass

String

-

anchorSelector

String

""

append

Boolean

-

ariaLabel

String

"$t:toggleDropdown"

autoPlacement

Boolean

true

backgroundOpacity

Number

1

borderColor

String

""

closeOnAnchorClick

Boolean

true

closeOnClickOutside

Boolean

true

closeOnContentClick

Boolean

true

color

String

"primary"

cursor

Boolean

false

disableButton

Boolean

false

disabled

Boolean

false

disableDropdown

Boolean

false

exact

Boolean

-

exactActiveClass

String

-

fontSizesConfig

Object

{
  "defaultSize": 1,
  "sizes": {
    "small": 0.75,
    "medium": 1,
    "large": 1.25
  }
}
gradient

Boolean

false

hideIcon

Boolean

false

hoverBehavior

String

"mask"

hoverMaskColor

String

"textInverted"

hoverOpacity

Number

0.15

hoverOutTimeout

Number

200

hoverOverTimeout

Number

30

href

String

-

icon

String

"va-arrow-down"

iconColor

String

""

innerAnchorSelector

String

""

isContentHoverable

Boolean

true

keepAnchorWidth

Boolean

false

keyboardNavigation

Boolean

false

label

String

-

leftIcon

Boolean

false

loading

Boolean

false

modelValue

Boolean

false

offset

Number | Array

2

openedIcon

String

"va-arrow-up"

placement

String

"auto"

plain

Boolean

false

preset

String

-

pressedBehavior

String

"mask"

pressedMaskColor

String

"textPrimary"

pressedOpacity

Number

0.13

preventOverflow

Boolean

false

readonly

Boolean

-

replace

Boolean

-

round

Boolean

false

size

String

"medium"

sizesConfig

Object

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

Boolean

-

splitHref

String

""

splitTo

String

""

stateful

Boolean

true

stickToEdges

Boolean

false

tag

String

"button"

target

String | Object

-

teleport

String | Object

-

textColor

String

""

textOpacity

Number

1

to

String | Object

-

trigger

String

"click"

type

String

"button"

Events #

NameDescription

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

Slots #

NameDescription

default

Dropdown content slot.

label

Content for dropdown button.

Css Variables #

NameDefault Value
--va-button-dropdown-button-margin 0