• What is KendoReact
  • Getting Started
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilitiesupdated
    • Conversational UI
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editorupdated
    • Excel Export
    • File Saver
    • Formupdated
    • Gantt
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewerupdated
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting
Components / Buttons / API / DropDownButtonProps / 

DropDownButtonProps

NameTypeDefaultDescription

accessKey?

string

Specifies the accessKey of the main button.

ariaLabel?

string

The accessible label of the component.

buttonClass?

string

Sets the className of the main button.

children?

React.ReactNode

Determines the children nodes.

className?

string

Sets the className of the DropDownButton component.

dir?

string

Sets the direction of the component.

disabled?

boolean

Determines whether the component is disabled (see example).

fillMode?

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

solid

Configures the fillMode of the DropDownButton.

The available options are:

  • solid
  • outline
  • flat
  • link
  • null—Does 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).

id?

string

Sets the id property of the top div element of the component.

imageUrl?

string

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

item?

"null" | ComponentType<{ item: any; itemIndex: number; }>

A React functional or class component which is used for rendering items (see example). The default rendering includes an icon, an image, and text.

itemRender?

(li: ReactElement<HTMLLIElement>, props: ButtonItemProps) => ReactNode | ComponentType<{ item: any; itemIndex: number; }>

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

opened?

boolean

Opens the popup of the DropDownButton if set to true.

popupSettings?

ButtonsPopupSettings

Configures the popup (see example).

rounded?

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

medium

Configures the roundness of the DropDownButton.

The available options are:

  • small
  • medium
  • large
  • full
  • null—Does not set a rounded className.

size?

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

medium

Configures the size of the DropDownButton.

The available options are:

  • small
  • medium
  • large
  • null—Does not set a size className.

style?

React.CSSProperties

Sets additional CSS styles to the component.

svgIcon?

SVGIcon

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

tabIndex?

number

Specifies the tabIndex of the main button.

text?

React.ReactNode

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" | "error" | "inverse" | "base" | "success" | "dark" | "light" | "primary" | "secondary" | "tertiary" | "info" | "warning"

base

Configures the themeColor of the DropDownButton.

The available options are:

  • base
  • primary
  • secondary
  • tertiary
  • info
  • success
  • warning
  • error
  • dark
  • light
  • inverse
  • null—Does not set a themeColor className.

title?

string

The title of the component.

Methods

onBlur

Fires when the component is blurred (see example).

Parameters

event

DropDownButtonBlurEvent

onClose

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

Parameters

event

DropDownButtonCloseEvent

onFocus

Fires when the component is focused (see example).

Parameters

event

DropDownButtonFocusEvent

onItemClick

Fires when an item is clicked (see example).

Parameters

event

DropDownButtonItemClickEvent

onOpen

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

Parameters

event

DropDownButtonOpenEvent

In this article

Not finding the help you need?

Contact Support