SplitButton

ic.SplitButton is a two-part control that combines a main action button with a dropdown chevron for secondary actions. Clicking the main area fires the first item immediately, while the chevron opens a popup listing all items with optional icons and descriptions. This is useful when you have one obvious default action but still need to expose related alternatives without cluttering the layout with multiple buttons.

Variants and fill styles

Variant and Fill control the visual weight and color of the button, the same way they work on ic.Button. Use primary for the most important action, secondary when the split button sits in a busy layout, and destructive when the actions are dangerous or irreversible. The fill controls emphasis: solid for full color, outline for a bordered look, and ghost when you want the button to stay low-profile until hovered.

Size and split direction

Size scales the button and its text proportionally. SplitDirection controls how the main button and chevron are laid out: right places the chevron to the right of the label (the default horizontal split), while bottom stacks the chevron below the main button for a vertical arrangement.

Icons and descriptions

Each dropdown item can have its own icon (an ic.Icon or ic.Image child targeted to the item label) and a description line shown below the label. The main button can also display an icon through the MainIcon property. Together these make the dropdown easier to scan when it holds several related actions.

Events

SplitButton fires an ItemSelected event when the user clicks either the main button or any item in the dropdown. The payload includes the 1-based index and the label of the selected item. It also fires Opened and Closed when the dropdown toggles. In MATLAB, attach listeners with addlistener and read the payload from evt.Data.

Custom styling

Every component exposes a .css property that lets you inject instance-level CSS directly from MATLAB. This example creates a gradient button with a popup using a soft shadow and tinted hover rows. The selectors target .ic-split-btn__body for the button itself, .ic-split-btn__trigger for the chevron zone, and .ic-split-btn__popup / .ic-split-btn__item for the dropdown.

btn = ic.SplitButton("Items", ["Download PDF", "Export CSV", "Share Link"]);
btn.MainIcon = ic.Icon("Source", "download");

% Sky-to-indigo gradient on the button body
btn.css.style(".ic-split-btn__body", ...
    "background", "linear-gradient(90deg, #38bdf8, #6366f1)", ...
    "border_color", "transparent", ...
    "border_radius", "10px", ...
    "color", "#fff", ...
    "box_shadow", "0 4px 14px rgba(99,102,241,0.35)");

% Subtle white line separating the chevron
btn.css.style(".ic-split-btn__trigger", ...
    "border_left", "1px solid rgba(255,255,255,0.35)");

% Brighter glow on hover
btn.css.style(".ic-split-btn__body:hover", ...
    "box_shadow", "0 6px 20px rgba(99,102,241,0.45)");

% White popup with soft shadow and blue hover rows
btn.css.style(".ic-split-btn__popup", ...
    "background_color", "#fff", ...
    "border_color", "#e0e7ff", ...
    "border_radius", "8px", ...
    "box_shadow", "0 4px 16px rgba(99,102,241,0.12)");
btn.css.style(".ic-split-btn__item", ...
    "color", "#334155");
btn.css.style(".ic-split-btn__item:hover", ...
    "background_color", "#eef2ff");