1use gpui::{AnyView, ClickEvent};
2
3use crate::{ButtonLike, ButtonLikeRounding, ElevationIndex, TintColor, prelude::*};
4
5/// The position of a [`ToggleButton`] within a group of buttons.
6#[derive(Debug, PartialEq, Eq, Clone, Copy)]
7pub enum ToggleButtonPosition {
8 /// The toggle button is first in the group.
9 First,
10
11 /// The toggle button is in the middle of the group (i.e., it is not the first or last toggle button).
12 Middle,
13
14 /// The toggle button is last in the group.
15 Last,
16}
17
18#[derive(IntoElement, RegisterComponent)]
19pub struct ToggleButton {
20 base: ButtonLike,
21 position_in_group: Option<ToggleButtonPosition>,
22 label: SharedString,
23 label_color: Option<Color>,
24}
25
26impl ToggleButton {
27 pub fn new(id: impl Into<ElementId>, label: impl Into<SharedString>) -> Self {
28 Self {
29 base: ButtonLike::new(id),
30 position_in_group: None,
31 label: label.into(),
32 label_color: None,
33 }
34 }
35
36 pub fn color(mut self, label_color: impl Into<Option<Color>>) -> Self {
37 self.label_color = label_color.into();
38 self
39 }
40
41 pub fn position_in_group(mut self, position: ToggleButtonPosition) -> Self {
42 self.position_in_group = Some(position);
43 self
44 }
45
46 pub fn first(self) -> Self {
47 self.position_in_group(ToggleButtonPosition::First)
48 }
49
50 pub fn middle(self) -> Self {
51 self.position_in_group(ToggleButtonPosition::Middle)
52 }
53
54 pub fn last(self) -> Self {
55 self.position_in_group(ToggleButtonPosition::Last)
56 }
57}
58
59impl Toggleable for ToggleButton {
60 fn toggle_state(mut self, selected: bool) -> Self {
61 self.base = self.base.toggle_state(selected);
62 self
63 }
64}
65
66impl SelectableButton for ToggleButton {
67 fn selected_style(mut self, style: ButtonStyle) -> Self {
68 self.base.selected_style = Some(style);
69 self
70 }
71}
72
73impl FixedWidth for ToggleButton {
74 fn width(mut self, width: DefiniteLength) -> Self {
75 self.base.width = Some(width);
76 self
77 }
78
79 fn full_width(mut self) -> Self {
80 self.base.width = Some(relative(1.));
81 self
82 }
83}
84
85impl Disableable for ToggleButton {
86 fn disabled(mut self, disabled: bool) -> Self {
87 self.base = self.base.disabled(disabled);
88 self
89 }
90}
91
92impl Clickable for ToggleButton {
93 fn on_click(mut self, handler: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static) -> Self {
94 self.base = self.base.on_click(handler);
95 self
96 }
97
98 fn cursor_style(mut self, cursor_style: gpui::CursorStyle) -> Self {
99 self.base = self.base.cursor_style(cursor_style);
100 self
101 }
102}
103
104impl ButtonCommon for ToggleButton {
105 fn id(&self) -> &ElementId {
106 self.base.id()
107 }
108
109 fn style(mut self, style: ButtonStyle) -> Self {
110 self.base = self.base.style(style);
111 self
112 }
113
114 fn size(mut self, size: ButtonSize) -> Self {
115 self.base = self.base.size(size);
116 self
117 }
118
119 fn tooltip(mut self, tooltip: impl Fn(&mut Window, &mut App) -> AnyView + 'static) -> Self {
120 self.base = self.base.tooltip(tooltip);
121 self
122 }
123
124 fn layer(mut self, elevation: ElevationIndex) -> Self {
125 self.base = self.base.layer(elevation);
126 self
127 }
128}
129
130impl RenderOnce for ToggleButton {
131 fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
132 let is_disabled = self.base.disabled;
133 let is_selected = self.base.selected;
134
135 let label_color = if is_disabled {
136 Color::Disabled
137 } else if is_selected {
138 Color::Selected
139 } else {
140 self.label_color.unwrap_or_default()
141 };
142
143 self.base
144 .when_some(self.position_in_group, |this, position| match position {
145 ToggleButtonPosition::First => this.rounding(ButtonLikeRounding::Left),
146 ToggleButtonPosition::Middle => this.rounding(None),
147 ToggleButtonPosition::Last => this.rounding(ButtonLikeRounding::Right),
148 })
149 .child(
150 Label::new(self.label)
151 .color(label_color)
152 .line_height_style(LineHeightStyle::UiLabel),
153 )
154 }
155}
156
157impl Component for ToggleButton {
158 fn scope() -> ComponentScope {
159 ComponentScope::Input
160 }
161
162 fn sort_name() -> &'static str {
163 "ButtonC"
164 }
165
166 fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
167 Some(
168 v_flex()
169 .gap_6()
170 .children(vec![
171 example_group_with_title(
172 "Button Styles",
173 vec![
174 single_example(
175 "Off",
176 ToggleButton::new("off", "Off")
177 .layer(ElevationIndex::Background)
178 .style(ButtonStyle::Filled)
179 .into_any_element(),
180 ),
181 single_example(
182 "On",
183 ToggleButton::new("on", "On")
184 .layer(ElevationIndex::Background)
185 .toggle_state(true)
186 .style(ButtonStyle::Filled)
187 .into_any_element(),
188 ),
189 single_example(
190 "Off – Disabled",
191 ToggleButton::new("disabled_off", "Disabled Off")
192 .layer(ElevationIndex::Background)
193 .disabled(true)
194 .style(ButtonStyle::Filled)
195 .into_any_element(),
196 ),
197 single_example(
198 "On – Disabled",
199 ToggleButton::new("disabled_on", "Disabled On")
200 .layer(ElevationIndex::Background)
201 .disabled(true)
202 .toggle_state(true)
203 .style(ButtonStyle::Filled)
204 .into_any_element(),
205 ),
206 ],
207 ),
208 example_group_with_title(
209 "Button Group",
210 vec![
211 single_example(
212 "Three Buttons",
213 h_flex()
214 .child(
215 ToggleButton::new("three_btn_first", "First")
216 .layer(ElevationIndex::Background)
217 .style(ButtonStyle::Filled)
218 .first()
219 .into_any_element(),
220 )
221 .child(
222 ToggleButton::new("three_btn_middle", "Middle")
223 .layer(ElevationIndex::Background)
224 .style(ButtonStyle::Filled)
225 .middle()
226 .toggle_state(true)
227 .into_any_element(),
228 )
229 .child(
230 ToggleButton::new("three_btn_last", "Last")
231 .layer(ElevationIndex::Background)
232 .style(ButtonStyle::Filled)
233 .last()
234 .into_any_element(),
235 )
236 .into_any_element(),
237 ),
238 single_example(
239 "Two Buttons",
240 h_flex()
241 .child(
242 ToggleButton::new("two_btn_first", "First")
243 .layer(ElevationIndex::Background)
244 .style(ButtonStyle::Filled)
245 .first()
246 .into_any_element(),
247 )
248 .child(
249 ToggleButton::new("two_btn_last", "Last")
250 .layer(ElevationIndex::Background)
251 .style(ButtonStyle::Filled)
252 .last()
253 .into_any_element(),
254 )
255 .into_any_element(),
256 ),
257 ],
258 ),
259 example_group_with_title(
260 "Alternate Sizes",
261 vec![
262 single_example(
263 "None",
264 ToggleButton::new("none", "None")
265 .layer(ElevationIndex::Background)
266 .style(ButtonStyle::Filled)
267 .size(ButtonSize::None)
268 .into_any_element(),
269 ),
270 single_example(
271 "Compact",
272 ToggleButton::new("compact", "Compact")
273 .layer(ElevationIndex::Background)
274 .style(ButtonStyle::Filled)
275 .size(ButtonSize::Compact)
276 .into_any_element(),
277 ),
278 single_example(
279 "Large",
280 ToggleButton::new("large", "Large")
281 .layer(ElevationIndex::Background)
282 .style(ButtonStyle::Filled)
283 .size(ButtonSize::Large)
284 .into_any_element(),
285 ),
286 ],
287 ),
288 ])
289 .into_any_element(),
290 )
291 }
292}
293
294pub struct ButtonConfiguration {
295 label: SharedString,
296 icon: Option<IconName>,
297 on_click: Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>,
298}
299
300mod private {
301 pub trait ToggleButtonStyle {}
302}
303
304pub trait ButtonBuilder: 'static + private::ToggleButtonStyle {
305 fn into_configuration(self) -> ButtonConfiguration;
306}
307
308pub struct ToggleButtonSimple {
309 label: SharedString,
310 on_click: Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>,
311}
312
313impl ToggleButtonSimple {
314 pub fn new(
315 label: impl Into<SharedString>,
316 on_click: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
317 ) -> Self {
318 Self {
319 label: label.into(),
320 on_click: Box::new(on_click),
321 }
322 }
323}
324
325impl private::ToggleButtonStyle for ToggleButtonSimple {}
326
327impl ButtonBuilder for ToggleButtonSimple {
328 fn into_configuration(self) -> ButtonConfiguration {
329 ButtonConfiguration {
330 label: self.label,
331 icon: None,
332 on_click: self.on_click,
333 }
334 }
335}
336
337pub struct ToggleButtonWithIcon {
338 label: SharedString,
339 icon: IconName,
340 on_click: Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>,
341}
342
343impl ToggleButtonWithIcon {
344 pub fn new(
345 label: impl Into<SharedString>,
346 icon: IconName,
347 on_click: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
348 ) -> Self {
349 Self {
350 label: label.into(),
351 icon,
352 on_click: Box::new(on_click),
353 }
354 }
355}
356
357impl private::ToggleButtonStyle for ToggleButtonWithIcon {}
358
359impl ButtonBuilder for ToggleButtonWithIcon {
360 fn into_configuration(self) -> ButtonConfiguration {
361 ButtonConfiguration {
362 label: self.label,
363 icon: Some(self.icon),
364 on_click: self.on_click,
365 }
366 }
367}
368
369#[derive(Clone, Copy, PartialEq)]
370pub enum ToggleButtonGroupStyle {
371 Transparent,
372 Filled,
373 Outlined,
374}
375
376#[derive(IntoElement)]
377pub struct ToggleButtonGroup<T, const COLS: usize = 3, const ROWS: usize = 1>
378where
379 T: ButtonBuilder,
380{
381 group_name: &'static str,
382 rows: [[T; COLS]; ROWS],
383 style: ToggleButtonGroupStyle,
384 button_width: Rems,
385 selected_index: usize,
386}
387
388impl<T: ButtonBuilder, const COLS: usize> ToggleButtonGroup<T, COLS> {
389 pub fn single_row(group_name: &'static str, buttons: [T; COLS]) -> Self {
390 Self {
391 group_name,
392 rows: [buttons],
393 style: ToggleButtonGroupStyle::Transparent,
394 button_width: rems_from_px(100.),
395 selected_index: 0,
396 }
397 }
398}
399
400impl<T: ButtonBuilder, const COLS: usize> ToggleButtonGroup<T, COLS, 2> {
401 pub fn two_rows(group_name: &'static str, first_row: [T; COLS], second_row: [T; COLS]) -> Self {
402 Self {
403 group_name,
404 rows: [first_row, second_row],
405 style: ToggleButtonGroupStyle::Transparent,
406 button_width: rems_from_px(100.),
407 selected_index: 0,
408 }
409 }
410}
411
412impl<T: ButtonBuilder, const COLS: usize, const ROWS: usize> ToggleButtonGroup<T, COLS, ROWS> {
413 pub fn style(mut self, style: ToggleButtonGroupStyle) -> Self {
414 self.style = style;
415 self
416 }
417
418 pub fn button_width(mut self, button_width: Rems) -> Self {
419 self.button_width = button_width;
420 self
421 }
422
423 pub fn selected_index(mut self, index: usize) -> Self {
424 self.selected_index = index;
425 self
426 }
427}
428
429impl<T: ButtonBuilder, const COLS: usize, const ROWS: usize> RenderOnce
430 for ToggleButtonGroup<T, COLS, ROWS>
431{
432 fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
433 let entries = self.rows.into_iter().enumerate().map(|(row_index, row)| {
434 row.into_iter().enumerate().map(move |(col_index, button)| {
435 let ButtonConfiguration {
436 label,
437 icon,
438 on_click,
439 } = button.into_configuration();
440
441 let entry_index = row_index * COLS + col_index;
442
443 ButtonLike::new((self.group_name, entry_index))
444 .when(entry_index == self.selected_index, |this| {
445 this.toggle_state(true)
446 .selected_style(ButtonStyle::Tinted(TintColor::Accent))
447 })
448 .rounding(None)
449 .when(self.style == ToggleButtonGroupStyle::Filled, |button| {
450 button.style(ButtonStyle::Filled)
451 })
452 .child(
453 h_flex()
454 .min_w(self.button_width)
455 .gap_1p5()
456 .px_3()
457 .py_1()
458 .justify_center()
459 .when_some(icon, |this, icon| {
460 this.child(Icon::new(icon).size(IconSize::XSmall).map(|this| {
461 if entry_index == self.selected_index {
462 this.color(Color::Accent)
463 } else {
464 this.color(Color::Muted)
465 }
466 }))
467 })
468 .child(
469 Label::new(label)
470 .size(LabelSize::Small)
471 .when(entry_index == self.selected_index, |this| {
472 this.color(Color::Accent)
473 }),
474 ),
475 )
476 .on_click(on_click)
477 .into_any_element()
478 })
479 });
480
481 let border_color = cx.theme().colors().border.opacity(0.6);
482 let is_outlined_or_filled = self.style == ToggleButtonGroupStyle::Outlined
483 || self.style == ToggleButtonGroupStyle::Filled;
484 let is_transparent = self.style == ToggleButtonGroupStyle::Transparent;
485
486 v_flex()
487 .rounded_md()
488 .overflow_hidden()
489 .map(|this| {
490 if is_transparent {
491 this.gap_px()
492 } else {
493 this.border_1().border_color(border_color)
494 }
495 })
496 .children(entries.enumerate().map(|(row_index, row)| {
497 let last_row = row_index == ROWS - 1;
498 h_flex()
499 .when(!is_outlined_or_filled, |this| this.gap_px())
500 .when(is_outlined_or_filled && !last_row, |this| {
501 this.border_b_1().border_color(border_color)
502 })
503 .children(row.enumerate().map(|(item_index, item)| {
504 let last_item = item_index == COLS - 1;
505 div()
506 .when(is_outlined_or_filled && !last_item, |this| {
507 this.border_r_1().border_color(border_color)
508 })
509 .child(item)
510 }))
511 }))
512 }
513}
514
515fn register_toggle_button_group() {
516 component::register_component::<ToggleButtonGroup<ToggleButtonSimple>>();
517}
518
519component::__private::inventory::submit! {
520 component::ComponentFn::new(register_toggle_button_group)
521}
522
523impl<T: ButtonBuilder, const COLS: usize, const ROWS: usize> Component
524 for ToggleButtonGroup<T, COLS, ROWS>
525{
526 fn name() -> &'static str {
527 "ToggleButtonGroup"
528 }
529
530 fn scope() -> ComponentScope {
531 ComponentScope::Input
532 }
533
534 fn sort_name() -> &'static str {
535 "ButtonG"
536 }
537
538 fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
539 Some(
540 v_flex()
541 .gap_6()
542 .children(vec![example_group_with_title(
543 "Transparent Variant",
544 vec![
545 single_example(
546 "Single Row Group",
547 ToggleButtonGroup::single_row(
548 "single_row_test",
549 [
550 ToggleButtonSimple::new("First", |_, _, _| {}),
551 ToggleButtonSimple::new("Second", |_, _, _| {}),
552 ToggleButtonSimple::new("Third", |_, _, _| {}),
553 ],
554 )
555 .selected_index(1)
556 .button_width(rems_from_px(100.))
557 .into_any_element(),
558 ),
559 single_example(
560 "Single Row Group with icons",
561 ToggleButtonGroup::single_row(
562 "single_row_test_icon",
563 [
564 ToggleButtonWithIcon::new(
565 "First",
566 IconName::AiZed,
567 |_, _, _| {},
568 ),
569 ToggleButtonWithIcon::new(
570 "Second",
571 IconName::AiZed,
572 |_, _, _| {},
573 ),
574 ToggleButtonWithIcon::new(
575 "Third",
576 IconName::AiZed,
577 |_, _, _| {},
578 ),
579 ],
580 )
581 .selected_index(1)
582 .button_width(rems_from_px(100.))
583 .into_any_element(),
584 ),
585 single_example(
586 "Multiple Row Group",
587 ToggleButtonGroup::two_rows(
588 "multiple_row_test",
589 [
590 ToggleButtonSimple::new("First", |_, _, _| {}),
591 ToggleButtonSimple::new("Second", |_, _, _| {}),
592 ToggleButtonSimple::new("Third", |_, _, _| {}),
593 ],
594 [
595 ToggleButtonSimple::new("Fourth", |_, _, _| {}),
596 ToggleButtonSimple::new("Fifth", |_, _, _| {}),
597 ToggleButtonSimple::new("Sixth", |_, _, _| {}),
598 ],
599 )
600 .selected_index(3)
601 .button_width(rems_from_px(100.))
602 .into_any_element(),
603 ),
604 single_example(
605 "Multiple Row Group with Icons",
606 ToggleButtonGroup::two_rows(
607 "multiple_row_test_icons",
608 [
609 ToggleButtonWithIcon::new(
610 "First",
611 IconName::AiZed,
612 |_, _, _| {},
613 ),
614 ToggleButtonWithIcon::new(
615 "Second",
616 IconName::AiZed,
617 |_, _, _| {},
618 ),
619 ToggleButtonWithIcon::new(
620 "Third",
621 IconName::AiZed,
622 |_, _, _| {},
623 ),
624 ],
625 [
626 ToggleButtonWithIcon::new(
627 "Fourth",
628 IconName::AiZed,
629 |_, _, _| {},
630 ),
631 ToggleButtonWithIcon::new(
632 "Fifth",
633 IconName::AiZed,
634 |_, _, _| {},
635 ),
636 ToggleButtonWithIcon::new(
637 "Sixth",
638 IconName::AiZed,
639 |_, _, _| {},
640 ),
641 ],
642 )
643 .selected_index(3)
644 .button_width(rems_from_px(100.))
645 .into_any_element(),
646 ),
647 ],
648 )])
649 .children(vec![example_group_with_title(
650 "Outlined Variant",
651 vec![
652 single_example(
653 "Single Row Group",
654 ToggleButtonGroup::single_row(
655 "single_row_test_outline",
656 [
657 ToggleButtonSimple::new("First", |_, _, _| {}),
658 ToggleButtonSimple::new("Second", |_, _, _| {}),
659 ToggleButtonSimple::new("Third", |_, _, _| {}),
660 ],
661 )
662 .selected_index(1)
663 .style(ToggleButtonGroupStyle::Outlined)
664 .into_any_element(),
665 ),
666 single_example(
667 "Single Row Group with icons",
668 ToggleButtonGroup::single_row(
669 "single_row_test_icon_outlined",
670 [
671 ToggleButtonWithIcon::new(
672 "First",
673 IconName::AiZed,
674 |_, _, _| {},
675 ),
676 ToggleButtonWithIcon::new(
677 "Second",
678 IconName::AiZed,
679 |_, _, _| {},
680 ),
681 ToggleButtonWithIcon::new(
682 "Third",
683 IconName::AiZed,
684 |_, _, _| {},
685 ),
686 ],
687 )
688 .selected_index(1)
689 .button_width(rems_from_px(100.))
690 .style(ToggleButtonGroupStyle::Outlined)
691 .into_any_element(),
692 ),
693 single_example(
694 "Multiple Row Group",
695 ToggleButtonGroup::two_rows(
696 "multiple_row_test",
697 [
698 ToggleButtonSimple::new("First", |_, _, _| {}),
699 ToggleButtonSimple::new("Second", |_, _, _| {}),
700 ToggleButtonSimple::new("Third", |_, _, _| {}),
701 ],
702 [
703 ToggleButtonSimple::new("Fourth", |_, _, _| {}),
704 ToggleButtonSimple::new("Fifth", |_, _, _| {}),
705 ToggleButtonSimple::new("Sixth", |_, _, _| {}),
706 ],
707 )
708 .selected_index(3)
709 .button_width(rems_from_px(100.))
710 .style(ToggleButtonGroupStyle::Outlined)
711 .into_any_element(),
712 ),
713 single_example(
714 "Multiple Row Group with Icons",
715 ToggleButtonGroup::two_rows(
716 "multiple_row_test",
717 [
718 ToggleButtonWithIcon::new(
719 "First",
720 IconName::AiZed,
721 |_, _, _| {},
722 ),
723 ToggleButtonWithIcon::new(
724 "Second",
725 IconName::AiZed,
726 |_, _, _| {},
727 ),
728 ToggleButtonWithIcon::new(
729 "Third",
730 IconName::AiZed,
731 |_, _, _| {},
732 ),
733 ],
734 [
735 ToggleButtonWithIcon::new(
736 "Fourth",
737 IconName::AiZed,
738 |_, _, _| {},
739 ),
740 ToggleButtonWithIcon::new(
741 "Fifth",
742 IconName::AiZed,
743 |_, _, _| {},
744 ),
745 ToggleButtonWithIcon::new(
746 "Sixth",
747 IconName::AiZed,
748 |_, _, _| {},
749 ),
750 ],
751 )
752 .selected_index(3)
753 .button_width(rems_from_px(100.))
754 .style(ToggleButtonGroupStyle::Outlined)
755 .into_any_element(),
756 ),
757 ],
758 )])
759 .children(vec![example_group_with_title(
760 "Filled Variant",
761 vec![
762 single_example(
763 "Single Row Group",
764 ToggleButtonGroup::single_row(
765 "single_row_test_outline",
766 [
767 ToggleButtonSimple::new("First", |_, _, _| {}),
768 ToggleButtonSimple::new("Second", |_, _, _| {}),
769 ToggleButtonSimple::new("Third", |_, _, _| {}),
770 ],
771 )
772 .selected_index(2)
773 .style(ToggleButtonGroupStyle::Filled)
774 .into_any_element(),
775 ),
776 single_example(
777 "Single Row Group with icons",
778 ToggleButtonGroup::single_row(
779 "single_row_test_icon_outlined",
780 [
781 ToggleButtonWithIcon::new(
782 "First",
783 IconName::AiZed,
784 |_, _, _| {},
785 ),
786 ToggleButtonWithIcon::new(
787 "Second",
788 IconName::AiZed,
789 |_, _, _| {},
790 ),
791 ToggleButtonWithIcon::new(
792 "Third",
793 IconName::AiZed,
794 |_, _, _| {},
795 ),
796 ],
797 )
798 .selected_index(1)
799 .button_width(rems_from_px(100.))
800 .style(ToggleButtonGroupStyle::Filled)
801 .into_any_element(),
802 ),
803 single_example(
804 "Multiple Row Group",
805 ToggleButtonGroup::two_rows(
806 "multiple_row_test",
807 [
808 ToggleButtonSimple::new("First", |_, _, _| {}),
809 ToggleButtonSimple::new("Second", |_, _, _| {}),
810 ToggleButtonSimple::new("Third", |_, _, _| {}),
811 ],
812 [
813 ToggleButtonSimple::new("Fourth", |_, _, _| {}),
814 ToggleButtonSimple::new("Fifth", |_, _, _| {}),
815 ToggleButtonSimple::new("Sixth", |_, _, _| {}),
816 ],
817 )
818 .selected_index(3)
819 .button_width(rems_from_px(100.))
820 .style(ToggleButtonGroupStyle::Filled)
821 .into_any_element(),
822 ),
823 single_example(
824 "Multiple Row Group with Icons",
825 ToggleButtonGroup::two_rows(
826 "multiple_row_test",
827 [
828 ToggleButtonWithIcon::new(
829 "First",
830 IconName::AiZed,
831 |_, _, _| {},
832 ),
833 ToggleButtonWithIcon::new(
834 "Second",
835 IconName::AiZed,
836 |_, _, _| {},
837 ),
838 ToggleButtonWithIcon::new(
839 "Third",
840 IconName::AiZed,
841 |_, _, _| {},
842 ),
843 ],
844 [
845 ToggleButtonWithIcon::new(
846 "Fourth",
847 IconName::AiZed,
848 |_, _, _| {},
849 ),
850 ToggleButtonWithIcon::new(
851 "Fifth",
852 IconName::AiZed,
853 |_, _, _| {},
854 ),
855 ToggleButtonWithIcon::new(
856 "Sixth",
857 IconName::AiZed,
858 |_, _, _| {},
859 ),
860 ],
861 )
862 .selected_index(3)
863 .button_width(rems_from_px(100.))
864 .style(ToggleButtonGroupStyle::Filled)
865 .into_any_element(),
866 ),
867 ],
868 )])
869 .into_any_element(),
870 )
871 }
872}