button: Rename ButtonStyle to ButtonVariant. (#460)

This is a breaking changes, we need refactor exist code by this:

- `ButtonStyled` -> `ButtonVariants`
- `.style` -> `.with_variant`
- `ButtonStyle` -> `ButtonVariant`
- `ButtonCustomStyle` -> `ButtonCustomVariant`

crates/app/src/story_workspace.rs

@@ -9,7 +9,7 @@ use story::{
     SidebarStory, StoryContainer, SwitchStory, TableStory, TextStory, TooltipStory,
 };
 use ui::{
-    button::{Button, ButtonStyled as _},
+    button::{Button, ButtonVariants as _},
     color_picker::{ColorPicker, ColorPickerEvent},
     dock::{DockArea, DockAreaState, DockEvent, DockItem, DockPlacement},
     h_flex,

crates/story/src/button_story.rs

@@ -4,7 +4,7 @@ use gpui::{
 };
 
 use ui::{
-    button::{Button, ButtonCustomStyle, ButtonStyled as _},
+    button::{Button, ButtonCustomVariant, ButtonVariants as _},
     button_group::ButtonGroup,
     checkbox::Checkbox,
     h_flex,
@@ -204,7 +204,7 @@ impl Render for ButtonStory {
                             .child(
                                 Button::new("button-6-custom")
                                     .custom(
-                                        ButtonCustomStyle::new(cx)
+                                        ButtonCustomVariant::new(cx)
                                             .color(if cx.theme().mode.is_dark() {
                                                 ui::green_900()
                                             } else {

crates/story/src/icon_story.rs

@@ -2,7 +2,7 @@ use gpui::{
     px, rems, ParentElement, Render, Styled, View, ViewContext, VisualContext as _, WindowContext,
 };
 use ui::{
-    button::{Button, ButtonStyle},
+    button::{Button, ButtonVariant, ButtonVariants},
     h_flex,
     theme::ActiveTheme as _,
     v_flex, Icon, IconName,
@@ -63,7 +63,7 @@ impl Render for IconStory {
                                 .text_color(ui::gray_500())
                                 .size_6(),
                         )
-                        .style(ButtonStyle::Ghost),
+                        .with_variant(ButtonVariant::Ghost),
                 )
                 .child(
                     Button::new("like2")
@@ -72,7 +72,7 @@ impl Render for IconStory {
                                 .text_color(ui::red_500())
                                 .size_6(),
                         )
-                        .style(ButtonStyle::Ghost),
+                        .with_variant(ButtonVariant::Ghost),
                 )
                 .child(
                     Icon::new(IconName::Plus)

crates/story/src/input_story.rs

@@ -7,7 +7,7 @@ use regex::Regex;
 
 use crate::section;
 use ui::{
-    button::Button,
+    button::{Button, ButtonVariant, ButtonVariants as _},
     checkbox::Checkbox,
     h_flex,
     input::{InputEvent, OtpInput, TextInput},
@@ -398,7 +398,7 @@ impl Render for InputStory {
                     .child(
                         Button::new("btn-submit")
                             .w_full()
-                            .style(ui::button::ButtonStyle::Primary)
+                            .with_variant(ButtonVariant::Primary)
                             .label("Submit")
                             .on_click(cx.listener(|_, _, cx| cx.dispatch_action(Box::new(Tab)))),
                     )

crates/story/src/modal_story.rs

@@ -8,7 +8,7 @@ use gpui::{
 };
 
 use ui::{
-    button::{Button, ButtonStyle, ButtonStyled as _},
+    button::{Button, ButtonVariant, ButtonVariants as _},
     checkbox::Checkbox,
     date_picker::DatePicker,
     dropdown::Dropdown,
@@ -84,7 +84,7 @@ impl ListDelegate for ListItemDeletegate {
                 .suffix(|_| {
                     Button::new("like")
                         .icon(IconName::Heart)
-                        .style(ButtonStyle::Ghost)
+                        .with_variant(ButtonVariant::Ghost)
                         .size(px(18.))
                         .on_click(move |_, cx| {
                             cx.stop_propagation();

crates/story/src/popup_story.rs

@@ -6,7 +6,7 @@ use gpui::{
 };
 use serde::Deserialize;
 use ui::{
-    button::{Button, ButtonStyled as _},
+    button::{Button, ButtonVariants as _},
     context_menu::ContextMenuExt,
     divider::Divider,
     h_flex,

crates/story/src/table_story.rs

@@ -8,7 +8,7 @@ use gpui::{
 };
 use serde::Deserialize;
 use ui::{
-    button::{Button, ButtonStyled},
+    button::{Button, ButtonVariants},
     checkbox::Checkbox,
     h_flex,
     indicator::Indicator,

crates/story/src/text_story.rs

@@ -4,7 +4,7 @@ use gpui::{
 };
 
 use ui::{
-    button::{Button, ButtonStyle},
+    button::{Button, ButtonVariant, ButtonVariants as _},
     checkbox::Checkbox,
     clipboard::Clipboard,
     h_flex,
@@ -118,7 +118,7 @@ impl Render for TextStory {
                                 .child(Label::new("9,182,1 USD").text_2xl().masked(self.masked))
                                 .child(
                                     Button::new("btn-mask")
-                                        .style(ButtonStyle::Ghost)
+                                        .with_variant(ButtonVariant::Ghost)
                                         .icon(if self.masked {
                                             IconName::EyeOff
                                         } else {

crates/story/src/tooltip_story.rs

@@ -4,7 +4,7 @@ use gpui::{
 };
 
 use ui::{
-    button::{Button, ButtonStyle},
+    button::{Button, ButtonVariant, ButtonVariants},
     checkbox::Checkbox,
     h_flex,
     label::Label,
@@ -57,7 +57,7 @@ impl Render for TooltipStory {
                     .child(
                         Button::new("button")
                             .label("Hover me")
-                            .style(ButtonStyle::Primary),
+                            .with_variant(ButtonVariant::Primary),
                     )
                     .id("tooltip-1")
                     .tooltip(|cx| Tooltip::new("This is a Button", cx)),

crates/ui/src/button.rs

@@ -26,7 +26,7 @@ impl From<Pixels> for ButtonRounded {
 }
 
 #[derive(Clone, Copy, PartialEq, Eq)]
-pub struct ButtonCustomStyle {
+pub struct ButtonCustomVariant {
     color: Hsla,
     foreground: Hsla,
     border: Hsla,
@@ -35,46 +35,46 @@ pub struct ButtonCustomStyle {
     active: Hsla,
 }
 
-pub trait ButtonStyled: Sized {
+pub trait ButtonVariants: Sized {
-    fn with_style(self, style: ButtonStyle) -> Self;
+    fn with_variant(self, variant: ButtonVariant) -> Self;
 
     /// With the primary style for the Button.
     fn primary(self) -> Self {
-        self.with_style(ButtonStyle::Primary)
+        self.with_variant(ButtonVariant::Primary)
     }
 
     /// With the danger style for the Button.
     fn danger(self) -> Self {
-        self.with_style(ButtonStyle::Danger)
+        self.with_variant(ButtonVariant::Danger)
     }
 
     /// With the outline style for the Button.
     fn outline(self) -> Self {
-        self.with_style(ButtonStyle::Outline)
+        self.with_variant(ButtonVariant::Outline)
     }
 
     /// With the ghost style for the Button.
     fn ghost(self) -> Self {
-        self.with_style(ButtonStyle::Ghost)
+        self.with_variant(ButtonVariant::Ghost)
     }
 
     /// With the link style for the Button.
     fn link(self) -> Self {
-        self.with_style(ButtonStyle::Link)
+        self.with_variant(ButtonVariant::Link)
     }
 
     /// With the text style for the Button, it will no padding look like a normal text.
     fn text(self) -> Self {
-        self.with_style(ButtonStyle::Text)
+        self.with_variant(ButtonVariant::Text)
     }
 
     /// With the custom style for the Button.
-    fn custom(self, style: ButtonCustomStyle) -> Self {
+    fn custom(self, style: ButtonCustomVariant) -> Self {
-        self.with_style(ButtonStyle::Custom(style))
+        self.with_variant(ButtonVariant::Custom(style))
     }
 }
 
-impl ButtonCustomStyle {
+impl ButtonCustomVariant {
     pub fn new(cx: &WindowContext) -> Self {
         Self {
             color: cx.theme().secondary,
@@ -117,8 +117,9 @@ impl ButtonCustomStyle {
     }
 }
 
+/// The veriant of the Button.
 #[derive(Clone, Copy, PartialEq, Eq)]
-pub enum ButtonStyle {
+pub enum ButtonVariant {
     Primary,
     Secondary,
     Danger,
@@ -126,10 +127,16 @@ pub enum ButtonStyle {
     Ghost,
     Link,
     Text,
-    Custom(ButtonCustomStyle),
+    Custom(ButtonCustomVariant),
 }
 
-impl ButtonStyle {
+impl Default for ButtonVariant {
+    fn default() -> Self {
+        Self::Secondary
+    }
+}
+
+impl ButtonVariant {
     fn is_link(&self) -> bool {
         matches!(self, Self::Link)
     }
@@ -153,7 +160,7 @@ pub struct Button {
     children: Vec<AnyElement>,
     disabled: bool,
     pub(crate) selected: bool,
-    style: ButtonStyle,
+    variant: ButtonVariant,
     rounded: ButtonRounded,
     border_corners: Corners<bool>,
     border_edges: Edges<bool>,
@@ -181,7 +188,7 @@ impl Button {
             label: None,
             disabled: false,
             selected: false,
-            style: ButtonStyle::Secondary,
+            variant: ButtonVariant::default(),
             rounded: ButtonRounded::Medium,
             border_corners: Corners::all(true),
             border_edges: Edges::all(true),
@@ -232,12 +239,6 @@ impl Button {
         self
     }
 
-    /// Set the ButtonStyle
-    pub fn style(mut self, style: ButtonStyle) -> Self {
-        self.style = style;
-        self
-    }
-
     /// Set true to show the loading indicator.
     pub fn loading(mut self, loading: bool) -> Self {
         self.loading = loading;
@@ -291,9 +292,9 @@ impl Sizable for Button {
     }
 }
 
-impl ButtonStyled for Button {
+impl ButtonVariants for Button {
-    fn with_style(mut self, style: ButtonStyle) -> Self {
+    fn with_variant(mut self, variant: ButtonVariant) -> Self {
-        self.style = style;
+        self.variant = variant;
         self
     }
 }
@@ -318,7 +319,7 @@ impl InteractiveElement for Button {
 
 impl RenderOnce for Button {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
-        let style: ButtonStyle = self.style;
+        let style: ButtonVariant = self.variant;
         let normal_style = style.normal(cx);
         let icon_size = match self.size {
             Size::Size(v) => Size::Size(v * 0.75),
@@ -459,7 +460,7 @@ impl RenderOnce for Button {
     }
 }
 
-struct ButtonStyles {
+struct ButtonVariantStyle {
     bg: Hsla,
     border: Hsla,
     fg: Hsla,
@@ -467,66 +468,69 @@ struct ButtonStyles {
     shadow: bool,
 }
 
-impl ButtonStyle {
+impl ButtonVariant {
     fn bg_color(&self, cx: &WindowContext) -> Hsla {
         match self {
-            ButtonStyle::Primary => cx.theme().primary,
+            ButtonVariant::Primary => cx.theme().primary,
-            ButtonStyle::Secondary => cx.theme().secondary,
+            ButtonVariant::Secondary => cx.theme().secondary,
-            ButtonStyle::Danger => cx.theme().destructive,
+            ButtonVariant::Danger => cx.theme().destructive,
-            ButtonStyle::Outline | ButtonStyle::Ghost | ButtonStyle::Link | ButtonStyle::Text => {
+            ButtonVariant::Outline
-                cx.theme().transparent
+            | ButtonVariant::Ghost
-            }
+            | ButtonVariant::Link
-            ButtonStyle::Custom(colors) => colors.color,
+            | ButtonVariant::Text => cx.theme().transparent,
+            ButtonVariant::Custom(colors) => colors.color,
         }
     }
 
     fn text_color(&self, cx: &WindowContext) -> Hsla {
         match self {
-            ButtonStyle::Primary => cx.theme().primary_foreground,
+            ButtonVariant::Primary => cx.theme().primary_foreground,
-            ButtonStyle::Secondary | ButtonStyle::Outline | ButtonStyle::Ghost => {
+            ButtonVariant::Secondary | ButtonVariant::Outline | ButtonVariant::Ghost => {
                 cx.theme().secondary_foreground
             }
-            ButtonStyle::Danger => cx.theme().destructive_foreground,
+            ButtonVariant::Danger => cx.theme().destructive_foreground,
-            ButtonStyle::Link => cx.theme().link,
+            ButtonVariant::Link => cx.theme().link,
-            ButtonStyle::Text => cx.theme().foreground,
+            ButtonVariant::Text => cx.theme().foreground,
-            ButtonStyle::Custom(colors) => colors.foreground,
+            ButtonVariant::Custom(colors) => colors.foreground,
         }
     }
 
     fn border_color(&self, cx: &WindowContext) -> Hsla {
         match self {
-            ButtonStyle::Primary => cx.theme().primary,
+            ButtonVariant::Primary => cx.theme().primary,
-            ButtonStyle::Secondary => cx.theme().border,
+            ButtonVariant::Secondary => cx.theme().border,
-            ButtonStyle::Danger => cx.theme().destructive,
+            ButtonVariant::Danger => cx.theme().destructive,
-            ButtonStyle::Outline => cx.theme().border,
+            ButtonVariant::Outline => cx.theme().border,
-            ButtonStyle::Ghost | ButtonStyle::Link | ButtonStyle::Text => cx.theme().transparent,
+            ButtonVariant::Ghost | ButtonVariant::Link | ButtonVariant::Text => {
-            ButtonStyle::Custom(colors) => colors.border,
+                cx.theme().transparent
+            }
+            ButtonVariant::Custom(colors) => colors.border,
         }
     }
 
     fn underline(&self, _: &WindowContext) -> bool {
         match self {
-            ButtonStyle::Link => true,
+            ButtonVariant::Link => true,
             _ => false,
         }
     }
 
     fn shadow(&self, _: &WindowContext) -> bool {
         match self {
-            ButtonStyle::Primary | ButtonStyle::Secondary | ButtonStyle::Danger => true,
+            ButtonVariant::Primary | ButtonVariant::Secondary | ButtonVariant::Danger => true,
-            ButtonStyle::Custom(c) => c.shadow,
+            ButtonVariant::Custom(c) => c.shadow,
             _ => false,
         }
     }
 
-    fn normal(&self, cx: &WindowContext) -> ButtonStyles {
+    fn normal(&self, cx: &WindowContext) -> ButtonVariantStyle {
         let bg = self.bg_color(cx);
         let border = self.border_color(cx);
         let fg = self.text_color(cx);
         let underline = self.underline(cx);
         let shadow = self.shadow(cx);
 
-        ButtonStyles {
+        ButtonVariantStyle {
             bg,
             border,
             fg,
@@ -535,31 +539,31 @@ impl ButtonStyle {
         }
     }
 
-    fn hovered(&self, cx: &WindowContext) -> ButtonStyles {
+    fn hovered(&self, cx: &WindowContext) -> ButtonVariantStyle {
         let bg = match self {
-            ButtonStyle::Primary => cx.theme().primary_hover,
+            ButtonVariant::Primary => cx.theme().primary_hover,
-            ButtonStyle::Secondary | ButtonStyle::Outline => cx.theme().secondary_hover,
+            ButtonVariant::Secondary | ButtonVariant::Outline => cx.theme().secondary_hover,
-            ButtonStyle::Danger => cx.theme().destructive_hover,
+            ButtonVariant::Danger => cx.theme().destructive_hover,
-            ButtonStyle::Ghost => {
+            ButtonVariant::Ghost => {
                 if cx.theme().mode.is_dark() {
                     cx.theme().secondary.lighten(0.1).opacity(0.8)
                 } else {
                     cx.theme().secondary.darken(0.1).opacity(0.8)
                 }
             }
-            ButtonStyle::Link => cx.theme().transparent,
+            ButtonVariant::Link => cx.theme().transparent,
-            ButtonStyle::Text => cx.theme().transparent,
+            ButtonVariant::Text => cx.theme().transparent,
-            ButtonStyle::Custom(colors) => colors.hover,
+            ButtonVariant::Custom(colors) => colors.hover,
         };
         let border = self.border_color(cx);
         let fg = match self {
-            ButtonStyle::Link => cx.theme().link_hover,
+            ButtonVariant::Link => cx.theme().link_hover,
             _ => self.text_color(cx),
         };
         let underline = self.underline(cx);
         let shadow = self.shadow(cx);
 
-        ButtonStyles {
+        ButtonVariantStyle {
             bg,
             border,
             fg,
@@ -568,27 +572,27 @@ impl ButtonStyle {
         }
     }
 
-    fn active(&self, cx: &WindowContext) -> ButtonStyles {
+    fn active(&self, cx: &WindowContext) -> ButtonVariantStyle {
         let bg = match self {
-            ButtonStyle::Primary => cx.theme().primary_active,
+            ButtonVariant::Primary => cx.theme().primary_active,
-            ButtonStyle::Secondary | ButtonStyle::Outline | ButtonStyle::Ghost => {
+            ButtonVariant::Secondary | ButtonVariant::Outline | ButtonVariant::Ghost => {
                 cx.theme().secondary_active
             }
-            ButtonStyle::Danger => cx.theme().destructive_active,
+            ButtonVariant::Danger => cx.theme().destructive_active,
-            ButtonStyle::Link => cx.theme().transparent,
+            ButtonVariant::Link => cx.theme().transparent,
-            ButtonStyle::Text => cx.theme().transparent,
+            ButtonVariant::Text => cx.theme().transparent,
-            ButtonStyle::Custom(colors) => colors.active,
+            ButtonVariant::Custom(colors) => colors.active,
         };
         let border = self.border_color(cx);
         let fg = match self {
-            ButtonStyle::Link => cx.theme().link_active,
+            ButtonVariant::Link => cx.theme().link_active,
-            ButtonStyle::Text => cx.theme().foreground.opacity(0.7),
+            ButtonVariant::Text => cx.theme().foreground.opacity(0.7),
             _ => self.text_color(cx),
         };
         let underline = self.underline(cx);
         let shadow = self.shadow(cx);
 
-        ButtonStyles {
+        ButtonVariantStyle {
             bg,
             border,
             fg,
@@ -597,27 +601,27 @@ impl ButtonStyle {
         }
     }
 
-    fn selected(&self, cx: &WindowContext) -> ButtonStyles {
+    fn selected(&self, cx: &WindowContext) -> ButtonVariantStyle {
         let bg = match self {
-            ButtonStyle::Primary => cx.theme().primary_active,
+            ButtonVariant::Primary => cx.theme().primary_active,
-            ButtonStyle::Secondary | ButtonStyle::Outline | ButtonStyle::Ghost => {
+            ButtonVariant::Secondary | ButtonVariant::Outline | ButtonVariant::Ghost => {
                 cx.theme().secondary_active
             }
-            ButtonStyle::Danger => cx.theme().destructive_active,
+            ButtonVariant::Danger => cx.theme().destructive_active,
-            ButtonStyle::Link => cx.theme().transparent,
+            ButtonVariant::Link => cx.theme().transparent,
-            ButtonStyle::Text => cx.theme().transparent,
+            ButtonVariant::Text => cx.theme().transparent,
-            ButtonStyle::Custom(colors) => colors.active,
+            ButtonVariant::Custom(colors) => colors.active,
         };
         let border = self.border_color(cx);
         let fg = match self {
-            ButtonStyle::Link => cx.theme().link_active,
+            ButtonVariant::Link => cx.theme().link_active,
-            ButtonStyle::Text => cx.theme().foreground.opacity(0.7),
+            ButtonVariant::Text => cx.theme().foreground.opacity(0.7),
             _ => self.text_color(cx),
         };
         let underline = self.underline(cx);
         let shadow = self.shadow(cx);
 
-        ButtonStyles {
+        ButtonVariantStyle {
             bg,
             border,
             fg,
@@ -626,32 +630,33 @@ impl ButtonStyle {
         }
     }
 
-    fn disabled(&self, cx: &WindowContext) -> ButtonStyles {
+    fn disabled(&self, cx: &WindowContext) -> ButtonVariantStyle {
         let bg = match self {
-            ButtonStyle::Link | ButtonStyle::Ghost | ButtonStyle::Outline | ButtonStyle::Text => {
+            ButtonVariant::Link
-                cx.theme().transparent
+            | ButtonVariant::Ghost
-            }
+            | ButtonVariant::Outline
-            ButtonStyle::Primary => cx.theme().primary.opacity(0.15),
+            | ButtonVariant::Text => cx.theme().transparent,
-            ButtonStyle::Danger => cx.theme().destructive.opacity(0.15),
+            ButtonVariant::Primary => cx.theme().primary.opacity(0.15),
-            ButtonStyle::Secondary => cx.theme().secondary.opacity(1.5),
+            ButtonVariant::Danger => cx.theme().destructive.opacity(0.15),
-            ButtonStyle::Custom(style) => style.color.opacity(0.15),
+            ButtonVariant::Secondary => cx.theme().secondary.opacity(1.5),
+            ButtonVariant::Custom(style) => style.color.opacity(0.15),
         };
         let fg = match self {
-            ButtonStyle::Link | ButtonStyle::Text | ButtonStyle::Ghost => {
+            ButtonVariant::Link | ButtonVariant::Text | ButtonVariant::Ghost => {
                 cx.theme().link.grayscale()
             }
             _ => cx.theme().secondary_foreground.opacity(0.5).grayscale(),
         };
 
         let border = match self {
-            ButtonStyle::Outline => cx.theme().border.opacity(0.5),
+            ButtonVariant::Outline => cx.theme().border.opacity(0.5),
             _ => bg,
         };
 
         let underline = self.underline(cx);
         let shadow = false;
 
-        ButtonStyles {
+        ButtonVariantStyle {
             bg,
             border,
             fg,

crates/ui/src/button_group.rs

@@ -5,7 +5,7 @@ use gpui::{
 use std::{cell::Cell, rc::Rc};
 
 use crate::{
-    button::{Button, ButtonStyle, ButtonStyled},
+    button::{Button, ButtonVariant, ButtonVariants},
     Disableable, Sizable, Size,
 };
 
@@ -20,7 +20,7 @@ pub struct ButtonGroup {
 
     // The button props
     compact: Option<bool>,
-    style: Option<ButtonStyle>,
+    variant: Option<ButtonVariant>,
     size: Option<Size>,
 
     on_click: Option<Box<dyn Fn(&Vec<usize>, &mut WindowContext) + 'static>>,
@@ -40,7 +40,7 @@ impl ButtonGroup {
             base: div(),
             children: Vec::new(),
             id: id.into(),
-            style: None,
+            variant: None,
             size: None,
             compact: None,
             multiple: false,
@@ -89,9 +89,9 @@ impl Styled for ButtonGroup {
     }
 }
 
-impl ButtonStyled for ButtonGroup {
+impl ButtonVariants for ButtonGroup {
-    fn with_style(mut self, style: ButtonStyle) -> Self {
+    fn with_variant(mut self, variant: ButtonVariant) -> Self {
-        self.style = Some(style);
+        self.variant = Some(variant);
         self
     }
 }
@@ -163,7 +163,7 @@ impl RenderOnce for ButtonGroup {
                         }
                         .stop_propagation(false)
                         .when_some(self.size, |this, size| this.with_size(size))
-                        .when_some(self.style, |this, style| this.style(style))
+                        .when_some(self.variant, |this, variant| this.with_variant(variant))
                         .when_some(self.compact, |this, _| this.compact())
                         .on_click(move |_, _| {
                             state.set(Some(child_index));

crates/ui/src/clipboard.rs

@@ -6,7 +6,7 @@ use gpui::{
 };
 
 use crate::{
-    button::{Button, ButtonStyled as _},
+    button::{Button, ButtonVariants as _},
     h_flex, IconName, Sizable as _,
 };
 

crates/ui/src/dock/tab_panel.rs

@@ -10,7 +10,7 @@ use gpui::{
 use rust_i18n::t;
 
 use crate::{
-    button::{Button, ButtonStyled as _},
+    button::{Button, ButtonVariants as _},
     dock::DockItemInfo,
     h_flex,
     popup_menu::{PopupMenu, PopupMenuExt},

crates/ui/src/drawer.rs

@@ -8,7 +8,7 @@ use gpui::{
 };
 
 use crate::{
-    button::{Button, ButtonStyled as _},
+    button::{Button, ButtonVariants as _},
     h_flex,
     modal::overlay_color,
     root::ContextModal as _,

crates/ui/src/input/clear_button.rs

@@ -1,7 +1,7 @@
 use gpui::{Styled, WindowContext};
 
 use crate::{
-    button::{Button, ButtonStyled as _},
+    button::{Button, ButtonVariants as _},
     theme::ActiveTheme as _,
     Icon, IconName, Sizable as _,
 };

crates/ui/src/modal.rs

@@ -9,7 +9,7 @@ use gpui::{
 
 use crate::{
     animation::cubic_bezier,
-    button::{Button, ButtonStyled as _},
+    button::{Button, ButtonVariants as _},
     theme::ActiveTheme as _,
     v_flex, ContextModal, IconName, Sizable as _,
 };

crates/ui/src/notification.rs

@@ -9,7 +9,7 @@ use smol::Timer;
 
 use crate::{
     animation::cubic_bezier,
-    button::{Button, ButtonStyled as _},
+    button::{Button, ButtonVariants as _},
     h_flex,
     theme::ActiveTheme as _,
     v_flex, Icon, IconName, Sizable as _, StyledExt,

crates/ui/src/number_input.rs

@@ -6,7 +6,7 @@ use gpui::{
 use regex::Regex;
 
 use crate::{
-    button::{Button, ButtonStyled as _},
+    button::{Button, ButtonVariants as _},
     h_flex,
     input::{InputEvent, TextInput},
     prelude::FluentBuilder,

crates/ui/src/sidebar/mod.rs

@@ -1,5 +1,5 @@
 use crate::{
-    button::{Button, ButtonStyled},
+    button::{Button, ButtonVariants},
     h_flex,
     scroll::ScrollbarAxis,
     theme::ActiveTheme,

crates/ui/src/time/calendar.rs

@@ -9,7 +9,7 @@ use gpui::{
 use rust_i18n::t;
 
 use crate::{
-    button::{Button, ButtonStyled as _},
+    button::{Button, ButtonVariants as _},
     h_flex,
     theme::ActiveTheme,
     v_flex, Disableable as _, IconName, Selectable, Sizable, Size,

crates/ui/src/time/date_picker.rs

@@ -8,7 +8,7 @@ use gpui::{
 use rust_i18n::t;
 
 use crate::{
-    button::{Button, ButtonStyled as _},
+    button::{Button, ButtonVariants as _},
     dropdown::Escape,
     h_flex,
     input::ClearButton,