[EuiBadge] Add `fill` prop and light badge variants by tkajtoch · Pull Request #9306 · elastic/eui

tkajtoch · 2026-01-11T21:57:22Z

Summary

Resolves #9300

This PR adds the fill prop that controls the colors of all badge color variants. The fill = true setting results in colors matching the previous look and feel of the EuiBadge component. fill = false or unset will result in the new lighter colors being applied. The fill prop of EuiBadge behaves the same as in the EuiButton component.

Why are we making this change?

Part of the EuiBadge design update epic.

Screenshots #

Impact to users

This PR merges into the feature branch.

When the feature branch gets merged to main and released, it will result in a modified appearance of all badge colors. To get the previous (filled - more intense) look and feel, the fill = true must be set.

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Props have proper autodocs (using @default if default values are missing) and playground toggles
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately
- If applicable, added the breaking change issue label (and filled out the breaking change checklist)
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

mgadewoll · 2026-01-13T08:24:45Z

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

+  };
+
+  const base = {
+    primary: getBadgeColors(


I think we should be able to use euiButtonColor here to align with button colors same as for the filled variants.

Updated in 54e481a

mgadewoll · 2026-01-13T08:44:14Z

I noticed that we have color combinations for filled badges that don't result in enough color contrast (1:4.5). As these are using the same combinations as for buttons, we have the same issue for filled buttons as well. To be compliant according to WCAG we'd need to use black as text color 🫣

@JoseLuisGJ @ek-so What do you think, are we ok to update that?

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

ek-so · 2026-01-13T09:00:53Z

I noticed that we have color combinations for filled badges that don't result in enough color contrast (1:4.5). As these are using the same combinations as for buttons, we have the same issue for filled buttons as well. To be compliant according to WCAG we'd need to use black as text color 🫣

@JoseLuisGJ @ek-so What do you think, are we ok to update that?

Yes, I'd be ok with this, 2 reasons:

We don't change this per se — it is an existing problem, so it doesn't block this particular update
This is a known issue with current contrast checking model, which calculates colors in a way that do not count in real perceived values, and suggestions to implement a new algorithm (APCA) instead. E.g. here some of the issues described. So it seems that unless we make it reeally dark it wouldn't pass "officially". While in reality, such a dark green text that passes, for example, is almost not distinguishable from black one.

mgadewoll · 2026-01-14T09:11:54Z

This is a known issue with current contrast checking model, which calculates colors in a way that do not count in real perceived values, and suggestions to implement a new algorithm (APCA) instead. E.g. here some of the issues described. So it seems that unless we make it reeally dark it wouldn't pass "officially". While in reality, such a dark green text that passes, for example, is almost not distinguishable from black one.

@ek-so Correct, this is a known issue around perceived luminance. If at some point the APCA model becomes the underlying algorithm (under research as candidate for WCAG 3.0), this will become more "natural".

“APCA™ is the candidate contrast method for WCAG 3, and is currently in public beta. WCAG 3 is still in development and subject to changes prior to adoption.

Until then, we kinda need to follow the existing WCAG standard as that's what checks and audits use.

Considering that the perception of the color is better with white in these cases, I guess we could keep it as is for now and update if it gets flagged by audits. 🤔

# Conflicts: # packages/eui/src/components/badge/badge.styles.ts

…re applies for each `fill` prop combination

…when switching to using button color utilities

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

elasticmachine · 2026-01-21T13:43:15Z

💚 Build Succeeded

History

💚 Build #2491 succeeded 10ee5f7
💚 Build #2484 succeeded 0a33d68
💚 Build #2389 succeeded 4b1f5ce

cc @tkajtoch

mgadewoll

🟢 The code changes are LGTM and the badges render correctly with and without fill prop. Thanks for the updates! 🎉

elasticmachine · 2026-01-21T13:58:25Z

💚 Build Succeeded

Buildkite Build
Commit: a42391b

History

💚 Build #5647 succeeded 10ee5f7
💔 Build #5641 failed 0a33d68
💔 Build #5573 failed 4b1f5ce

cc @tkajtoch

ek-so

Asked Tomasz to add hover states as per design, which will be done separately. Other than that — lgtm!

`112.0.0` ⏩ `112.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes - Update `span_links_badge.tsx` conditional `onClick` props on `EuiBadge` to satisfy TypeScript 93d7fae - Update snapshots 24c2f9a ## Package updates ### `@elastic/eui` [`v112.1.0`](https://github.com/elastic/eui/releases/tag/v112.1.0) - Updated `timeline` icon glyph ([#9331](elastic/eui#9331)) - Updated `EuiContextMenu` panels to allow passing `data-test-subj`, `aria-label`, `className` and `css` props ([#9323](elastic/eui#9323)) - Added "zoom in" functionality to time window buttons in `EuiSuperDatePicker` ([#9325](elastic/eui#9325)) - Added `displayName` to `EuiButton`, `EuiButtonEmpty`, `EuiDescriptionList` and its sub-components, `EuiEmptyPrompt`, `EuiFlexGrid`, `EuiFlexItem`, `EuiIcon`, `EuiImage`, `EuiLoadingLogo`, `EuiPageSection`, `EuiPageSidebar`, `EuiPageTemplate` and its sub-components and `EuiPanel` ([#9324](elastic/eui#9324)) - Added `fill` prop (defaults to `false`) to `EuiBadge` component that controls whether the badge should use filled or non-filled (less intense) colors. By default, badges will now render as the non-filled variant. ([#9306](elastic/eui#9306)) - Updated EuiBadge design to have rounded corners and improved paddings ([#9302](elastic/eui#9302)) **Bug fixes** - Fixed non-virtualized `EuiSelectable` throwing SyntaxError when selecting an option ([#9326](elastic/eui#9326)) - Fixed an issue where `push` flyouts in a stacked layout calculated the content offset based on the hidden main flyout's width instead of the visible child flyout's width ([#9322](elastic/eui#9322)) ### @elastic/eui-theme-borealis [`v5.4.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/eui-theme-borealis/changelogs/CHANGELOG_2026.md#v540) - Updated `badgeBackground` color token value to equal `backgroundFilledText` ([#9306](elastic/eui#9306)) ### @elastic/eui-docusaurus-theme [`v2.2.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/docusaurus-theme/changelogs/CHANGELOG_2026.md#v220) - Added `extraFiles` prop to the `Demo` component. It allows to pass extra files that will be added to the Codesandbox instance. ([#9317](elastic/eui#9317)) - Updated the `IMPORT_REGEX` to include relative imports so that all imports are removed from the snippet. All imported references have to be passed to `Demo` in the `scope` prop. ([#9317](elastic/eui#9317)) --------- Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>

`112.0.0` ⏩ `112.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes - Update `span_links_badge.tsx` conditional `onClick` props on `EuiBadge` to satisfy TypeScript 93d7fae - Update snapshots 24c2f9a ## Package updates ### `@elastic/eui` [`v112.1.0`](https://github.com/elastic/eui/releases/tag/v112.1.0) - Updated `timeline` icon glyph ([elastic#9331](elastic/eui#9331)) - Updated `EuiContextMenu` panels to allow passing `data-test-subj`, `aria-label`, `className` and `css` props ([elastic#9323](elastic/eui#9323)) - Added "zoom in" functionality to time window buttons in `EuiSuperDatePicker` ([elastic#9325](elastic/eui#9325)) - Added `displayName` to `EuiButton`, `EuiButtonEmpty`, `EuiDescriptionList` and its sub-components, `EuiEmptyPrompt`, `EuiFlexGrid`, `EuiFlexItem`, `EuiIcon`, `EuiImage`, `EuiLoadingLogo`, `EuiPageSection`, `EuiPageSidebar`, `EuiPageTemplate` and its sub-components and `EuiPanel` ([elastic#9324](elastic/eui#9324)) - Added `fill` prop (defaults to `false`) to `EuiBadge` component that controls whether the badge should use filled or non-filled (less intense) colors. By default, badges will now render as the non-filled variant. ([elastic#9306](elastic/eui#9306)) - Updated EuiBadge design to have rounded corners and improved paddings ([elastic#9302](elastic/eui#9302)) **Bug fixes** - Fixed non-virtualized `EuiSelectable` throwing SyntaxError when selecting an option ([elastic#9326](elastic/eui#9326)) - Fixed an issue where `push` flyouts in a stacked layout calculated the content offset based on the hidden main flyout's width instead of the visible child flyout's width ([elastic#9322](elastic/eui#9322)) ### @elastic/eui-theme-borealis [`v5.4.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/eui-theme-borealis/changelogs/CHANGELOG_2026.md#v540) - Updated `badgeBackground` color token value to equal `backgroundFilledText` ([elastic#9306](elastic/eui#9306)) ### @elastic/eui-docusaurus-theme [`v2.2.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/docusaurus-theme/changelogs/CHANGELOG_2026.md#v220) - Added `extraFiles` prop to the `Demo` component. It allows to pass extra files that will be added to the Codesandbox instance. ([elastic#9317](elastic/eui#9317)) - Updated the `IMPORT_REGEX` to include relative imports so that all imports are removed from the snippet. All imported references have to be passed to `Demo` in the `scope` prop. ([elastic#9317](elastic/eui#9317)) --------- Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>

tkajtoch requested a review from a team as a code owner January 11, 2026 21:57

tkajtoch self-assigned this Jan 11, 2026

tkajtoch requested a review from ek-so January 11, 2026 21:57

mgadewoll reviewed Jan 13, 2026

View reviewed changes

packages/eui/src/components/badge/badge.stories.tsx Show resolved Hide resolved

packages/eui/src/components/badge/badge.stories.tsx Outdated Show resolved Hide resolved

mgadewoll mentioned this pull request Jan 14, 2026

[EuiBadge] Add light badge variants via the fill prop #9300 #9309

Closed

14 tasks

tkajtoch added 8 commits January 20, 2026 14:13

feat(EuiBadge): Add fill prop and light badge colors

3534c2a

# Conflicts: # packages/eui/src/components/badge/badge.styles.ts

feat(EuiBadge): Update badgeBackground color value

19d803f

chore(EuiBadge): update fill prop JSDoc default value

c55d708

chore(EuiBadge): remove unused internal utility function

a3632de

test(EuiBadge): add color assertions to ensure correct color values a…

057c638

…re applies for each `fill` prop combination

chore(EuiBadge): fix the kitchen sink story

e137d53

chore: update VRT references due to updated badge padding

81a9bf5

chore: add EuiBadge kitchen sink story VRT references

0a33d68

tkajtoch force-pushed the feat/eui-badge-fill-prop branch from 4b1f5ce to 0a33d68 Compare January 20, 2026 13:47

tkajtoch added 2 commits January 21, 2026 12:02

feat(EuiBadge): use euiButtonColor for base badge styles

54e481a

test(EuiBadge): fix color value assertions to match the changes made …

10ee5f7

…when switching to using button color utilities

mgadewoll reviewed Jan 21, 2026

View reviewed changes

packages/eui/src/components/badge/badge.styles.ts Show resolved Hide resolved

fix(EuiBadge): apply missing high contrast border styles

a42391b

mgadewoll approved these changes Jan 21, 2026

View reviewed changes

ek-so approved these changes Jan 21, 2026

View reviewed changes

tkajtoch merged commit 2bcc4ac into elastic:feat/eui-badge-updates Jan 21, 2026
4 checks passed

acstll mentioned this pull request Jan 26, 2026

Upgrade EUI to v112.1.0 elastic/kibana#250407

Merged

This was referenced Feb 9, 2026

[DO NOT MERGE][EUI] Form append/prepend updates elastic/kibana#248805

Closed

Test in SLO elastic/kibana#251727

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiBadge] Add `fill` prop and light badge variants#9306

[EuiBadge] Add `fill` prop and light badge variants#9306
tkajtoch merged 11 commits intoelastic:feat/eui-badge-updatesfrom
tkajtoch:feat/eui-badge-fill-prop

tkajtoch commented Jan 11, 2026

Uh oh!

mgadewoll Jan 13, 2026

Uh oh!

tkajtoch Jan 21, 2026

Uh oh!

mgadewoll commented Jan 13, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

ek-so commented Jan 13, 2026

Uh oh!

mgadewoll commented Jan 14, 2026

Uh oh!

Uh oh!

elasticmachine commented Jan 21, 2026

Uh oh!

mgadewoll left a comment

Uh oh!

elasticmachine commented Jan 21, 2026

Uh oh!

ek-so left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

tkajtoch commented Jan 11, 2026

Summary

Why are we making this change?

Screenshots #

Impact to users

QA

General checklist

Uh oh!

mgadewoll Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

tkajtoch Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

mgadewoll commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ek-so commented Jan 13, 2026

Uh oh!

mgadewoll commented Jan 14, 2026

Uh oh!

Uh oh!

elasticmachine commented Jan 21, 2026

💚 Build Succeeded

History

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Jan 21, 2026

💚 Build Succeeded

History

Uh oh!

ek-so left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mgadewoll commented Jan 13, 2026 •

edited

Loading