fix: avoid text overflowing button that is too small

nl-design-system · Dec 26, 2024 · 943889e · 943889e
1 parent 70ae416
commit 943889e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/.changeset/popular-singers-own.md b/.changeset/popular-singers-own.md
@@ -0,0 +1,6 @@
+---
+"@utrecht/button-css": patch
+"@utrecht/button-react": patch
+---
+
+Fix Button to avoid text overflowing button that is too small.
diff --git a/components/button/src/_mixin.scss b/components/button/src/_mixin.scss
@@ -231,8 +231,8 @@
   justify-content: center;
   line-height: var(--_utrecht-button-line-height);
   max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
-  min-block-size: var(--utrecht-button-min-block-size, 44px);
-  min-inline-size: var(--utrecht-button-min-inline-size, 44px);
+  min-block-size: max(var(--utrecht-button-min-block-size, 44px), fit-content);
+  min-inline-size: max(var(--utrecht-button-min-inline-size, 44px), fit-content);
   padding-block-end: var(--utrecht-button-padding-block-end);
   padding-block-start: var(--utrecht-button-padding-block-start);
   padding-inline-end: var(--utrecht-button-padding-inline-end);