fix: center alligned ghost icon button (#18503)

* fix: center alligned ghost icon button * fix: expressive states as well * fix: padding issue * fix: expressive state
carbon-design-system · Feb 20, 2025 · 62b5c1e · 62b5c1e
1 parent 9883920
commit 62b5c1e
Showing 1 changed file with 16 additions and 3 deletions.
diff --git a/packages/web-components/src/components/button/button.scss b/packages/web-components/src/components/button/button.scss
@@ -100,9 +100,22 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-button[kind='ghost']:hover) .#{$prefix}--btn--ghost,
-:host(#{$prefix}-button[kind='ghost']) .#{$prefix}--btn--ghost:active {
-  outline: none;
+:host(#{$prefix}-button[kind='ghost']) {
+  .#{$prefix}--btn--ghost {
+    &:hover,
+    &:active {
+      outline: none;
+    }
+
+    &.#{$prefix}--btn--icon-only {
+      padding-block-start: 0;
+
+      &.#{$prefix}--btn--selected,
+      &.#{$prefix}--btn--expressive {
+        padding: $spacing-03;
+      }
+    }
+  }
 }
 
 :host(#{$prefix}-button-set),