Our Blazor Split Button control consists of a primary button and a secondary button that displays a drop-down UI element (the secondary button can be toggled). The drop-down contains either a command list or custom content.

Split Button APIs include the following key members:

• Text — Specifies button text.
• CssClass — Specifies the name of the button's CSS class.
• RenderStyle — Specifies the button's render style.
• RenderStyleMode — Applies the desired render style to the button.
• DropDownTogglePosition — Specifies the secondary button's position.
• Enabled — Specifies whether the button is enabled.
• Tooltip — Specifies the button's tooltip text.
• Items — Specifies commands available in the drop-down menu.

The Split Button component supports different size modes. To specify component size within your DevExpress-powered Blazor project, use the SizeMode property.

The DevExpress Blazor Split Button component can display multi-level drop-down lists. Once you create a root-level menu, populate a command's Items property with DxDropDownButtonItem objects to create a nested menu.

Use the BeginGroup property to separate items into groups (at any nesting level).

The Split Button component can display icons for both the primary button and drop-down list items. Use IconCssClass and IconPosition properties to configure icon settings. You can also use the DropDownToggleCssClass property to define the drop-down toggle appearance.

The DevExpress Blazor Split Button component can display drop-down windows with custom content. Specify the DropDownContentTemplate property (for the component or an item) to customize the layout and appearance of the corresponding drop-down window.

In this demo, the button's drop-down window contains a DxListBox component. When a user changes selection, the event handler closes the drop-down window and displays selected item information within the primary button.

In this demo, the Color Palette component is integrated into our Blazor Split Button UI component.