SplitButton

SplitButton Overview

A SplitButton is a user interface (UI) element which combines the functionality of a button with that of a drop-down element. The control allows the user to either click the button and execute a default action, or to open the drop-down list and choose from a predefined list of available actions.

Usually, SplitButtons are used within a Toolbar component along with multiple Buttons or ButtonGroups, and aim to save space and reduce the cognitive load by grouping similar commands or actions together.

SplitButtons provide consistent styling. They can render arbitrary content such as text and icons, or a combination of these. Depending on the requirements of the website or application, developers can either initialize a single SplitButton or create multiple Buttons at once.

Live Demo

Appearance

SplitButtons provide built-in styling options that grant visually appealing and flexible rendering experience. To a great extent, the appearance of any type of buttons on the page implies the logical flow of the page itself. For example, primary buttons have to be as visible as possible so, typically, they use solid colors.

Apart from the default vision of the Telerik and Kendo UI SplitButton, 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 SplitButton can acquire and can be rendered in the following states:

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

Anatomy

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

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

• Icon—Icon split buttons display icons instead of text, and are useful for visual enhancement. Telerik and Kendo UI SplitButtons seamlessly accept 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 split buttons render a chunk of text which directly identifies the action that will be triggered upon user interaction.
• Icon-and-text—Icon-and-text split buttons display icons next to a chunk of text, and also come in handy when you want to visually enhance the SplitButton and its message.

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

The next image shows the anatomy of an Icon SplitButton and includes the following elements:

1. Button
2. Icon button
3. List item
4. Drop-down list

Size

The SplitButton provides the size configuration option that enables you to control how big or small the rendered SplitButton will be. SplitButtons also provide options for size customization. By default, the SplitButtons are medium-sized.

size provides the following available options:

• small—Renders small split buttons, which are suitable for compact components, such as the Pager and Toolbar, where the available space is limited.
• medium (default)—Renders medium split buttons.
• large—Renders large split 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 SplitButton provides the theme-color configuration option that enables you to choose among the available, built-in colors that will be applied to it. SplitButtons also provide options for color customization.

themeColor provides the following available options:

• base (default)
• primary—Primary split 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 split buttons must be used just once on a page.
• secondary—Secondary split buttons indicate actions of secondary importance. They are used usually in conjunction with a primary split button, but can also be used independently in the context of button groups, for example.
• tertiary—Tertiary split buttons are used less frequently than primary and secondary split buttons. They indicate independent, less pronounced, common actions throughout a page, for example, sub-tasks on a page with a primary button.
• info—Info split buttons are most suitably used for notification alerts, conveying to users that new information is available.
• success—Success split buttons imply successful or positive actions.
• warning—Warning split buttons typically appear in confirmation dialogs to indicate actions causing significant changes, which must be regarded with caution.
• error—Error split 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.
• dark—Dark split buttons are in the dark color of the theme.
• light—Light split buttons are in the light color of the theme.
• inverse—Inverse split buttons are in the inverse color of the theme. Depending on whether the theme luminance is dark or light, the inverse button will be light or dark respectively.
• none—Does not set a themeColor and allows you to add your own, custom value.

Fill Mode

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

fillMode provides the following available options:

• solid (default)—On a page, a solid split 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 split buttons have a medium emphasis.
• flat—Flat split 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.
• link—Link split buttons are navigational elements and redirect to internal or external resources.
• none—Does not set a fillMode and allows you to add your own, custom value.

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

Border Radius

The SplitButton provides the rounded option that enables you to control how much border radius will apply to the rendered button. SplitButtons 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 and allows you to add your own, custom value.

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 SplitButtonFind more information about the Kendo UI for Angular SplitButton in the official product documentation of the component.

Telerik UI for Blazor SplitButtonFind more information about the Telerik UI for Blazor SplitButton in the official product documentation of the component.

Kendo UI for jQuery SplitButtonFind more information about the Kendo UI for jQuery SplitButton in the official product documentation of the component.

KendoReact SplitButtonFind more information about the KendoReact SplitButton in the official product documentation of the component.

Kendo UI for Vue SplitButtonFind more information about the Kendo UI for Vue SplitButton in the official product documentation of the component.

Telerik UI for ASP.NET Core SplitButtonFind more information about the Telerik UI for ASP.NET Core SplitButton component.

Telerik UI for ASP.NET MVC SplitButtonFind more information about the Telerik UI for ASP.NET MVC SplitButton component.