SegmentedButton

SegmentedButton presents a fixed set of mutually exclusive choices.

Declare segments

SegmentedButton(
    {
        SegmentedButtonItem("Day"),
        SegmentedButtonItem(app::images::calendar, "Week"),
        SegmentedButtonItem::IconOnly(app::images::grid, "Month"),
    },
    period
).OnChanged([period](std::size_t index) {
  period = index;
})

Simple overloads accept an initializer list or vector of StringVariant labels. Rich overloads accept SegmentedButtonItem values with ImageResource, ImageAsset, or VectorAsset icons. IconOnly requires a semantic label even though that label is not drawn.

Control selection

The selected index is controlled. Passing State<std::size_t> reads its current value; the caller handles OnChanged and supplies the next value. The index must identify an item.

Theme and semantics

SegmentedButtonStyle owns fills, labels, borders, padding, icon geometry, minimum segment size, radius, and normal and selected indications. The component exposes a grouped selection model and selected item semantics.

API

• Constructors: label lists or std::vector<SegmentedButtonItem>, followed by an index or State<std::size_t>.
• Item factories: label, icon plus label, or SegmentedButtonItem::IconOnly.
• Event: .OnChanged(function) with the requested index.
• Theme style: SegmentedButtonStyle.

Use Tabs when selection changes visible page content and participates in tab semantics.

Choose a value model

This is single-index selection, not a set of independently checked chips. Keep the item order stable while the user interacts, and translate the requested index into a domain enum in application code if necessary. Reordering the items does not automatically remap the controlled index. Read enum-backed State into the enum before comparing it; index-backed State can be passed directly.

The constructor consumes item declarations by value. Labels use StringVariant, icons use ImageVariant, and there is no arbitrary child factory for a segment. Use Select for custom row content or Chip for independent selected values.

SegmentedButtonStyle fields

Fields	Use
background, selected_background	Normal and selected segment fills.
label_style, selected_label	Typography and selected foreground.
border, selected_border	Normal and selected outlines.
padding, minimum_segment_width, minimum_height	Content padding and minimum segment geometry.
icon_size, icon_spacing	Optional icon dimensions and label gap.
corner_radii	The segmented surface’s outer corners.
indication, selected_indication	Interaction visuals for each selection state.

Material supplies a 40-DIP minimum height; the Flat baseline is more compact. Theme changes affect appearance, not the requirement to handle OnChanged.