Blazor SplitButton
The Blazor SplitButton pairs a primary action with a dropdown menu of additional options.
Filled SplitButton linkLink to this section
These are the default Radzen SplitButton.
Filled Shades
Filled Light and Dark
Light and Dark button styles don't have Shades
Flat SplitButton linkLink to this section
Use Variant="Variant.Flat" for flat split button variant.
Flat Shades
Flat Light and Dark
Light and Dark button styles don't have Shades
Outlined SplitButton linkLink to this section
Use Variant="Variant.Outlined" for outlined split button variant.
Outlined Shades
Outlined Light and Dark
Light and Dark button styles don't have Shades
Text SplitButton linkLink to this section
Use Variant="Variant.Text" for text split button variant.
Text Shades
Text Light and Dark
Light and Dark button styles don't have Shades
Content in SplitButton linkLink to this section
Text, icons and images can be added to a split button.
Icon only button
Icon and text button
Images
SplitButton Sizes linkLink to this section
Use the Size property to set split button size. Available sizes are ExtraSmall, Small, Medium (default), and Large.
Icon
Text
Icon and Text
Disabled SplitButton linkLink to this section
Use Disabled="true" to disable a split button.
Busy SplitButton linkLink to this section
Use IsBusy="true" to show the busy indicator.
AlwaysOpenPopup SplitButton linkLink to this section
Use AlwaysOpenPopup="true" to open popup with items on click.
DropDown icon of SplitButton linkLink to this section
Customize the dropdown icon of SplitButton. Use DropDownIcon parameter to set the icon.
Keyboard Navigation linkLink to this section
The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor SplitButton component.
| Press this key | To do this |
|---|---|
| Tab | Navigate to the main SplitButton action button or the menu toggle button. |
| Space or Enter on the action button | Trigger the main SplitButton action (or, when AlwaysOpenPopup is enabled, open the popup and focus the first item). |
| Space or Enter on the menu toggle button | Open the popup and focus the first item. |
| DownArrow on the menu toggle button | Open the popup and focus the first item. |
| UpArrow on the menu toggle button | Open the popup and focus the last item. |
| DownArrow or UpArrow in an opened popup | Focus next or previous SplitButton item. |
| Home or End in an opened popup | Focus first or last SplitButton item. |
| Space or Enter in an opened popup | Activate the focused SplitButton item and close the popup. |
| Escape | Close the SplitButton popup and return focus to the menu toggle button. |
| Alphanumeric in an opened popup | Focus next SplitButton item starting with typed key. |
Frequently asked questions
How is a SplitButton different from a regular button?
A SplitButton runs a primary action when its main area is clicked and opens a dropdown menu of secondary actions from its arrow, combining a button and a menu.
Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under
MIT