Blazor SplitButton Overview
The SplitButton for Blazor is a combination of a button and a dropdown. It provides a collection of related user actions in a compact interface. The SplitButton has one primary clickable action, which is always visible, and a list of secondary actions that are displayed in a dropdown when the user clicks on the arrow.
The SplitButton component is part of Telerik UI for Blazor, a
professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
SplitButton vs. DropDownButton
The DropDownButton and SplitButton components are similar. They both consist of a primary button and a dropdown element that holds additional action items. The major difference is the purpose of the primary button.
DropDownButton - The main purpose of the primary button is to open the popup with additional actions. The primary button does expose a separate
OnClickevent, so you can handle it to invoke a dedicated action but clicking on it always opens the dropdown.SplitButton - The main element contains a primary button and a separate button for opening the dropdown. The purpose of the primary button is to invoke a standalone action. Clicking on it does not open the dropdown. To open the popup with the additional actions, the user has to click the dedicated button with
caret-alt-downicon.
Creating Blazor SplitButton
- Add a
<TelerikSplitButton>tag. - Define the primary action in a child
<SplitButtonContent>tag. Its content can be plain text, HTML or even another component. - Set the
OnClickparameter of the<TelerikSplitButton>tag. This will be the event handler for the primary action. - Add a child
<SplitButtonItems>tag. Insert some<SplitButtonItem>tags inside it. - Each
<SplitButtonItem>tag should have some content and anOnClickhandler.
Basic SplitButton
<TelerikSplitButton OnClick="@OnReply">
<SplitButtonContent>Reply</SplitButtonContent>
<SplitButtonItems>
<SplitButtonItem OnClick="@OnReplyAll">Reply All</SplitButtonItem>
<SplitButtonItem OnClick="@OnForward">Forward</SplitButtonItem>
</SplitButtonItems>
</TelerikSplitButton>
Last action: <strong> @LastAction </strong>
@code {
string LastAction { get; set; }
void OnReply()
{
LastAction = "Reply";
}
void OnReplyAll()
{
LastAction = "Reply All";
}
void OnForward()
{
LastAction = "Forward";
}
}
Icons
The primary SplitButton action and each secondary item in the dropdown can display a font icon or an image for better looks and user experience.
Appearance
The SplitButton provides a variety of settings to control its visual appearance, for example the colors, borders, and size. This spares the need to use custom CSS code.
To learn more about the appearance, anatomy, and accessibility of the SplitButton, visit the Progress Design System documentation—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
Events
Each SplitButton action fires a separate OnClick event, so that the application can react to user behavior.
SplitButton Parameters
The following table lists the SplitButton parameters, except those related to built-in styling and icons. Also check the SplitButton API Reference for a full list of properties, methods and events.
| Parameter | Type and Default Value | Description |
|---|---|---|
AriaLabel |
string |
Sets the aria-label attribute of the primary action element, which is <button class="k-button">. |
Class |
string |
Renders a custom CSS class to the main component element, which is <div class="k-split-button">. Use it to override the theme styles to obtain a specific appearance, if none of the SplitButton appearance settings can achieve this. |
Enabled |
bool( true) |
Enables or disables the component. |
Id |
string |
Sets the id attribute of the primary action element (<button>). |
TabIndex |
int |
Sets the tabindex attribute of the primary action element. |
Title |
string |
Sets the title attribute of the primary action element. |
Popup Settings
The SplitButton exposes configuration settings for its dropdown (popup). The parameters should be set in a <SplitButtonPopupSettings> tag, which should be placed inside a <SplitButtonSettings> tag like this:
<TelerikSplitButton>
<SplitButtonSettings>
<SplitButtonPopupSettings Height="150px" />
</SplitButtonSettings>
</TelerikSplitButton>
| Parameter | Type and Default Value | Description |
|---|---|---|
AnimationDuration |
int ( 300) |
Sets the dropdown animation duration in milliseconds. |
Class |
string |
Renders a custom CSS class to the dropdown container, which is <div class="k-animation-container">. |
Height |
string ( "auto") |
The dropdown height. If the items cannot fit, a vertical scrollbar will appear. If not set, the dropdown will expand, based on the number of items. |
MaxHeight |
string |
The maximum dropdown height, if an explicit height is not set. |
MinHeight |
string |
The minimum dropdown height, if an explicit height is not set. |
Width |
string |
The dropdown width. If not set, the dropdown will expand, based on the length of its items. |
MaxWidth |
string |
The maximum dropdown width, if an explicit width is not set. If there is a longer item, a horizontal scrollbar will show. |
MinWidth |
string |
The minimum dropdown width, if an explicit width is not set. |
As in standard CSS, the min and max settings take precedence over width and height.
Item Settings
The following table lists the SplitButtonItem parameters, except those related to icons.
| Parameter | Type and Default Value | Description |
|---|---|---|
Class |
string |
Renders a custom CSS class to the dropdown item's element, which is <li class="k-item k-menu-item">. |
Enabled |
bool( true) |
Enables or disables the item. |
SplitButton Reference and Methods
The SplitButton exposes a FocusAsync method to focus it programmatically. To use it, define a reference to the component instance with the @ref attribute. Be aware of the Blazor life cycle if you want to focus the component on page load.
Get a reference to the SplitButton and execute methods
<TelerikSplitButton @ref="@SplitButtonRef" OnClick="@OnReply">
<SplitButtonContent>Reply</SplitButtonContent>
<SplitButtonItems>
<SplitButtonItem OnClick="@OnReplyAll">Reply All</SplitButtonItem>
</SplitButtonItems>
</TelerikSplitButton>
<TelerikButton OnClick="@FocusSplitButton">Focus SplitButton</TelerikButton>
Last action clicked: <strong> @LastActionClicked </strong>
@code {
TelerikSplitButton SplitButtonRef { get; set; }
string LastActionClicked { get; set; }
async Task FocusSplitButton()
{
await SplitButtonRef.FocusAsync();
}
void OnReply()
{
LastActionClicked = "Reply";
}
void OnReplyAll()
{
LastActionClicked = "Reply All";
}
}