Skip to main content

segmented_button

Function segmented_button 

Source
pub fn segmented_button() -> SegmentedButtonBuilder
Expand description

§segmented_button

Render a segmented button item with optional icon and label.

§Usage

Use inside segmented button rows to represent selectable options. Prefer connected crate::button_groups::button_groups for Expressive interfaces.

§Parameters

  • selected — whether the segment is selected.
  • enabled — whether the segment is enabled.
  • label — label shown inside the segment.
  • icon — optional icon displayed before the label.
  • selected_icon — optional replacement for the selected checkmark.
  • show_selected_icon — whether selection replaces the leading icon with a checkmark; defaults to true.
  • modifier — layout and behavior modifiers applied to the segment.
  • shape — shape of the segment.
  • colors — optional color overrides for the segment.
  • border_width — border width around the segment.
  • min_height — minimum visual height; defaults to 40dp while retaining the minimum interactive target.
  • content_padding — internal padding for the segment content.
  • on_click — optional click callback.
  • accessibility_label — optional accessibility label.
  • accessibility_description — optional accessibility description.

§Examples

use tessera_components::segmented_buttons::{
    SegmentedButtonDefaults, segmented_button, single_choice_segmented_button_row,
};
use tessera_components::theme::{MaterialTheme, material_theme};
use tessera_ui::{remember, tessera};

#[tessera]
fn demo() {
    material_theme()
        .theme(|| MaterialTheme::default())
        .child(|| {
            let selected = remember(|| 0usize);
            single_choice_segmented_button_row().content(move |mode| {
                segmented_button().selection_mode(mode)
                    .label("List")
                    .selected(selected.get() == 0)
                    .shape(SegmentedButtonDefaults::item_shape(
                        0,
                        2,
                        SegmentedButtonDefaults::shape(),
                    ))
                    .on_click(|| {});
                segmented_button().selection_mode(mode)
                    .label("Grid")
                    .selected(selected.get() == 1)
                    .shape(SegmentedButtonDefaults::item_shape(
                        1,
                        2,
                        SegmentedButtonDefaults::shape(),
                    ))
                    .on_click(|| {});
            });
        });
}