[EuiBadge] Update styles to match latest design changes #9302

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

tkajtoch merged 9 commits into elastic:feat/eui-badge-updates from tkajtoch:feat/eui-badge-styles-update

Jan 12, 2026

...ui/.loki/reference/chrome_desktop_Display_EuiBadge_EuiBadgeGroup_Playground.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

.../eui/.loki/reference/chrome_desktop_Display_EuiBadge_EuiBadge_Custom_Colors.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...ges/eui/.loki/reference/chrome_desktop_Display_EuiBadge_EuiBadge_Playground.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...ki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_High_Contrast.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

....loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_Playground.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Custom_Matcher.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

.../reference/chrome_desktop_Forms_EuiComboBox_Icons_And_Many_Options_Selected.png

tkajtoch marked this conversation as resolved.

Show resolved Hide resolved

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

.../eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Playground.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Row_Height_Auto.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...rome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Playground.png

tkajtoch marked this conversation as resolved.

Show resolved Hide resolved

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...i/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Playground.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...erence/chrome_desktop_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...i/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

.../reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Header_Visibility.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...s/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...eference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

.../chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...erence/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png

...rence/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Row_Classes.png

...ence/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png

...sktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png

...ontent_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png

...sktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png

...hrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png

...ome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png

...me_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png

...sktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png

...hrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png

...op_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png

...bular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png

...eui/.loki/reference/chrome_mobile_Display_EuiBadge_EuiBadgeGroup_Playground.png

...s/eui/.loki/reference/chrome_mobile_Display_EuiBadge_EuiBadge_Custom_Colors.png

...ages/eui/.loki/reference/chrome_mobile_Display_EuiBadge_EuiBadge_Playground.png

...oki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_High_Contrast.png

.../.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_Playground.png

packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Custom_Matcher.png

packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png

...i/reference/chrome_mobile_Forms_EuiComboBox_Icons_And_Many_Options_Selected.png

...s/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png

packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png

packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Row_Height_Auto.png

...hrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Playground.png

...ui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Playground.png

...ference/chrome_mobile_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png

packages/eui/changelogs/upcoming/9302.md

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- Updated EuiBadge design to have rounded corners and improved paddings

packages/eui/src/components/badge/badge.stories.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -6,9 +6,13 @@ @@
      * Side Public License, v 1.
      */
+    import React from 'react';
     import type { Meta, StoryObj } from '@storybook/react';
+    import { action } from '@storybook/addon-actions';
     import { EuiBadge, EuiBadgeProps, COLORS } from './badge';
+    import { EuiBadgeGroup } from './badge_group';
+    import { EuiFlexGroup } from '../flex';
     const meta: Meta<EuiBadgeProps> = {
       title: 'Display/EuiBadge/EuiBadge',
@@ Expand Down Expand Up / @@ -50,3 +54,42 @@ export const CustomColors: Story = { @@
         color: '#0000FF',
       },
     };
+    const KitchenSinkVariantRow = (props: Pick<EuiBadgeProps, 'color'>) => (
+      <EuiBadgeGroup>
+        <EuiBadge {...props}>Badge</EuiBadge>
+        <EuiBadge {...props} iconType="check">
+          Badge
+        </EuiBadge>
+        <EuiBadge
+          {...props}
+          iconType="cross"
+          iconSide="right"
+          iconOnClick={action('iconOnClick')}
+          iconOnClickAriaLabel="A dummy action icon"
+        >
+          Badge with iconOnClick
+        </EuiBadge>
+        <EuiBadge {...props} href="#">
+          Badge with href
+        </EuiBadge>
+        <EuiBadge {...props} iconType="check" children={undefined} />
+      </EuiBadgeGroup>
+    );
+    export const KitchenSink: Story = {
+      parameters: {
+        controls: {
+          disable: true,
+        },
+      },
+      render() {
+        return (
+          <EuiFlexGroup gutterSize="m" direction="column">
+            {COLORS.map((color, index) => (
+              <KitchenSinkVariantRow color={color} key={index} />
+            ))}
+          </EuiFlexGroup>
+        );
+      },
+    };

packages/eui/src/components/badge/badge.styles.ts

-Original file line number
+Diff line change
@@ Expand Up @@
         --euiBadgeBackgroundColor: ${colors.backgroundColor};
       `;
+      const inlinePadding = mathWithUnits(
+        // Account for the (usually transparent) border so that the visual
+        // padding is of size s
+        [euiTheme.size.s, euiTheme.border.width.thin],
+        (size, borderWidth) => size - borderWidth
+      );
       return {
         euiBadge: css`
           display: inline-block;
           vertical-align: middle;
-          ${logicalShorthandCSS('padding', `0 ${euiTheme.size.s}`)}
+          ${logicalShorthandCSS('padding', `0 ${inlinePadding}`)}
           ${logicalCSS('max-width', '100%')}
           font-size: ${euiFontSize(euiThemeContext, 'xs').fontSize};
           line-height: ${mathWithUnits(
@@ Expand All @@
           text-decoration: none;
           cursor: inherit;
           border: ${euiTheme.border.width.thin} solid transparent;
-          border-radius: ${mathWithUnits(
-            euiTheme.border.radius.medium,
-            (x) => x / 2
-          )};
+          /* border radius is intentionally larger to protect against external
+             customizations that might affect badge height */
+          border-radius: ${euiTheme.size.l};
           /* The badge will only ever be as wide as its content
              So, make the text left aligned to ensure all badges line up the same */
           ${logicalTextAlignCSS('left')}
@@ Expand Down Expand Up @@
             ${logicalCSS('margin-left', euiTheme.size.xs)}
           }
         `,
+        iconOnly: css`
+          padding-inline: ${mathWithUnits(
+            // Account for the border
+            [euiTheme.size.xs, euiTheme.border.width.thin],
+            (size, borderWidth) => size - borderWidth
+          )};
+        `,
         clickable: css`
           &:not(:disabled) {
             &:hover,
@@ Expand Down Expand Up @@
         text: {
           euiBadge__text: css`
             ${euiTextTruncate()}
+            padding-inline: ${euiTheme.size.xxs};
             cursor: inherit;
           `,
           clickable: css`
@@ Expand All @@
           euiBadge__icon: css``,
           right: css`
             &:not(:only-child) {
-              ${logicalCSS('margin-left', euiTheme.size.xs)}
+              ${logicalCSS('margin-left', euiTheme.size.xxs)}
             }
           `,
           left: css`
             &:not(:only-child) {
-              ${logicalCSS('margin-right', euiTheme.size.xs)}
+              ${logicalCSS('margin-right', euiTheme.size.xxs)}
             }
           `,
         },
@@ Expand All @@
             }
           `,
           right: css`
-            ${logicalCSS('margin-left', euiTheme.size.xs)}
+            ${logicalCSS('margin-left', euiTheme.size.xxs)}
           `,
           left: css`
-            ${logicalCSS('margin-right', euiTheme.size.xs)}
+            ${logicalCSS('margin-right', euiTheme.size.xxs)}
           `,
         },
@@ Expand Down @@

packages/eui/src/components/badge/badge.test.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -9,9 +9,11 @@ @@
     import React from 'react';
     import { shouldRenderCustomStyles } from '../../test/internal';
     import { requiredProps } from '../../test/required_props';
-    import { render } from '../../test/rtl';
+    import { render, renderHook } from '../../test/rtl';
+    import { useEuiTheme } from '../../services';
     import { EuiBadge, COLORS, ICON_SIDES } from './badge';
+    import { mathWithUnits, UseEuiTheme } from '@elastic/eui-theme-common';
     describe('EuiBadge', () => {
       shouldRenderCustomStyles(
@@ Expand Down Expand Up / @@ -215,4 +217,38 @@ describe('EuiBadge', () => { @@
           });
         });
       });
+      describe('styles', () => {
+        let theme: UseEuiTheme;
+        beforeAll(() => {
+          theme = renderHook(useEuiTheme).result.current;
+        });
+        it('applies correct sizing styles to the main element', () => {
+          const { container } = render(<EuiBadge>Badge</EuiBadge>);
+          expect(container.firstChild).toHaveStyleRule('padding-block', '0');
+          expect(container.firstChild).toHaveStyleRule(
+            'padding-inline',
+            mathWithUnits(
+              [theme.euiTheme.size.s, theme.euiTheme.border.width.thin],
+              (size, borderWidth) => size - borderWidth
+            )
+          );
+        });
+        it('applies custom sizing styles to the main element when rendering an icon-only variant', () => {
+          const { container } = render(<EuiBadge iconType="gear" />);
+          expect(container.firstChild).toHaveStyleRule('padding-block', '0');
+          expect(container.firstChild).toHaveStyleRule(
+            'padding-inline',
+            mathWithUnits(
+              [theme.euiTheme.size.xs, theme.euiTheme.border.width.thin],
+              (size, borderWidth) => size - borderWidth
+            )
+          );
+        });
+      });
     });

packages/eui/src/components/badge/badge.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
       const isHrefValid = !href || validateHref(href);
       const isDisabled = _isDisabled || !isHrefValid;
       const isNamedColor = COLORS.includes(color as BadgeColor);
+      const isIconOnly = !children && !!iconType;
       const euiTheme = useEuiTheme();
       const customColorStyles = useMemo(() => {
@@ Expand Down Expand Up @@
       const styles = useEuiMemoizedStyles(euiBadgeStyles);
       const cssStyles = [
         styles.euiBadge,
+        isIconOnly && styles.iconOnly,
         ...(isDisabled
           ? [styles.disabled]
           : [
@@ Expand Down Expand Up @@
           optionalIcon = (
             <EuiIcon
               type={iconType}
-              size={children ? 's' : 'm'}
+              size="s"
               className="euiBadge__icon"
               css={iconCssStyles}
               color="inherit" // forces the icon to inherit its parent color
@@ Expand Down @@

...eui/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap

-Original file line number
+Diff line change
@@ Expand Up @@
                   <span
                     aria-hidden="true"
-                    class="euiBadge euiSelectableListItem__onFocusBadge emotion-euiBadge-hollow"
+                    class="euiBadge euiSelectableListItem__onFocusBadge emotion-euiBadge-iconOnly-hollow"
                   >
                     <span
                       class="euiBadge__content emotion-euiBadge__content"
@@ Expand Down @@

...rc/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap

-Original file line number
+Diff line change
@@ Expand Up / @@ -349,7 +349,7 @@ exports[`EuiSelectableListItem props isFocused 1`] = ` @@
           <span
             aria-hidden="true"
-            class="euiBadge euiSelectableListItem__onFocusBadge emotion-euiBadge-hollow"
+            class="euiBadge euiSelectableListItem__onFocusBadge emotion-euiBadge-iconOnly-hollow"
           >
             <span
               class="euiBadge__content emotion-euiBadge__content"
@@ Expand Down Expand Up @@
                 <span
                   aria-hidden="true"
-                  class="euiBadge euiSelectableListItem__onFocusBadge emotion-euiBadge-hollow"
+                  class="euiBadge euiSelectableListItem__onFocusBadge emotion-euiBadge-iconOnly-hollow"
                 >
                   <span
                     class="euiBadge__content emotion-euiBadge__content"
@@ Expand Down @@