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 |(index, button)| {
435 let ButtonConfiguration {
436 label,
437 icon,
438 on_click,
439 } = button.into_configuration();
440
441 ButtonLike::new((self.group_name, row_index * COLS + index))
442 .when(index == self.selected_index, |this| {
443 this.toggle_state(true)
444 .selected_style(ButtonStyle::Tinted(TintColor::Accent))
445 })
446 .rounding(None)
447 .when(self.style == ToggleButtonGroupStyle::Filled, |button| {
448 button.style(ButtonStyle::Filled)
449 })
450 .child(
451 h_flex()
452 .min_w(self.button_width)
453 .gap_1p5()
454 .justify_center()
455 .when_some(icon, |this, icon| {
456 this.child(Icon::new(icon).size(IconSize::XSmall).map(|this| {
457 if index == self.selected_index {
458 this.color(Color::Accent)
459 } else {
460 this.color(Color::Muted)
461 }
462 }))
463 })
464 .child(
465 Label::new(label).when(index == self.selected_index, |this| {
466 this.color(Color::Accent)
467 }),
468 ),
469 )
470 .on_click(on_click)
471 .into_any_element()
472 })
473 });
474
475 let border_color = cx.theme().colors().border.opacity(0.6);
476 let is_outlined_or_filled = self.style == ToggleButtonGroupStyle::Outlined
477 || self.style == ToggleButtonGroupStyle::Filled;
478 let is_transparent = self.style == ToggleButtonGroupStyle::Transparent;
479
480 v_flex()
481 .rounded_md()
482 .overflow_hidden()
483 .map(|this| {
484 if is_transparent {
485 this.gap_px()
486 } else {
487 this.border_1().border_color(border_color)
488 }
489 })
490 .children(entries.enumerate().map(|(row_index, row)| {
491 let last_row = row_index == ROWS - 1;
492 h_flex()
493 .when(!is_outlined_or_filled, |this| this.gap_px())
494 .when(is_outlined_or_filled && !last_row, |this| {
495 this.border_b_1().border_color(border_color)
496 })
497 .children(row.enumerate().map(|(item_index, item)| {
498 let last_item = item_index == COLS - 1;
499 div()
500 .when(is_outlined_or_filled && !last_item, |this| {
501 this.border_r_1().border_color(border_color)
502 })
503 .child(item)
504 }))
505 }))
506 }
507}
508
509fn register_toggle_button_group() {
510 component::register_component::<ToggleButtonGroup<ToggleButtonSimple>>();
511}
512
513component::__private::inventory::submit! {
514 component::ComponentFn::new(register_toggle_button_group)
515}
516
517impl<T: ButtonBuilder, const COLS: usize, const ROWS: usize> Component
518 for ToggleButtonGroup<T, COLS, ROWS>
519{
520 fn name() -> &'static str {
521 "ToggleButtonGroup"
522 }
523
524 fn scope() -> ComponentScope {
525 ComponentScope::Input
526 }
527
528 fn sort_name() -> &'static str {
529 "ButtonG"
530 }
531
532 fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
533 Some(
534 v_flex()
535 .gap_6()
536 .children(vec![example_group_with_title(
537 "Transparent Variant",
538 vec![
539 single_example(
540 "Single Row Group",
541 ToggleButtonGroup::single_row(
542 "single_row_test",
543 [
544 ToggleButtonSimple::new("First", |_, _, _| {}),
545 ToggleButtonSimple::new("Second", |_, _, _| {}),
546 ToggleButtonSimple::new("Third", |_, _, _| {}),
547 ],
548 )
549 .selected_index(1)
550 .button_width(rems_from_px(100.))
551 .into_any_element(),
552 ),
553 single_example(
554 "Single Row Group with icons",
555 ToggleButtonGroup::single_row(
556 "single_row_test_icon",
557 [
558 ToggleButtonWithIcon::new(
559 "First",
560 IconName::AiZed,
561 |_, _, _| {},
562 ),
563 ToggleButtonWithIcon::new(
564 "Second",
565 IconName::AiZed,
566 |_, _, _| {},
567 ),
568 ToggleButtonWithIcon::new(
569 "Third",
570 IconName::AiZed,
571 |_, _, _| {},
572 ),
573 ],
574 )
575 .selected_index(1)
576 .button_width(rems_from_px(100.))
577 .into_any_element(),
578 ),
579 single_example(
580 "Multiple Row Group",
581 ToggleButtonGroup::two_rows(
582 "multiple_row_test",
583 [
584 ToggleButtonSimple::new("First", |_, _, _| {}),
585 ToggleButtonSimple::new("Second", |_, _, _| {}),
586 ToggleButtonSimple::new("Third", |_, _, _| {}),
587 ],
588 [
589 ToggleButtonSimple::new("Fourth", |_, _, _| {}),
590 ToggleButtonSimple::new("Fifth", |_, _, _| {}),
591 ToggleButtonSimple::new("Sixth", |_, _, _| {}),
592 ],
593 )
594 .selected_index(3)
595 .button_width(rems_from_px(100.))
596 .into_any_element(),
597 ),
598 single_example(
599 "Multiple Row Group with Icons",
600 ToggleButtonGroup::two_rows(
601 "multiple_row_test_icons",
602 [
603 ToggleButtonWithIcon::new(
604 "First",
605 IconName::AiZed,
606 |_, _, _| {},
607 ),
608 ToggleButtonWithIcon::new(
609 "Second",
610 IconName::AiZed,
611 |_, _, _| {},
612 ),
613 ToggleButtonWithIcon::new(
614 "Third",
615 IconName::AiZed,
616 |_, _, _| {},
617 ),
618 ],
619 [
620 ToggleButtonWithIcon::new(
621 "Fourth",
622 IconName::AiZed,
623 |_, _, _| {},
624 ),
625 ToggleButtonWithIcon::new(
626 "Fifth",
627 IconName::AiZed,
628 |_, _, _| {},
629 ),
630 ToggleButtonWithIcon::new(
631 "Sixth",
632 IconName::AiZed,
633 |_, _, _| {},
634 ),
635 ],
636 )
637 .selected_index(3)
638 .button_width(rems_from_px(100.))
639 .into_any_element(),
640 ),
641 ],
642 )])
643 .children(vec![example_group_with_title(
644 "Outlined Variant",
645 vec![
646 single_example(
647 "Single Row Group",
648 ToggleButtonGroup::single_row(
649 "single_row_test_outline",
650 [
651 ToggleButtonSimple::new("First", |_, _, _| {}),
652 ToggleButtonSimple::new("Second", |_, _, _| {}),
653 ToggleButtonSimple::new("Third", |_, _, _| {}),
654 ],
655 )
656 .selected_index(1)
657 .style(ToggleButtonGroupStyle::Outlined)
658 .into_any_element(),
659 ),
660 single_example(
661 "Single Row Group with icons",
662 ToggleButtonGroup::single_row(
663 "single_row_test_icon_outlined",
664 [
665 ToggleButtonWithIcon::new(
666 "First",
667 IconName::AiZed,
668 |_, _, _| {},
669 ),
670 ToggleButtonWithIcon::new(
671 "Second",
672 IconName::AiZed,
673 |_, _, _| {},
674 ),
675 ToggleButtonWithIcon::new(
676 "Third",
677 IconName::AiZed,
678 |_, _, _| {},
679 ),
680 ],
681 )
682 .selected_index(1)
683 .button_width(rems_from_px(100.))
684 .style(ToggleButtonGroupStyle::Outlined)
685 .into_any_element(),
686 ),
687 single_example(
688 "Multiple Row Group",
689 ToggleButtonGroup::two_rows(
690 "multiple_row_test",
691 [
692 ToggleButtonSimple::new("First", |_, _, _| {}),
693 ToggleButtonSimple::new("Second", |_, _, _| {}),
694 ToggleButtonSimple::new("Third", |_, _, _| {}),
695 ],
696 [
697 ToggleButtonSimple::new("Fourth", |_, _, _| {}),
698 ToggleButtonSimple::new("Fifth", |_, _, _| {}),
699 ToggleButtonSimple::new("Sixth", |_, _, _| {}),
700 ],
701 )
702 .selected_index(3)
703 .button_width(rems_from_px(100.))
704 .style(ToggleButtonGroupStyle::Outlined)
705 .into_any_element(),
706 ),
707 single_example(
708 "Multiple Row Group with Icons",
709 ToggleButtonGroup::two_rows(
710 "multiple_row_test",
711 [
712 ToggleButtonWithIcon::new(
713 "First",
714 IconName::AiZed,
715 |_, _, _| {},
716 ),
717 ToggleButtonWithIcon::new(
718 "Second",
719 IconName::AiZed,
720 |_, _, _| {},
721 ),
722 ToggleButtonWithIcon::new(
723 "Third",
724 IconName::AiZed,
725 |_, _, _| {},
726 ),
727 ],
728 [
729 ToggleButtonWithIcon::new(
730 "Fourth",
731 IconName::AiZed,
732 |_, _, _| {},
733 ),
734 ToggleButtonWithIcon::new(
735 "Fifth",
736 IconName::AiZed,
737 |_, _, _| {},
738 ),
739 ToggleButtonWithIcon::new(
740 "Sixth",
741 IconName::AiZed,
742 |_, _, _| {},
743 ),
744 ],
745 )
746 .selected_index(3)
747 .button_width(rems_from_px(100.))
748 .style(ToggleButtonGroupStyle::Outlined)
749 .into_any_element(),
750 ),
751 ],
752 )])
753 .children(vec![example_group_with_title(
754 "Filled Variant",
755 vec![
756 single_example(
757 "Single Row Group",
758 ToggleButtonGroup::single_row(
759 "single_row_test_outline",
760 [
761 ToggleButtonSimple::new("First", |_, _, _| {}),
762 ToggleButtonSimple::new("Second", |_, _, _| {}),
763 ToggleButtonSimple::new("Third", |_, _, _| {}),
764 ],
765 )
766 .selected_index(2)
767 .style(ToggleButtonGroupStyle::Filled)
768 .into_any_element(),
769 ),
770 single_example(
771 "Single Row Group with icons",
772 ToggleButtonGroup::single_row(
773 "single_row_test_icon_outlined",
774 [
775 ToggleButtonWithIcon::new(
776 "First",
777 IconName::AiZed,
778 |_, _, _| {},
779 ),
780 ToggleButtonWithIcon::new(
781 "Second",
782 IconName::AiZed,
783 |_, _, _| {},
784 ),
785 ToggleButtonWithIcon::new(
786 "Third",
787 IconName::AiZed,
788 |_, _, _| {},
789 ),
790 ],
791 )
792 .selected_index(1)
793 .button_width(rems_from_px(100.))
794 .style(ToggleButtonGroupStyle::Filled)
795 .into_any_element(),
796 ),
797 single_example(
798 "Multiple Row Group",
799 ToggleButtonGroup::two_rows(
800 "multiple_row_test",
801 [
802 ToggleButtonSimple::new("First", |_, _, _| {}),
803 ToggleButtonSimple::new("Second", |_, _, _| {}),
804 ToggleButtonSimple::new("Third", |_, _, _| {}),
805 ],
806 [
807 ToggleButtonSimple::new("Fourth", |_, _, _| {}),
808 ToggleButtonSimple::new("Fifth", |_, _, _| {}),
809 ToggleButtonSimple::new("Sixth", |_, _, _| {}),
810 ],
811 )
812 .selected_index(3)
813 .button_width(rems_from_px(100.))
814 .style(ToggleButtonGroupStyle::Filled)
815 .into_any_element(),
816 ),
817 single_example(
818 "Multiple Row Group with Icons",
819 ToggleButtonGroup::two_rows(
820 "multiple_row_test",
821 [
822 ToggleButtonWithIcon::new(
823 "First",
824 IconName::AiZed,
825 |_, _, _| {},
826 ),
827 ToggleButtonWithIcon::new(
828 "Second",
829 IconName::AiZed,
830 |_, _, _| {},
831 ),
832 ToggleButtonWithIcon::new(
833 "Third",
834 IconName::AiZed,
835 |_, _, _| {},
836 ),
837 ],
838 [
839 ToggleButtonWithIcon::new(
840 "Fourth",
841 IconName::AiZed,
842 |_, _, _| {},
843 ),
844 ToggleButtonWithIcon::new(
845 "Fifth",
846 IconName::AiZed,
847 |_, _, _| {},
848 ),
849 ToggleButtonWithIcon::new(
850 "Sixth",
851 IconName::AiZed,
852 |_, _, _| {},
853 ),
854 ],
855 )
856 .selected_index(3)
857 .button_width(rems_from_px(100.))
858 .style(ToggleButtonGroupStyle::Filled)
859 .into_any_element(),
860 ),
861 ],
862 )])
863 .into_any_element(),
864 )
865 }
866}