DropDownButton

DropDownButton Overview

The DropDownButton component is a UI element that combines a button and a dropdown menu. Upon interaction with the button, it displays a popup list of action items to choose from, allowing the user to select a single option. It provides you with a compact and convenient way to present a set of options.

Live Demo

Appearance

The DropDownButton provides built-in styling options that grant visually appealing and flexible rendering experience.

Apart from the default vision of the Telerik and Kendo UI DropDownButton, the component supports alternative styling options which enable you to configure the individual aspects of its appearance.

States

Depending on the action you want to imply through its appearance, the Telerik and Kendo UI DropDownButton can acquire the following states which you can set by using the following classes:

• A DropDownButton in its normal state appears active, and is usable and clickable.
• k-hover—Тhe hover state of a DropDownButton is applied after the user hovers over the component.
• k-focus—The focus state is triggered after the DropDownButton has been spotlighted with the mouse or the keyboard.
• k-active—The active state is applied when a DropDownButton is activated upon user interaction. It displays a popup list of menu items to choose from.
• k-disabled—The disabled state indicates that a DropDownButton is temporarily unclickable because, for example, the page requires additional user input, or something important is missing before the user continues to the next step. To indicate that they are unavailable, DropDownButtons in their disabled state are usually faded, slightly out of focus, and show a subdued text label.

Anatomy

The anatomy of the DropDownButton summarizes the elements of the component.

Depending on the elements they display, the Telerik and Kendo UI DropDownButton can be any of the following types:

• Icon—Icon drop-down buttons display icons instead of text, and are useful for visual enhancement. The Telerik and Kendo UI DropDownButton seamlessly accepts Kendo UI font icons, FontAwesome icons, and image icons which can be displayed as foreground or background images. Using background images is better because the icon represents a decoration and not structural content.
• Text—Text drop-down buttons render a chunk of text which directly identifies the action that will be triggered upon user interaction.
• Icon-and-text—Icon-and-text drop-down buttons display icons next to a chunk of text, and also come in handy when you want to visually enhance the drop-down button and its message.

1. An icon-only DropDownButton
2. An icon-and-text DropDownButton
3. A text-only DropDownButton

The next image shows the anatomy of an Icon drop-down button and includes the following elements:

1. Container
2. Icon (optional)
3. Text label (optional)
4. Menu item
5. Popup with menu items

Size

The DropDownButton provides the size configuration option that enables you to control how big or small the rendered DropDownButton will be. DropDownButtons also provide options for size customization.

size provides the following available options:

• small—Renders small drop-down buttons, which are suitable for compact components, such as the Pager and Toolbar, where the available space is limited.
• medium (default)—Renders medium drop-down buttons.
• large—Renders large drop-down buttons, which are suitable for adaptive components and mobile devices.
• none—Does not set a size and allows you to add your own, custom value.

1. Small
2. Medium (default)
3. Large

Color

The DropDownButton provides the theme-color configuration option that enables you to choose among the available, built-in colors that will be applied to it. DropDownButtons also provide options for color customization.

themeColor provides the following available options:

• base (default)
• primary—Primary drop-down buttons visualize the most important action on the page and immediately draw the undivided attention of users by acquiring specific styling, for example, solid color. To avoid visual clutter, primary drop-down buttons must be used once on a page.
• secondary—Secondary drop-down buttons indicate actions of secondary importance.
• tertiary—Tertiary drop-down buttons are used less frequently than primary and secondary buttons. They indicate independent, less pronounced, common actions throughout a page, for example, sub-tasks on a page with a primary button.
• info—Info drop-down buttons are most suitably used for notification alerts, conveying to users that new information is available.
• success—Success drop-down buttons imply successful or positive actions.
• warning—Warning drop-down buttons typically appear in confirmation dialogs to indicate actions causing significant changes, which must be regarded with caution.
• error—Error drop-down buttons typically appear in dialogs to indicate that the user is about to make a destructive and irreversible action such as deleting or removing a file.
• none—Does not set a themeColor and allows you to add your own, custom value.

Fill Mode

The DropDownButton provides the fillMode configuration option that enables you to control the way in which color is applied to the rendered button. DropDownButtons also provide options for fill-mode customization.

fillMode provides the following available options:

• solid (default)—On a page, a solid drop-down button puts the strongest emphasis on the action it indicates and draws the attention of users to the single issue of primary importance.
• outline—Often used as secondary buttons, outline drop-down buttons have a medium emphasis, indicate complementary actions, and reduce the visual noise when the page displays many actions of equal importance.
• flat—Flat drop-down buttons place the lowest emphasis on the actions they indicate as they have neither a background, nor a border. Their main purpose is to avoid distracting users from the main content and, therefore, are often used in toolbars.
• none—Does not set a fillMode and allows you to add your own, custom value.

1. Solid (default)
2. Outline
3. Flat

Border Radius

The DropDownButton provides the rounded option that enables you to control the border radius of the rendered button. DropDownButtons also provide options for border-radius customization.

rounded provides the following available options:

• small—Renders a border radius of 2 px.
• medium (default)—Renders a border radius of 4 px.
• large—Renders a border radius of 6 px.
• full—Renders a border radius of 9999 px.
• none—Does not set a rounded value and allows you to customize the configuration.

1. Small
2. Medium (default)
3. Large
4. Full

Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

Kendo UI for Angular DropDownButtonFind more information about the Kendo UI for Angular DropDownButton in the official product documentation of the component.

Kendo UI for jQuery DropDownButtonFind more information about the Kendo UI for jQuery DropDownButton in the official product documentation of the component.

KendoReact DropDownButtonFind more information about the KendoReact DropDownButton in the official product documentation of the component.

Kendo UI for Vue DropDownButtonFind more information about the Kendo UI for Vue DropDownButton in the official product documentation of the component.

Telerik UI for ASP.NET Core DropDownButtonFind more information about the Telerik UI for ASP.NET Core DropDownButton component.

Telerik UI for ASP.NET MVC DropDownButtonFind more information about the Telerik UI for ASP.NET MVC DropDownButton component.