[Feat] Add EuiBanner component

[mgadewoll]

Summary

This PR adds a new EuiBanner component.
This component is based on the previous Kibana custom implementation of AnnouncementBanner (PR)

API Changes

prop	required	type	default value	description
title	required	string	-	Banner title
text	-	ReactNode	-	Banner body text. Avoid using for complex non-text content.
media	required	ReactNode	-	Illustration slot. Use to pass in an image or svg.
size	-	s | m	-	Defines the banner sizing and adjusts breakpoint behavior
color	-	highlighted | plain	highlighted	Defines the banner color variant.
actionProps	-	{ primary: EuiBannerActionPrimaryProps, secondary: EuiBannerActionSecondaryProps }	undefined	Use to render action buttons. Standalone secondary buttons are not supported.
onDismiss	-	() => void	undefined	If provided, a dismiss button will be rendered.
dismissButtonProps	-	EuiButtonIconProps	undefined	Props to pass to the dismiss EuiButtonIcon
headingElement	-	h2 | h3 | h4 | h5 | h6	h2	Defines the rendered heading DOM element for the title
announceOnMount	-	boolean	false	When set to true, the content is announced by screen readers on mount.

Screenshots

size	light	dark
m
s

Impact Assessment

Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.

• 🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?
• 💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.
• 🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).
• 🔧 Hard to integrate — If changes require substantial updates to Kibana, please stage the changes and link them here.

Impact level: 🟢 None
This is a new component that's not used so far.

ℹ️ Kibana is using the custom AnnouncementBanner component, which we should update to return EuiBanner instead.

Release Readiness

• Documentation: EuiBanner
• Figma: Banner specs
• Migration guide: {steps or link, for breaking/visual changes or deprecations}
• Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}

QA instructions for reviewer

💻 EuiBanner storybook

• verify EuiBanner matches design specs
• verify EuiBanner props work as expected

Checklist before marking Ready for Review

• Filled out all sections above
• QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
• QA: Tested in CodeSandbox and Kibana
• QA: Tested docs changes
• Tests: Added/updated Jest, Cypress, and VRT
• Changelog: Added changelog entry
• Breaking changes: Added breaking change label (if applicable)

Reviewer checklist

• Approved Impact Assessment — Acceptable to merge given the consumer impact.
• Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

[Copilot]

Pull request overview

Adds a new EuiBanner announcement component to EUI, along with Storybook/docs coverage and i18n token wiring, to support full-width promotional/informational messaging similar to Kibana’s prior AnnouncementBanner.

Changes:

• Introduces EuiBanner component implementation, styles, Storybook stories, and RTL unit tests
• Adds new docs page for Banner and exposes the component via the public components index
• Updates i18n tokens and adds a changelog entry

Reviewed changes

Copilot reviewed 8 out of 17 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
packages/website/docs/components/display/banner.mdx	Adds EuiBanner documentation, usage examples, and prop table
packages/eui/src/components/index.ts	Exports the new banner component entry point
packages/eui/src/components/banner/index.ts	Public export surface for EuiBanner and its props
packages/eui/src/components/banner/banner.tsx	Implements EuiBanner UI, actions, dismiss, and live announcement behavior
packages/eui/src/components/banner/banner.styles.ts	Emotion styles, including container-query based responsive layouts
packages/eui/src/components/banner/banner.stories.tsx	Storybook stories and interactive playground scenarios
packages/eui/src/components/banner/banner.test.tsx	RTL unit tests for rendering, props, actions, dismiss, and live region behavior
packages/eui/i18ntokens.json	Adds i18n token for the dismiss button aria-label (plus regen reordering)
packages/eui/changelogs/upcoming/9673.md	Changelog entry for new component

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: a0ca047

History

• 💚 Build #6546 succeeded d786c28
• 💔 Build #6542 failed d73c61e

cc @mgadewoll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: a0ca047
• Documentation website
• Storybook

History

• 💚 Build #3599 succeeded d786c28
• 💚 Build #3595 succeeded d73c61e
• 💚 Build #3594 succeeded 69eee87

cc @mgadewoll