ui/widgets/buttons.rs
1//! The button — one component, three shipped looks — in its labelled and
2//! glyph-only forms, the [`Buttons::control_group`] that gathers adjacent ones
3//! onto one shared background, and [`Buttons::ghost`], the open frame a quiet
4//! control paints around children of its own. A catalog trait like every widget
5//! group: `use ui::widgets::{ButtonStyle, Buttons};` →
6//! `theme.button("Save", ButtonStyle::Prominent, None)`.
7//!
8//! [`ButtonStyle`] is a closed enum, not free-form knobs: it selects between
9//! the looks that ship, while per-call overrides stay chain modifiers.
10
11use gpui::{Div, ElementId, SharedString, Stateful, div, prelude::*, px};
12use icons::Icon;
13use motion::{self, Fade};
14use theme::{ControlSize, Sizing, Theme, ThemeExt, ink};
15
16/// The shipped looks (the reference `btnGhost` / `btnPrimary` /
17/// `btnDestructive`).
18#[derive(Clone, Copy, Debug, PartialEq, Eq)]
19pub enum ButtonStyle {
20 /// Quiet text on a translucent wash.
21 Ghost,
22 /// The maximum-contrast plate — the primary action.
23 Prominent,
24 /// The muted red fill — carries the destructive semantics with the paint.
25 Destructive,
26}
27
28/// The glyph a [`Buttons::icon_button`] carries, at the size every other
29/// control in this crate paints one.
30const GLYPH: f32 = 14.0;
31
32/// What a [`Buttons::control_group`] insets its items by, and the gap between
33/// them — so the first sits as far from the track's edge as from its neighbour.
34const GROUP_PAD: f32 = 2.0;
35
36/// The frame every style shares — [`ControlSize::Regular`], which a caller
37/// moves with [`Sizing::control_size`].
38fn frame() -> Div {
39 div()
40 .control_size(ControlSize::Regular)
41 .flex()
42 .items_center()
43 .cursor_pointer()
44}
45
46pub trait Buttons: ThemeExt {
47 /// A labeled button in one of the shipped styles. `fade` matters only for
48 /// [`ButtonStyle::Ghost`]: `Some` animates the hover wash per instance,
49 /// `None` is the plain ghost with the hover left to the caller.
50 fn button(
51 &self,
52 label: impl Into<SharedString>,
53 style: ButtonStyle,
54 fade: Option<Fade>,
55 ) -> Div {
56 let theme = self.theme();
57 let label = label.into();
58 match style {
59 ButtonStyle::Ghost => match fade {
60 Some(fade) => {
61 let mut btn = frame()
62 .text_color(motion::hover_blend(&fade, theme.text_muted, theme.text))
63 .bg(motion::hover_blend(&fade, ink(0.0), theme.element_hover))
64 .child(label);
65 btn.interactivity().on_hover(motion::hover_listener(fade));
66 btn
67 }
68 None => frame().text_color(theme.text_muted).child(label),
69 },
70 ButtonStyle::Prominent => frame()
71 .bg(theme.text)
72 .font_weight(gpui::FontWeight::MEDIUM)
73 .text_color(theme.on_solid)
74 .hover(|s| s.opacity(0.9))
75 .child(label),
76 ButtonStyle::Destructive => frame()
77 .bg(theme.danger_strong)
78 .font_weight(gpui::FontWeight::MEDIUM)
79 .text_color(gpui::white())
80 .hover(|s| s.opacity(0.9))
81 .child(label),
82 }
83 }
84
85 /// A button that is only a glyph — SwiftUI's toolbar `Button` over an icon
86 /// `Label`. Square at [`Theme::BUTTON_HEIGHT`], so it stands the same
87 /// height as a [`Self::button`] beside it. `fade` reads as it does there.
88 ///
89 /// It builds the glyph rather than taking one: gpui reads an svg's colour
90 /// off that element's own style and paints **nothing** when it is unset, so
91 /// a colour set on this button would silently not reach it.
92 ///
93 /// An icon carries no accessible name — reach for
94 /// [`crate::tooltip`] on the way past.
95 fn icon_button(&self, icon: impl Into<Icon>, style: ButtonStyle, fade: Option<Fade>) -> Div {
96 let theme = self.theme();
97 let square = frame()
98 .px(px(0.0))
99 .w(px(Theme::BUTTON_HEIGHT))
100 .justify_center();
101 let icon = icon.into();
102 let glyph = |tint| {
103 crate::icons::icon(icon.clone())
104 .size(px(GLYPH))
105 .text_color(tint)
106 };
107 match style {
108 ButtonStyle::Ghost => match fade {
109 Some(fade) => {
110 let mut btn = square
111 .bg(motion::hover_blend(&fade, ink(0.0), theme.element_hover))
112 .child(glyph(motion::hover_blend(
113 &fade,
114 theme.text_muted,
115 theme.text,
116 )));
117 btn.interactivity().on_hover(motion::hover_listener(fade));
118 btn
119 }
120 None => square.child(glyph(theme.text_muted)),
121 },
122 ButtonStyle::Prominent => square
123 .bg(theme.text)
124 .hover(|s| s.opacity(0.9))
125 .child(glyph(theme.on_solid)),
126 ButtonStyle::Destructive => square
127 .bg(theme.danger_strong)
128 .hover(|s| s.opacity(0.9))
129 .child(glyph(gpui::white())),
130 }
131 }
132
133 /// SwiftUI's `ControlGroup`, and what a toolbar paints behind the items it
134 /// finds side by side: one shared background, its buttons inset in it. A
135 /// second cluster is a second call — the break between them is the spacing,
136 /// the way `ToolbarSpacer` puts it there.
137 ///
138 /// The track's radius is the item's plus the inset, so an ordinary
139 /// [`Self::button`] or [`Self::icon_button`] drops in already concentric.
140 ///
141 /// Items are left to stretch: that is what holds a glyph and a label to one
142 /// height when the type ladder moves under them. `self_start` because the
143 /// group must hug them — dropped into a `flex_col`, flexbox's default
144 /// `align-items: stretch` would otherwise blow it out to the column's full
145 /// width.
146 ///
147 /// Glass is chained, not baked: `.surface(theme, theme.popover_surface)`
148 /// turns the track into the capsule a macOS 26 toolbar floats.
149 fn control_group(&self) -> Div {
150 let theme = self.theme();
151 div()
152 .self_start()
153 .flex()
154 .flex_row()
155 .gap(px(GROUP_PAD))
156 .p(px(GROUP_PAD))
157 .rounded(px(Theme::button_radius() + GROUP_PAD))
158 .bg(theme.surface_raised)
159 .border_1()
160 .border_color(theme.border)
161 }
162
163 /// A quiet control: nothing at rest, a wash on hover. Stateful, so it
164 /// carries its own click and tooltip; padding and children are the
165 /// caller's, which is what lets a glyph sit before the text.
166 fn ghost(&self, id: impl Into<ElementId>) -> Stateful<Div> {
167 let tint = self.theme().element_hover;
168 div()
169 .id(id)
170 .flex()
171 .flex_row()
172 .items_center()
173 .rounded(px(Theme::control_radius()))
174 .cursor_pointer()
175 .hover(move |el| el.bg(tint))
176 }
177}
178
179impl Buttons for Theme {}