SplitButton
Demonstration and configuration of the Radzen Blazor SplitButton component.
These demos showcase a split button combining a primary action button with a dropdown menu, featuring multiple variants (filled/flat/outlined/text), content options (text/icons/images), different sizes (ExtraSmall/Small/Medium/Large), disabled and busy states, AlwaysOpenPopup mode, and customizable dropdown icons.
Filled SplitButton link
These are the default Radzen SplitButton.
Filled Shades
Filled Light and Dark
Light and Dark button styles don't have Shades
Flat SplitButton link
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 link
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 link
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 link
Text, icons and images can be added to a split button.
Icon only button
Icon and text button
Images
SplitButton Sizes link
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 link
Use Disabled="true" to disable a split button.
Busy SplitButton link
Use IsBusy="true" to show the busy indicator.
AlwaysOpenPopup SplitButton link
Use AlwaysOpenPopup="true" to open popup with items on click.
DropDown icon of SplitButton link
Customize the dropdown icon of SplitButton. Use DropDownIcon parameter to set the icon.
Keyboard Navigation link
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 SplitButton. |
| Alt + DownArrow | Open/Close SplitButton popup. |
| DownArrow on closed popup | Select next SplitButton item. |
| UpArrow on closed popup | Select previous SplitButton item. |
| Space or Enter on opened popup | Selects the focused SplitButton item and closes the popup. |
| Escape | Closes the SplitButton popup. |
| Space or Enter | Clicks SplitButton. |
Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under
MIT