SegmentedButton

ic.SegmentedButton is a group of connected toggle segments where one or more options can be selected at a time. It works well for switching between views, toggling formatting options, or choosing from a small fixed set of values. Each segment can optionally carry an ic.Icon, and you can hide the text labels entirely to create a compact icon-only toolbar.

Variants

Variant controls the fill color of selected segments. Use primary for the default emphasis, secondary when the control should blend into the layout with less visual weight, and destructive when the selection has irreversible consequences. Unselected segments look the same across all variants.

Sizes

Size scales the padding and font of all segments proportionally. Pick the size that fits the surrounding text and spacing in your layout.

Icons

You can attach an ic.Icon to any segment using the setIcon method. The IconPosition property controls whether icons appear to the left or right of the label text. Setting ShowLabels to false hides all text labels, which is useful for compact toolbars where the icons are self-explanatory.

Multiselect

When Multiselect is true, clicking a segment toggles it independently, so multiple segments can be active at the same time. This is the right mode for things like text formatting toolbars where bold, italic, and underline can all be active together.

Events

SegmentedButton fires a ValueChanged event each time the user selects or deselects a segment. The payload carries the current value, which is a scalar string in single-select mode or an array in multiselect mode. In MATLAB, attach a listener with addlistener and read the value from evt.Data.value.

Custom styling

Every component exposes a .css property that lets you inject instance-level CSS directly from MATLAB. Here is a pill toggle as an example. The selectors target .ic-seg-btn for the container track, .ic-seg-btn__item for all segments, and .ic-seg-btn__item--selected for the active one.

sb = ic.SegmentedButton("Items", ["On", "Off"], "Size", "lg");

sb.css.style(".ic-seg-btn", ...
    "background_color", "#f1f5f9", ...
    "border_radius", "999px", ...
    "padding", "3px", ...
    "box_shadow", "inset 0 1px 2px rgba(0,0,0,0.06)");

sb.css.style(".ic-seg-btn__item", ...
    "border_radius", "999px", ...
    "color", "#64748b", ...
    "transition", "all 0.25s ease");

sb.css.style(".ic-seg-btn__item--selected", ...
    "background_color", "#fff", ...
    "color", "#2563eb", ...
    "box_shadow", "0 1px 3px rgba(37,99,235,0.3), 0 1px 2px rgba(0,0,0,0.06)");