[EuiToast][EuiGlobalToastList] UI enhancements

[mgadewoll]

Important

This PR merges into a feature branch.

Summary

This PR updates EuiToast to implement new design specs (Figma).

API Changes

component	prop	change	description
EuiToast	text	Added	Main body text. Use with inline text or basic text elements. Don't use with other custom content.
EuiToast	actionProps	Added	Renders a primary and secondary action button. Secondary actions are only rendered if a primary one is passed as well.
EuiToast	animationMs	Added	If provided, results in the decor element animating as timer progress bar
EuiGlobalToastList	showNotificationBadge	Added	If provided, renders a badge indicating the toast list length

Screenshots

Before	After

• with animationMs

Screen.Recording.2026-05-29.at.12.07.10.mov

• with showNotificationBadge

Screen.Recording.2026-05-29.at.16.23.18.mov

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: 🟢 Low - 🟡 Moderate
Due to the DOM structure changes and updated test selectors, the component might trigger test failures (snapshots and potential tests checking specific DOM structures).

Release Readiness

• Documentation: {link to docs page(s)}
• Figma: link
• 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

• verify the EuiToast changes match design specs
• verify that if no iconType is passed, default icons (EuiNotificationIcon) are rendered that match the color
• verify that actionProps can be applied and render primary and secondary action buttons
• verify that showNotificationBadge on EuiGlobalToastList applies correctly, rendering a EuiNotificationBadge showing the list length
• verify that animationMs can be applied and if set renders an animated decor loading bar.
• review the updated EUI docs page

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

This PR updates EuiToast (and related docs/infrastructure) to match new design specs by introducing a new visual structure with default notification icons, optional body text, optional actions, and an optional progress-bar animation driven by a toast lifetime.

Changes:

• Added text, actionProps, and animationMs to EuiToast, plus updated styling/DOM structure and Storybook stories.
• Added internal EuiNotificationIcon (and icon compilation + Jest mocking support) and switched EuiToast/EuiCallOut to default notification icons by color.
• Updated documentation pages and snapshots to reflect the new APIs/markup.

Reviewed changes

Copilot reviewed 40 out of 84 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
packages/website/docs/components/display/toast/index.mdx	Updates toast docs to use text/actionProps and new color guidance.
packages/website/docs/components/display/toast/_guidelines.mdx	Updates toast guidelines examples to use actionProps and default icons.
packages/website/docs/components/display/callout.mdx	Updates callout docs examples to prefer text/actionProps and new visuals.
packages/eui/src/components/toast/types.ts	Extracts toast color constants/types.
packages/eui/src/components/toast/toast.tsx	Implements new EuiToast layout, default notification icons, actions, and animation CSS vars.
packages/eui/src/components/toast/toast.test.tsx	Updates/expands toast unit tests for new props and default icons.
packages/eui/src/components/toast/toast.styles.ts	Reworks toast styling (decor bar/progress animation, layout, dismiss button).
packages/eui/src/components/toast/toast.stories.tsx	Updates toast stories and adds new stories (actions, animation, kitchen sink).
packages/eui/src/components/toast/toast_action.tsx	Adds shared action rendering for toast primary/secondary buttons.
packages/eui/src/components/toast/global_toast_list.tsx	Wires toast lifetime into animationMs for the decor/progress bar.
packages/eui/src/components/toast/global_toast_list.styles.ts	Adds hover-based pausing of toast progress animation.
packages/eui/src/components/toast/snapshots/toast.test.tsx.snap	Updates snapshots for the new toast markup/styles.
packages/eui/src/components/toast/snapshots/global_toast_list.test.tsx.snap	Updates snapshots for global toast list markup/styles.
packages/eui/src/components/page/page_header/page_header_content.stories.tsx	Updates callout usage in page header stories to match new callout behavior.
packages/eui/src/components/notification_icon/svgs/warning_static.svg	Adds new notification icon SVG asset.
packages/eui/src/components/notification_icon/svgs/info_fill.svg	Adds new notification icon SVG asset.
packages/eui/src/components/notification_icon/notification_icon.tsx	Adds internal EuiNotificationIcon component and icon mapping.
packages/eui/src/components/notification_icon/notification_icon.testenv.tsx	Adds Jest testenv shim for EuiNotificationIcon.
packages/eui/src/components/notification_icon/notification_icon.styles.tsx	Adds styling for notification icon sizing.
packages/eui/src/components/notification_icon/notification_icon.stories.tsx	Adds Storybook stories for EuiNotificationIcon.
packages/eui/src/components/notification_icon/assets/warning_static.tsx	Adds generated notification icon React asset.
packages/eui/src/components/notification_icon/assets/info_fill.tsx	Adds generated notification icon React asset.
packages/eui/src/components/form/snapshots/form.test.tsx.snap	Updates snapshots impacted by callout DOM/styling changes.
packages/eui/src/components/flyout/flyout.styles.ts	Removes callout padding override in flyout banner (callout now owns padding).
packages/eui/src/components/flyout/flyout.stories.tsx	Updates flyout story banner callout usage to new API/structure.
packages/eui/src/components/flyout/flyout_body.styles.ts	Adjusts flyout banner styling for new callout layout.
packages/eui/src/components/call_out/types.ts	Extracts callout color/size/heading constants/types.
packages/eui/src/components/call_out/call_out.tsx	Implements new callout layout with default notification icons and text/actionProps.
packages/eui/src/components/call_out/call_out.test.tsx	Updates/expands callout unit tests for new behavior and legacy normalization.
packages/eui/src/components/call_out/call_out.styles.ts	Reworks callout styling with container queries, actions layout, and new decor.
packages/eui/src/components/call_out/call_out.stories.tsx	Updates callout stories and adds more scenarios (actions, kitchen sinks, etc.).
packages/eui/src/components/call_out/call_out_action.tsx	Adds shared action rendering for callout primary/secondary buttons.
packages/eui/src/components/call_out/snapshots/call_out.test.tsx.snap	Updates snapshots for the new callout markup/styles.
packages/eui/scripts/jest/setup/mocks.js	Adds Jest module mock for EuiNotificationIcon.
packages/eui/scripts/jest/mocks/icon_mock.js	Re-exports notification icon testenv in the icon mock module.
packages/eui/scripts/compile-icons.js	Extends icon compilation to include notification icon SVGs/assets.
packages/eui/package.json	Updates compile-icons script to format notification icon assets too.
packages/eui/changelogs/upcoming/9688.md	Adds changelog entry for EuiToast enhancements.
packages/eui/changelogs/upcoming/9642.md	Adds changelog entry for EuiCallOut enhancements.
packages/docusaurus-theme/src/theme/Admonition/Types.tsx	Updates admonition callouts for removed accent and new callout defaults.
packages/docusaurus-theme/src/components/demo/preview/preview.tsx	Wraps demos in EuiThemeProvider to neutralize docs-only line-height overrides.
packages/docusaurus-theme/changelogs/upcoming/9642.md	Adds changelog entry for docs theme preview behavior change.

---

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

[ek-so]

Discussed details in Slack, lgtm 👍

[mgadewoll]

ℹ️ Rebased with the feature branch after #9642 was merged.

[mgadewoll]

ℹ️ Rebased with new feature branch that doesn't include EuiCallOut changes.

[acstll]

Everything working as expected and nothing blocking in my few comments, but I'm not approving yet because 2 items in the QA guide are not met:

• "secondary buttons are only rendered if a primary button is available" — might be intentional
• "verify that animationMs can be applied and if set renders an animated decor loading bar" — seems to work correctly and it's just a tiny thing in the story

Apart from that, an LLM flagged two changes in data-test-subj that might affect tests in Kibana:

• data-test-subj="euiToastBody" moved from the text element to the icon+content wrapper (toast.tsx:280) — it now includes the icon, so anything reading toast text via euiToastBody gets different content.
• data-test-subj="euiToastHeader" wrapper is gone; only euiToastHeader__title remains (now on an EuiTitle).

[mgadewoll]

Apart from that, an LLM flagged two changes in data-test-subj that might affect tests in Kibana:

• data-test-subj="euiToastBody" moved from the text element to the icon+content wrapper (toast.tsx:280) — it now includes the icon, so anything reading toast text via euiToastBody gets different content.
• data-test-subj="euiToastHeader" wrapper is gone; only euiToastHeader__title remains (now on an EuiTitle).

• For the first point: We could move it one level down. I don't think it makes a difference right now, but to be more precise maybe 🤷‍♀️
• For the second point: I was considering this before. We have two options: Either re-add them to not break existing tests and we'd have to accept some additional wrapper without purpose or we clean them up and update test selectors to euiToastHeader__title. I chose the later since a wrapper without purpose seemed useless 😅

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: cfacec2

History

• 💚 Build #6735 succeeded cb997d9
• 💔 Build #6733 failed 414c040
• 💚 Build #6728 succeeded 4cbe753
• 💚 Build #6720 succeeded b1e3f07
• 💚 Build #6705 succeeded 467a681
• 💚 Build #6683 succeeded db85d78

cc @mgadewoll

[elasticmachine]

💚 Build Succeeded

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

History

• 💚 Build #3813 succeeded cb997d9
• 💚 Build #3811 succeeded 414c040
• 💚 Build #3806 succeeded 4cbe753
• 💚 Build #3796 succeeded b1e3f07
• 💚 Build #3781 succeeded 467a681
• 💚 Build #3757 succeeded db85d78

cc @mgadewoll