chore(badge): add min-width to small badge (#4072)

twilio-labs · Sep 17, 2024 · ae52236 · ae52236
1 parent f8a5583
commit ae52236
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/.changeset/eleven-wombats-sniff.md b/.changeset/eleven-wombats-sniff.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/badge": patch
+"@twilio-paste/core": patch
+---
+
+[Badge] add a min-width of size-base-50 to small badges to ensure badges with only one character (e.g. "1") render as a circle rather than an oval.
diff --git a/packages/paste-core/components/badge/src/Badge.tsx b/packages/paste-core/components/badge/src/Badge.tsx
@@ -29,6 +29,8 @@ export const Badge = React.forwardRef<HTMLElement, BadgeProps>(
         element={element}
         paddingX={size === "small" ? "space20" : "space30"}
         paddingY={size === "small" ? "space10" : "space20"}
+        minWidth={size === "small" ? "sizeBase50" : "size0"}
+        justifyContent="center"
         variant={variant}
         ref={ref}
         {...badgeStyles}