diff --git a/packages/styles/scss/components/button/_button.scss b/packages/styles/scss/components/button/_button.scss
index 03f15a05328..377ac607cf3 100644
--- a/packages/styles/scss/components/button/_button.scss
+++ b/packages/styles/scss/components/button/_button.scss
@@ -1,5 +1,5 @@
 /**
-* Copyright IBM Corp. 2016, 2023
+* Copyright IBM Corp. 2016, 2024
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
@@ -8,17 +8,25 @@
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/components/button' as *;
 @use '../../globals/vars' as *;
-@use '../../../../carbon-web-components/src/components/button/button';
 
 @mixin button {
   :host(#{$c4d-prefix}-button) {
-    @extend :host(#{$prefix}-button);
+    @include emit-layout-tokens();
+
+    display: inline-flex;
 
     svg {
       @extend .#{$prefix}--btn__icon;
     }
 
+    .#{$prefix}--btn {
+      flex-grow: 1;
+      max-inline-size: 100%;
+    }
+
     .#{$prefix}--btn--hidden {
       display: none;
       visibility: hidden;
diff --git a/packages/styles/scss/components/expressive-modal/_expressive-modal.scss b/packages/styles/scss/components/expressive-modal/_expressive-modal.scss
index fbb4bcf3a0a..8e70caa0624 100644
--- a/packages/styles/scss/components/expressive-modal/_expressive-modal.scss
+++ b/packages/styles/scss/components/expressive-modal/_expressive-modal.scss
@@ -81,7 +81,7 @@
   }
 
   :host(#{$c4d-prefix}-expressive-modal-close-button) {
-    @extend .#{$prefix}--modal-close-button;
+    @extend .#{$prefix}--modal-close-button !optional;
 
     .#{$prefix}--modal-close {
       position: fixed;