button: Add warning, success, info variant to Button. (#745)

<img width="1342" alt="SCR-20250327-jfzq"
src="https://github.com/user-attachments/assets/7c44458a-9467-4095-9cd6-1dcb35cc351b"
/>
<img width="1342" alt="SCR-20250327-jgak"
src="https://github.com/user-attachments/assets/07d33d60-f581-46d4-9a54-174e56ab82ca"
/>

crates/story/examples/alert.rs

@@ -96,7 +96,7 @@ impl Render for Example {
                 .title("Error!"),
             )
             .child(
-                Alert::info("Custom info alert with icon.")
+                Alert::info("Custom icon with info alert.")
                     .with_size(self.size)
                     .icon(IconName::Bell),
             )

crates/story/src/button_story.rs

@@ -6,8 +6,8 @@ use gpui::{
 use gpui_component::{
     button::{Button, ButtonCustomVariant, ButtonGroup, ButtonVariants as _, DropdownButton},
     checkbox::Checkbox,
-    green_600, green_700, green_800, green_950, h_flex, v_flex, white, ActiveTheme,
+    h_flex, indigo, v_flex, white, ActiveTheme, Disableable as _, Icon, IconName, Selectable as _,
-    Disableable as _, Icon, IconName, Selectable as _, Sizable as _, Theme,
+    Sizable as _, Theme,
 };
 
 use crate::section;
@@ -74,9 +74,9 @@ impl Render for ButtonStory {
 
         let custom_variant = ButtonCustomVariant::new(cx)
             .color(if cx.theme().mode.is_dark() {
-                green_800()
+                indigo(800)
             } else {
-                green_600()
+                indigo(600)
             })
             .foreground(if cx.theme().mode.is_dark() {
                 white()
@@ -84,19 +84,19 @@ impl Render for ButtonStory {
                 white()
             })
             .border(if cx.theme().mode.is_dark() {
-                green_800()
+                indigo(800)
             } else {
-                green_700()
+                indigo(600)
             })
             .hover(if cx.theme().mode.is_dark() {
-                green_800()
+                indigo(900)
             } else {
-                green_600()
+                indigo(700)
             })
             .active(if cx.theme().mode.is_dark() {
-                green_950()
+                indigo(950)
             } else {
-                green_700()
+                indigo(700)
             });
 
         v_flex()
@@ -191,6 +191,36 @@ impl Render for ButtonStory {
                                     .when(compact, |this| this.compact())
                                     .on_click(Self::on_click),
                             )
+                            .child(
+                                Button::new("button-4-warning")
+                                    .warning()
+                                    .label("Warning Button")
+                                    .disabled(disabled)
+                                    .selected(selected)
+                                    .loading(loading)
+                                    .when(compact, |this| this.compact())
+                                    .on_click(Self::on_click),
+                            )
+                            .child(
+                                Button::new("button-4-success")
+                                    .success()
+                                    .label("Success Button")
+                                    .disabled(disabled)
+                                    .selected(selected)
+                                    .loading(loading)
+                                    .when(compact, |this| this.compact())
+                                    .on_click(Self::on_click),
+                            )
+                            .child(
+                                Button::new("button-5-info")
+                                    .info()
+                                    .label("Info Button")
+                                    .disabled(disabled)
+                                    .selected(selected)
+                                    .loading(loading)
+                                    .when(compact, |this| this.compact())
+                                    .on_click(Self::on_click),
+                            )
                             .child(
                                 Button::new("button-5-ghost")
                                     .ghost()
@@ -342,7 +372,7 @@ impl Render for ButtonStory {
                                 .on_click(Self::on_click),
                         )
                         .child(
-                            Button::new("button-outline-4")
+                            Button::new("button-outline-4-danger")
                                 .danger()
                                 .outline()
                                 .label("Danger Button")
@@ -352,6 +382,39 @@ impl Render for ButtonStory {
                                 .when(compact, |this| this.compact())
                                 .on_click(Self::on_click),
                         )
+                        .child(
+                            Button::new("button-outline-4-warning")
+                                .warning()
+                                .outline()
+                                .label("Warning Button")
+                                .disabled(disabled)
+                                .selected(selected)
+                                .loading(loading)
+                                .when(compact, |this| this.compact())
+                                .on_click(Self::on_click),
+                        )
+                        .child(
+                            Button::new("button-outline-4-success")
+                                .success()
+                                .outline()
+                                .label("Success Button")
+                                .disabled(disabled)
+                                .selected(selected)
+                                .loading(loading)
+                                .when(compact, |this| this.compact())
+                                .on_click(Self::on_click),
+                        )
+                        .child(
+                            Button::new("button-outline-5-info")
+                                .info()
+                                .outline()
+                                .label("Info Button")
+                                .disabled(disabled)
+                                .selected(selected)
+                                .loading(loading)
+                                .when(compact, |this| this.compact())
+                                .on_click(Self::on_click),
+                        )
                         .child(
                             Button::new("button-outline-6-custom")
                                 .outline()

crates/ui/src/alert.rs

@@ -148,7 +148,7 @@ impl RenderOnce for Alert {
                 .rounded(radius)
                 .border_1()
                 .border_color(color)
-                .bg(color.opacity(0.05))
+                .bg(color.opacity(0.1))
                 .text_color(self.variant.fg(cx))
                 .px(padding_x)
                 .py(padding_y)

crates/ui/src/button/button.rs

@@ -46,6 +46,21 @@ pub trait ButtonVariants: Sized {
         self.with_variant(ButtonVariant::Danger)
     }
 
+    /// With the warning style for the Button.
+    fn warning(self) -> Self {
+        self.with_variant(ButtonVariant::Warning)
+    }
+
+    /// With the success style for the Button.
+    fn success(self) -> Self {
+        self.with_variant(ButtonVariant::Success)
+    }
+
+    /// With the info style for the Button.
+    fn info(self) -> Self {
+        self.with_variant(ButtonVariant::Info)
+    }
+
     /// With the ghost style for the Button.
     fn ghost(self) -> Self {
         self.with_variant(ButtonVariant::Ghost)
@@ -116,6 +131,9 @@ pub enum ButtonVariant {
     Primary,
     Secondary,
     Danger,
+    Info,
+    Success,
+    Warning,
     Ghost,
     Link,
     Text,
@@ -482,6 +500,9 @@ impl ButtonVariant {
             ButtonVariant::Primary => cx.theme().primary,
             ButtonVariant::Secondary => cx.theme().secondary,
             ButtonVariant::Danger => cx.theme().danger,
+            ButtonVariant::Warning => cx.theme().warning,
+            ButtonVariant::Success => cx.theme().success,
+            ButtonVariant::Info => cx.theme().info,
             ButtonVariant::Ghost | ButtonVariant::Link | ButtonVariant::Text => {
                 cx.theme().transparent
             }
@@ -506,6 +527,27 @@ impl ButtonVariant {
                     cx.theme().danger_foreground
                 }
             }
+            ButtonVariant::Warning => {
+                if outline {
+                    cx.theme().warning
+                } else {
+                    cx.theme().warning_foreground
+                }
+            }
+            ButtonVariant::Success => {
+                if outline {
+                    cx.theme().success
+                } else {
+                    cx.theme().success_foreground
+                }
+            }
+            ButtonVariant::Info => {
+                if outline {
+                    cx.theme().info
+                } else {
+                    cx.theme().info_foreground
+                }
+            }
             ButtonVariant::Link => cx.theme().link,
             ButtonVariant::Text => cx.theme().foreground,
             ButtonVariant::Custom(colors) => {
@@ -523,6 +565,9 @@ impl ButtonVariant {
             ButtonVariant::Primary => cx.theme().primary,
             ButtonVariant::Secondary => cx.theme().border,
             ButtonVariant::Danger => cx.theme().danger,
+            ButtonVariant::Info => cx.theme().info,
+            ButtonVariant::Warning => cx.theme().warning,
+            ButtonVariant::Success => cx.theme().success,
             ButtonVariant::Ghost | ButtonVariant::Link | ButtonVariant::Text => {
                 cx.theme().transparent
             }
@@ -578,6 +623,27 @@ impl ButtonVariant {
                     cx.theme().danger_hover
                 }
             }
+            ButtonVariant::Warning => {
+                if outline {
+                    cx.theme().secondary_hover
+                } else {
+                    cx.theme().warning_hover
+                }
+            }
+            ButtonVariant::Success => {
+                if outline {
+                    cx.theme().secondary_hover
+                } else {
+                    cx.theme().success_hover
+                }
+            }
+            ButtonVariant::Info => {
+                if outline {
+                    cx.theme().secondary_hover
+                } else {
+                    cx.theme().info_hover
+                }
+            }
             ButtonVariant::Ghost => {
                 if cx.theme().mode.is_dark() {
                     cx.theme().secondary.lighten(0.1).opacity(0.8)
@@ -638,6 +704,27 @@ impl ButtonVariant {
                     cx.theme().danger_active
                 }
             }
+            ButtonVariant::Warning => {
+                if outline {
+                    cx.theme().warning_active.opacity(0.1)
+                } else {
+                    cx.theme().warning_active
+                }
+            }
+            ButtonVariant::Success => {
+                if outline {
+                    cx.theme().success_active.opacity(0.1)
+                } else {
+                    cx.theme().success_active
+                }
+            }
+            ButtonVariant::Info => {
+                if outline {
+                    cx.theme().info_active.opacity(0.1)
+                } else {
+                    cx.theme().info_active
+                }
+            }
             ButtonVariant::Link => cx.theme().transparent,
             ButtonVariant::Text => cx.theme().transparent,
             ButtonVariant::Custom(colors) => {
@@ -671,6 +758,9 @@ impl ButtonVariant {
             ButtonVariant::Primary => cx.theme().primary_active,
             ButtonVariant::Secondary | ButtonVariant::Ghost => cx.theme().secondary_active,
             ButtonVariant::Danger => cx.theme().danger_active,
+            ButtonVariant::Warning => cx.theme().warning_active,
+            ButtonVariant::Success => cx.theme().success_active,
+            ButtonVariant::Info => cx.theme().info_active,
             ButtonVariant::Link => cx.theme().transparent,
             ButtonVariant::Text => cx.theme().transparent,
             ButtonVariant::Custom(colors) => colors.active,
@@ -701,6 +791,9 @@ impl ButtonVariant {
             }
             ButtonVariant::Primary => cx.theme().primary.opacity(0.15),
             ButtonVariant::Danger => cx.theme().danger.opacity(0.15),
+            ButtonVariant::Warning => cx.theme().warning.opacity(0.15),
+            ButtonVariant::Success => cx.theme().success.opacity(0.15),
+            ButtonVariant::Info => cx.theme().info.opacity(0.15),
             ButtonVariant::Secondary => cx.theme().secondary.opacity(1.5),
             ButtonVariant::Custom(style) => style.color.opacity(0.15),
         };

crates/ui/src/theme.rs

@@ -342,10 +342,10 @@ impl ThemeColor {
             card: hsl(0.0, 0.0, 8.0),
             card_foreground: hsl(0.0, 0.0, 78.0),
             caret: hsl(0., 0., 78.),
-            danger: crate::red_900(),
+            danger: crate::red_800(),
-            danger_active: crate::red_900().darken(0.2),
+            danger_active: crate::red_800().darken(0.2),
             danger_foreground: crate::red_50(),
-            danger_hover: crate::red_900().opacity(0.9),
+            danger_hover: crate::red_800().opacity(0.9),
             description_list_label: hsl(240.0, 0., 13.0),
             description_list_label_foreground: hsl(0.0, 0.0, 78.0),
             drag_border: crate::blue_500(),
@@ -393,10 +393,10 @@ impl ThemeColor {
             skeleton: hsla(223.0, 0.0, 98.0, 0.1),
             slider_bar: hsl(223.0, 0.0, 98.0),
             slider_thumb: hsl(0.0, 0.0, 8.0),
-            success: crate::green_900(),
+            success: crate::green_800(),
-            success_active: crate::green_900().darken(0.2),
+            success_active: crate::green_800().darken(0.2),
             success_foreground: crate::green_50(),
-            success_hover: crate::green_900().opacity(0.8),
+            success_hover: crate::green_800().opacity(0.8),
             tab: gpui::transparent_black(),
             tab_active: hsl(0.0, 0.0, 8.0),
             tab_active_foreground: hsl(0., 0., 78.),
@@ -414,10 +414,10 @@ impl ThemeColor {
             tiles: hsl(0.0, 0.0, 5.0),
             title_bar: hsl(0., 0., 9.7),
             title_bar_border: hsl(240.0, 3.7, 15.9),
-            warning: crate::yellow_900(),
+            warning: crate::yellow_800(),
-            warning_active: crate::yellow_900().darken(0.2),
+            warning_active: crate::yellow_800().darken(0.2),
             warning_foreground: crate::yellow_50(),
-            warning_hover: crate::yellow_900().opacity(0.9),
+            warning_hover: crate::yellow_800().opacity(0.9),
             window_border: hsl(240.0, 3.7, 28.0),
         }
     }