---
title: Overview
position: 1
seo_title: Overview of the DropDownButton Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
DropDownButton component and its types, check out the extensive set of
available options in its live demo, and master its appearance by setting the
color, size, fill mode, and border radius as you wish on the fly.
---
## 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.
The next image shows the anatomy of an Icon drop-down button and includes the following elements:
#### 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.
#### 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.
#### 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.
### Framework-Specific Documentation
For specific information about the component, refer to its official product documentation:
