Split button
SplitButtonControlA default action, with its alternatives behind the caret.
Overview
SplitButtonControl renders two native buttons side by side. The main half fires OnClick;
the caret half opens a menu built from Items, followed by any markup in MenuContent.
A click-away backdrop closes the menu; no JavaScript. Use it when one action is the default and the others are
variants of it. When there is no default action, use ButtonControl's dropdown mode.
Examples
#Default action with alternatives
Text and IconCss label the main half. A disabled item renders but does not fire. Disabled greys out both halves.
Example
Razor
C#
Documentation
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
Text | string? | null | Label of the main half. Wins over ChildContent when set. |
IconCss | string? | null | Leading icon on the main half. |
ChildContent | RenderFragment? | — | Main-half markup, used when Text is not set. |
Items | IList<SplitButtonItem>? | null | Menu entries, in order. |
MenuContent | RenderFragment? | null | Extra markup rendered after the items inside the menu. |
Disabled | bool | false | Disables both halves; the host fades and ignores pointer events. |
OnClick | EventCallback | — | Main half clicked. No arguments. |
OnItemClick | EventCallback<SplitButtonItem> | — | Menu entry picked. The menu closes first. |
CssClass / Style | string? | null | Appended to, and inline style on, the host element. |
(unmatched attributes) | Dictionary<string,object> | — | Forwarded to the host <div>, not to the buttons. |
SplitButtonItem
| Property | Type | Default | Description |
|---|---|---|---|
Text | string | "" | Entry label. |
IconCss | string? | null | Leading icon. |
Value | object? | null | Any payload; read it in OnItemClick instead of matching on Text. |
Disabled | bool | false | Rendered greyed; clicks ignored. |
ctor | | — | new(text, iconCss, value, disabled), all but text optional. |
Colors are fixed in the control's stylesheet; it reads no --fx-* variables. Restyle by overriding these classes.
CSS classes
| Class | Effect |
|---|---|
fx-split-button-host | Inline-flex wrapper; the menu is positioned against it. Gets fx-split-button-disabled when disabled. |
fx-split-button-main · fx-split-button-toggle | The two halves. Blue fill, shared border, rounded outer corners. |
fx-split-button-dropdown | The menu: white panel under the control, right-aligned, 150px minimum. |
fx-split-button-item | One entry; .disabled halves its opacity. |
fx-split-button-backdrop | Full-screen transparent layer that closes the menu on click. |
Keyboard and accessibility
- Both halves are native
<button>s: Tab reaches each, Space and Enter activate. - The caret half sets
aria-haspopupandaria-expanded. - Menu entries are native buttons: Tab moves through them, Enter or Space picks. There is no arrow-key or Escape handling; a pick or click-away closes the menu.
Disabledsets the nativedisabledattribute on both halves and ignores pointer events on the host.