elastic · maryam-saeidi · Feb 19, 2026 · Feb 19, 2026
diff --git a/...creenshots/all.test.ts-snapshots/baselines/metric-alpha/layout-chrome-linux.png b/...creenshots/all.test.ts-snapshots/baselines/metric-alpha/layout-chrome-linux.png
diff --git a/...tion/with-default-secondary-and-after-secondary-label-position-chrome-linux.png b/...tion/with-default-secondary-and-after-secondary-label-position-chrome-linux.png
diff --git a/...ion/with-default-secondary-and-before-secondary-label-position-chrome-linux.png b/...ion/with-default-secondary-and-before-secondary-label-position-chrome-linux.png
diff --git a/...ith-default-secondary-metric-with-badge-and-no-secondary-label-chrome-linux.png b/...ith-default-secondary-metric-with-badge-and-no-secondary-label-chrome-linux.png
diff --git a/...-default-secondary-metric-with-no-badge-and-no-secondary-label-chrome-linux.png b/...-default-secondary-metric-with-no-badge-and-no-secondary-label-chrome-linux.png
diff --git a/...ration/with-titles-at-the-top-center-aligned-and-a-metric-icon-chrome-linux.png b/...ration/with-titles-at-the-top-center-aligned-and-a-metric-icon-chrome-linux.png
diff --git a/...uration/with-value-at-the-top-center-aligned-and-a-metric-icon-chrome-linux.png b/...uration/with-value-at-the-top-center-aligned-and-a-metric-icon-chrome-linux.png
diff --git a/...ric/should-render-metric-with-value-on-top-using-fit-font-mode-chrome-linux.png b/...ric/should-render-metric-with-value-on-top-using-fit-font-mode-chrome-linux.png
diff --git a/...shots/metric/should-use-restrictive-breakpoint-at-149px-height-chrome-linux.png b/...shots/metric/should-use-restrictive-breakpoint-at-149px-height-chrome-linux.png
diff --git a/packages/charts/src/chart_types/metric/renderer/dom/_badge.scss b/packages/charts/src/chart_types/metric/renderer/dom/_badge.scss
@@ -11,11 +11,11 @@ $echBadgeTextColor: #07101f;
   flex-shrink: 0;
   flex-grow: 0;
 
-  padding-block: 0px;
-  padding-inline: 8px;
+  padding-block: 2px;
+  padding-inline: 10px;
 
   border: 1px solid transparent;
-  border-radius: 2px;
+  border-radius: 9999px;
 
   font-size: inherit;
   line-height: inherit;

diff --git a/packages/charts/src/chart_types/metric/renderer/dom/badge.tsx b/packages/charts/src/chart_types/metric/renderer/dom/badge.tsx
@@ -16,6 +16,9 @@ import type { Color } from '../../../../common/colors';
 /** @internal */
 export const BADGE_BORDER = 1;
 
+/** @internal */
+export const BADGE_PADDING_BLOCK = 2;
+
 const ICON_MARGIN = 4;
 
 interface BadgeProps {

diff --git a/packages/charts/src/chart_types/metric/renderer/dom/text_measurements.tsx b/packages/charts/src/chart_types/metric/renderer/dom/text_measurements.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { BADGE_BORDER } from './badge';
+import { BADGE_BORDER, BADGE_PADDING_BLOCK } from './badge';
 import type { TextParts } from './text_processing';
 import { getTextParts } from './text_processing';
 import { DEFAULT_FONT_FAMILY } from '../../../../common/default_theme_attributes';
@@ -308,7 +308,7 @@ function computeMetricTextLayout(
 
   // If there is a badge, we add the padding to the extra height
   const hasBadge = !!(datum?.extra && 'badgeColor' in datum?.extra && datum?.extra?.badgeColor);
-  const badgeHeight = hasBadge ? BADGE_BORDER * 2 : 0;
+  const badgeHeight = hasBadge ? (BADGE_BORDER + BADGE_PADDING_BLOCK) * 2 : 0;
   // We assume that the extra element is taking one line
   const extraHeight = sizes.extraFontSize * LINE_HEIGHT + badgeHeight;
   const valueHeight = sizes.valueFontSize * LINE_HEIGHT;