Native Components
    • Animation
    • Buttonsupdated
    • Charts
    • Data Query
    • Data Toolsupdated
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editornew
    • Excel Export
    • File Saver
    • Form
    • Gaugesnew
    • Grid
    • Indicatorsnew
    • Inputsupdated
    • Labels
    • Layoutupdated
    • PDF Processingnew
    • Popup
    • Progress Barsnew
    • Tooltipnew
    • Upload
    Wrapper Components
    Styling & Themes
    Common Features
    Project Setup
    Changelog
New to Kendo UI for Vue? Start a free 30-day trial

DropDownButtonProps

accessKey?

string

Specifies the accessKey of the main button.

buttonClass?

string

Sets the className of the main button.

dir?

string

Sets the direction of the component.

disabled?

boolean

Determines whether the component is disabled (see example).

fillMode?

null | "solid" | "outline" | "flat" | "link"

(default: solid) Configures the fillMode of the DropDownButton.

The available options are:

  • solid
  • outline
  • flat
  • link
  • nullDoes not set a fillMode className.

icon?

string

Defines an icon that will be rendered next to the main button text (see example).

iconClass?

string

Defines an icon with a custom CSS class that will be rendered next to the main button text (see example).

imageUrl?

string

Defines the location of an image that will be displayed next to the main button text (see example).

item?

null | any

A string of a slot name, render function or a component which is used for rendering items (see example). The default rendering includes an icon, an image, and text.

itemRender?

any

Fires when a dropdown list button item is about to be rendered. Use it to override the default appearance of the list items. if item prop is not declared, itemRender behaves like item, for backward compatibility with versions before 4.2.0

items?

any[]

Specifies the list items (see example).

look?

ButtonLook | string

Deprecated. Changes the visual appearance by using alternative styling options (see example).

onBlur?

(event: DropDownButtonBlurEvent) => void

Fires when the component is blurred (see example).

onClose?

(event: DropDownButtonCloseEvent) => void

Fires when the popup which contains the items is closed (see example).

onFocus?

(event: DropDownButtonFocusEvent) => void

Fires when the component is focused (see example).

onItemclick?

(event: DropDownButtonItemClickEvent) => void

Fires when an item is clicked (see example).

onOpen?

(event: DropDownButtonOpenEvent) => void

Fires when the popup which contains the items is opened (see example).

opened?

boolean

Opens the popup of the DropDownButton if set to true.

popupSettings?

ButtonsPopupSettings

Configures the popup (see example).

rounded?

null | "small" | "medium" | "large" | "full"

(default: medium) Configures the roundness of the DropDownButton.

The available options are:

  • small
  • medium
  • large
  • full
  • nullDoes not set a rounded className.

shape?

null | "rectangle" | "square"

(default: rectangle) Configures the shape of the DropDownButton.

The available options are:

  • rectangle
  • square
  • nullDoes not set a shape className.

size?

null | "small" | "medium" | "large"

(default: medium) Configures the size of the DropDownButton.

The available options are:

  • small
  • medium
  • large
  • nullDoes not set a size className.

primary?

boolean

Adds visual weight to the button and makes it primary (see example).

tabIndex?

number

Specifies the tabIndex of the main button.

text?

any

Specifies the text of the main button (see example).

textField?

string

Configures the field that will be used for the text of the items. textField has to be used together with the items prop (see example).

themeColor?

null | "base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse"

(default: base) Configures the themeColor of the DropDownButton.

The available options are:

  • base
  • primary
  • secondary
  • tertiary
  • info
  • success
  • warning
  • dark
  • light
  • inverse
  • nullDoes not set a themeColor className.