[9.0] Upgrade EUI to v102.3.0 (#222149) (#223091)

# Backport This will backport the following commits from `main` to `9.0`: - [Upgrade EUI to v102.3.0 (#222149)](https://github.com/elastic/kibana/pull/222149)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2025-06-27 18:51:07 -04:00 · 2025-06-10 13:17:44 +02:00 · 2025-06-10 13:17:44 +02:00 · 3a7dba9ff8
commit 3a7dba9ff8
parent cd00c41781
74 changed files with 442 additions and 228 deletions
--- a/examples/user_profile_examples/public/popover_demo.tsx
+++ b/examples/user_profile_examples/public/popover_demo.tsx
@ -130,6 +130,7 @@ export const PopoverDemo: FunctionComponent = () => {
            <EuiFilterButton
              iconType="arrowDown"
              numFilters={options2.length}
+              isSelected={isOpen2}
              hasActiveFilters={selectedOptions2.length > 0}
              numActiveFilters={selectedOptions2.length}
              onClick={() => setIsOpen2((value) => !value)}
--- a/package.json
+++ b/package.json
@ -123,9 +123,9 @@
    "@elastic/ecs": "^8.11.5",
    "@elastic/elasticsearch": "^8.17.0",
    "@elastic/ems-client": "8.6.3",
-    "@elastic/eui": "102.2.0",
-    "@elastic/eui-amsterdam": "npm:@elastic/eui@102.2.0-amsterdam.0",
-    "@elastic/eui-theme-borealis": "1.0.0",
+    "@elastic/eui": "102.3.0",
+    "@elastic/eui-amsterdam": "npm:@elastic/eui@102.3.0-amsterdam.0",
+    "@elastic/eui-theme-borealis": "1.1.0",
    "@elastic/filesaver": "1.1.2",
    "@elastic/node-crypto": "^1.2.3",
    "@elastic/numeral": "^2.5.1",
--- a/src/dev/license_checker/config.ts
+++ b/src/dev/license_checker/config.ts
@ -88,11 +88,11 @@ export const LICENSE_OVERRIDES = {
  'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
  '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
  '@elastic/ems-client@8.6.3': ['Elastic License 2.0'],
-  '@elastic/eui@102.2.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
-  '@elastic/eui-amsterdam@102.2.0-amsterdam.0': [
+  '@elastic/eui@102.3.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui-amsterdam@102.3.0-amsterdam.0': [
    'Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0',
  ],
-  '@elastic/eui-theme-borealis@1.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui-theme-borealis@1.1.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
  'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
  'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
  '@bufbuild/protobuf@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)
--- a/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx
+++ b/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx
@ -87,6 +87,7 @@ export function QueryHistoryAction({
          <EuiButtonEmpty
            size="xs"
            color="primary"
+            flush="both"
            onClick={toggleHistory}
            css={css`
              padding-inline: 0;
--- a/src/platform/packages/shared/content-management/table_list_view_table/src/components/table_sort_select.tsx
+++ b/src/platform/packages/shared/content-management/table_list_view_table/src/components/table_sort_select.tsx
@ -195,6 +195,7 @@ export function TableSortSelect({
    <EuiFilterButton
      iconType="arrowDown"
      iconSide="right"
+      isSelected={isPopoverOpen}
      onClick={togglePopOver}
      data-test-subj="tableSortSelectBtn"
      grow
--- a/src/platform/packages/shared/content-management/table_list_view_table/src/components/tag_filter_panel.tsx
+++ b/src/platform/packages/shared/content-management/table_list_view_table/src/components/tag_filter_panel.tsx
@ -119,6 +119,7 @@ export const TagFilterPanel: FC<{}> = ({}) => {
            iconSide="right"
            onClick={onFilterButtonClick}
            data-test-subj="tagFilterPopoverButton"
+            isSelected={isPopoverOpen}
            hasActiveFilters={totalActiveFilters > 0}
            numActiveFilters={totalActiveFilters}
            grow
--- a/src/platform/packages/shared/content-management/table_list_view_table/src/components/user_filter_panel.tsx
+++ b/src/platform/packages/shared/content-management/table_list_view_table/src/components/user_filter_panel.tsx
@ -106,6 +106,7 @@ export const UserFilterPanel: FC<{}> = () => {
            iconSide="right"
            data-test-subj="userFilterPopoverButton"
            onClick={() => setPopoverOpen(!isPopoverOpen)}
+            isSelected={isPopoverOpen}
            hasActiveFilters={selectedUsers.length > 0}
            numActiveFilters={selectedUsers.length}
            grow
--- a/src/platform/packages/shared/kbn-unified-data-table/src/components/custom_toolbar/render_custom_toolbar.scss
+++ b/src/platform/packages/shared/kbn-unified-data-table/src/components/custom_toolbar/render_custom_toolbar.scss
@ -1,39 +1,37 @@
 .unifiedDataTableToolbar {
  padding: $euiSizeS $euiSizeS $euiSizeXS;

-  .unifiedDataTableToolbarControlButton .euiDataGridToolbarControl {
+  .unifiedDataTableToolbarControlButton {
+    .euiDataGridToolbarControl {
      block-size: $euiSizeXL;
-    border: $euiBorderThin;
+      border: $euiBorderWidthThin solid $euiFormBorderColor;
      border-radius: $euiBorderRadiusSmall;
-    transition: transform $euiAnimSpeedNormal ease-in-out;

      // making the icons larger than the default size
      & svg {
        inline-size: $euiSize;
        block-size: $euiSize;
      }
-
-    // cancel default background changes
-    &:active, &:focus {
-      background: transparent;
-    }
-
-    // add toolbar control animation
-    &:hover {
-      transform: translateY(-1px);
-    }
-    &:active {
-      transform: translateY(0);
    }
  }

  .unifiedDataTableToolbarControlGroup {
-    box-shadow: inset 0 0 0 $euiBorderWidthThin $euiBorderColor;
+    position: relative;
+    overflow: hidden;
    border-radius: $euiBorderRadiusSmall;
    display: inline-flex;
    align-items: stretch;
    flex-direction: row;

+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border: $euiBorderWidthThin solid $euiColorBorderBasePlain;
+      border-radius: inherit;
+      pointer-events: none;
+    }
+
    & .unifiedDataTableToolbarControlButton .euiDataGridToolbarControl {
      border-radius: 0;
      border: none;
@ -48,6 +46,7 @@
  .unifiedDataTableToolbarControlIconButton .euiToolTipAnchor .euiButtonIcon {
    inline-size: $euiSizeXL;
    block-size: $euiSizeXL;
+    border-radius: inherit;

    // cancel default behaviour
    &:hover, &:active, &:focus {
@ -58,7 +57,7 @@
  }

  .unifiedDataTableToolbarControlIconButton + .unifiedDataTableToolbarControlIconButton {
-    border-inline-start: $euiBorderThin;
+    border-inline-start: $euiBorderWidthThin solid $euiColorBorderBasePlain;
    border-radius: 0;
  }

--- a/src/platform/packages/shared/kbn-unified-data-table/src/utils/get_render_cell_value.test.tsx
+++ b/src/platform/packages/shared/kbn-unified-data-table/src/utils/get_render_cell_value.test.tsx
@ -157,7 +157,7 @@ describe('Unified data table cell rendering', function () {
      />
    );
    expect(component.html()).toMatchInlineSnapshot(
-      `"<div data-test-subj=\\"dataTableExpandCellActionPopover\\" class=\\"euiFlexGroup css-1h68cm-euiFlexGroup-none-flexStart-stretch-row\\"><div class=\\"euiFlexItem css-9sbomz-euiFlexItem-grow-1\\"><span class=\\"unifiedDataTable__cellPopoverValue eui-textBreakWord\\"><span>100</span></span></div><div class=\\"euiFlexItem css-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonIcon css-wprskz-euiButtonIcon-xs-empty-primary\\" type=\\"button\\" aria-label=\\"Close popover\\" data-test-subj=\\"docTableClosePopover\\"><span data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div>"`
+      `"<div data-test-subj=\\"dataTableExpandCellActionPopover\\" class=\\"euiFlexGroup css-1h68cm-euiFlexGroup-none-flexStart-stretch-row\\"><div class=\\"euiFlexItem css-9sbomz-euiFlexItem-grow-1\\"><span class=\\"unifiedDataTable__cellPopoverValue eui-textBreakWord\\"><span>100</span></span></div><div class=\\"euiFlexItem css-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonIcon css-6m8561-euiButtonIcon-xs-empty-primary\\" type=\\"button\\" aria-label=\\"Close popover\\" data-test-subj=\\"docTableClosePopover\\"><span data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div>"`
    );
  });

@ -184,7 +184,7 @@ describe('Unified data table cell rendering', function () {
      />
    );
    expect(component.html()).toMatchInlineSnapshot(
-      `"<div data-test-subj=\\"dataTableExpandCellActionPopover\\" class=\\"euiFlexGroup css-1h68cm-euiFlexGroup-none-flexStart-stretch-row\\"><div class=\\"euiFlexItem css-9sbomz-euiFlexItem-grow-1\\"><span class=\\"unifiedDataTable__cellPopoverValue eui-textBreakWord\\"><span>100</span></span></div><div class=\\"euiFlexItem css-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonIcon css-wprskz-euiButtonIcon-xs-empty-primary\\" type=\\"button\\" aria-label=\\"Close popover\\" data-test-subj=\\"docTableClosePopover\\"><span data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div>"`
+      `"<div data-test-subj=\\"dataTableExpandCellActionPopover\\" class=\\"euiFlexGroup css-1h68cm-euiFlexGroup-none-flexStart-stretch-row\\"><div class=\\"euiFlexItem css-9sbomz-euiFlexItem-grow-1\\"><span class=\\"unifiedDataTable__cellPopoverValue eui-textBreakWord\\"><span>100</span></span></div><div class=\\"euiFlexItem css-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonIcon css-6m8561-euiButtonIcon-xs-empty-primary\\" type=\\"button\\" aria-label=\\"Close popover\\" data-test-subj=\\"docTableClosePopover\\"><span data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div>"`
    );
    findTestSubject(component, 'docTableClosePopover').simulate('click');
    expect(closePopoverMockFn).toHaveBeenCalledTimes(1);
--- a/src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.test.tsx
+++ b/src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.test.tsx
@ -11,7 +11,7 @@ import React from 'react';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 import { ReactWrapper } from 'enzyme';
 import { act } from 'react-dom/test-utils';
-import { EuiContextMenuItem } from '@elastic/eui';
+import { EuiContextMenuItem, EuiThemeProvider } from '@elastic/eui';
 import { stubLogstashDataView as dataView } from '@kbn/data-views-plugin/common/data_view.stub';
 import { coreMock } from '@kbn/core/public/mocks';
 import { type DataViewField } from '@kbn/data-views-plugin/common';
@ -20,6 +20,9 @@ import { FieldTypeFilter, type FieldTypeFilterProps } from './field_type_filter'
 const docLinks = coreMock.createStart().docLinks;

 describe('UnifiedFieldList <FieldTypeFilter />', () => {
+  const mountComponent = async (component: React.ReactElement) =>
+    await mountWithIntl(<EuiThemeProvider>{component}</EuiThemeProvider>);
+
  async function openPopover(wrapper: ReactWrapper, props: FieldTypeFilterProps<DataViewField>) {
    act(() => {
      wrapper
@ -54,7 +57,7 @@ describe('UnifiedFieldList <FieldTypeFilter />', () => {
      getCustomFieldType: jest.fn((field) => field.type),
      onChange: jest.fn(),
    };
-    const wrapper = await mountWithIntl(<FieldTypeFilter {...props} />);
+    const wrapper = await mountComponent(<FieldTypeFilter {...props} />);
    expect(wrapper.find(EuiContextMenuItem)?.length).toBe(0);
    expect(props.getCustomFieldType).not.toBeCalled();

@ -84,7 +87,7 @@ describe('UnifiedFieldList <FieldTypeFilter />', () => {
      onSupportedFieldFilter: (field) => ['number', 'date'].includes(field.type),
      onChange: jest.fn(),
    };
-    const wrapper = await mountWithIntl(<FieldTypeFilter {...props} />);
+    const wrapper = await mountComponent(<FieldTypeFilter {...props} />);
    expect(wrapper.find(EuiContextMenuItem)?.length).toBe(0);

    await openPopover(wrapper, props);
@ -106,7 +109,7 @@ describe('UnifiedFieldList <FieldTypeFilter />', () => {
      'data-test-subj': 'filters',
      onChange: jest.fn(),
    };
-    const wrapper = await mountWithIntl(<FieldTypeFilter {...props} />);
+    const wrapper = await mountComponent(<FieldTypeFilter {...props} />);
    expect(wrapper.find(EuiContextMenuItem)?.length).toBe(0);

    await openPopover(wrapper, props);
--- a/src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.tsx
+++ b/src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.tsx
@ -28,6 +28,9 @@ import {
  EuiButtonEmpty,
  useEuiTheme,
  EuiTitle,
+  logicalCSS,
+  UseEuiTheme,
+  mathWithUnits,
 } from '@elastic/eui';
 import type { CoreStart } from '@kbn/core-lifecycle-browser';
 import { FormattedMessage } from '@kbn/i18n-react';
@ -48,7 +51,22 @@ const EQUAL_HEIGHT_OFFSET = 2; // to avoid changes in the header's height after
 const popoverTitleStyle = css`
  padding: ${EQUAL_HEIGHT_OFFSET}px 0;
 `;
-const filterButtonStyle = css`
+
+const filterPopoverStyle = ({ euiTheme }: UseEuiTheme) => css`
+  .euiFilterButton__wrapper {
+    ${logicalCSS('left', `-${euiTheme.size.s}`)}
+    ${logicalCSS('min-width', '0')}
+    ${logicalCSS('width', `calc(100% + ${mathWithUnits(euiTheme.size.s, (x) => x * 2)})`)}
+
+    &::before {
+      display: none;
+    }
+  }
+`;
+
+const filterButtonStyle = ({ euiTheme }: UseEuiTheme) => css`
+  padding: 0;
+
  &,
  & .euiFilterButton__text {
    min-width: 0;
@ -158,12 +176,13 @@ export function FieldTypeFilter<T extends FieldListItem = DataViewField>({
      display="block"
      isOpen={isOpen}
      closePopover={() => setIsOpen(false)}
+      css={filterPopoverStyle}
      button={
        <EuiFilterButton
          aria-label={i18n.translate('unifiedFieldList.fieldTypeFilter.filterByTypeAriaLabel', {
            defaultMessage: 'Filter by type',
          })}
-          color="primary"
+          color="text"
          isSelected={isOpen}
          numFilters={selectedFieldTypes.length}
          hasActiveFilters={!!selectedFieldTypes.length}
--- a/src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_grouped/field_list_grouped.test.tsx
+++ b/src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_grouped/field_list_grouped.test.tsx
@ -10,7 +10,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { stubLogstashDataView as dataView } from '@kbn/data-views-plugin/common/data_view.stub';
-import { EuiText, EuiLoadingSpinner } from '@elastic/eui';
+import { EuiText, EuiLoadingSpinner, EuiThemeProvider } from '@elastic/eui';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 import { DataViewField } from '@kbn/data-views-plugin/common';
 import { ReactWrapper } from 'enzyme';
@ -76,6 +76,9 @@ describe('UnifiedFieldList FieldListGrouped + useGroupedFields()', () => {
    hookParams: Omit<GroupedFieldsParams<DataViewField>, 'services'>;
  }

+  const mountComponent = async (component: React.ReactElement) =>
+    await mountWithIntl(<EuiThemeProvider>{component}</EuiThemeProvider>);
+
  async function mountGroupedList({ listProps, hookParams }: WrapperProps): Promise<ReactWrapper> {
    const Wrapper: React.FC<WrapperProps> = (props) => {
      const {
@ -87,10 +90,10 @@ describe('UnifiedFieldList FieldListGrouped + useGroupedFields()', () => {
      });

      return (
-        <>
+        <EuiThemeProvider>
          <FieldListFilters {...fieldListFiltersProps} />
          <FieldListGrouped {...props.listProps} fieldGroups={fieldGroups} />
-        </>
+        </EuiThemeProvider>
      );
    };

@ -105,8 +108,8 @@ describe('UnifiedFieldList FieldListGrouped + useGroupedFields()', () => {
    return wrapper!;
  }

-  it('renders correctly in empty state', () => {
-    const wrapper = mountWithIntl(
+  it('renders correctly in empty state', async () => {
+    const wrapper = await mountComponent(
      <FieldListGrouped
        {...defaultProps}
        fieldGroups={{}}
--- a/src/platform/packages/shared/kbn-user-profile-components/src/user_profiles_selectable.tsx
+++ b/src/platform/packages/shared/kbn-user-profile-components/src/user_profiles_selectable.tsx
@ -304,7 +304,7 @@ export const UserProfilesSelectable = <Option extends UserProfileWithAvatar | nu

        onChange(values);
      }}
-      style={{ maxHeight: height }}
+      css={{ maxHeight: height }}
      singleSelection={singleSelection}
      searchable
      searchProps={{
@ -383,12 +383,7 @@ export const UserProfilesSelectable = <Option extends UserProfileWithAvatar | nu
                  </EuiFlexItem>
                  <EuiFlexItem grow={false}>
                    {selectedCount ? (
-                      <EuiButtonEmpty
-                        size="xs"
-                        flush="right"
-                        onClick={() => onChange?.([])}
-                        style={{ height: '1rem' }}
-                      >
+                      <EuiButtonEmpty size="xs" flush="right" onClick={() => onChange?.([])}>
                        {clearButtonLabel ?? (
                          <FormattedMessage
                            id="userProfileComponents.userProfilesSelectable.clearButtonLabel"
--- a/src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/icon_button_group/icon_button_group.styles.ts
+++ b/src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/icon_button_group/icon_button_group.styles.ts
@ -10,18 +10,20 @@
 import { UseEuiTheme } from '@elastic/eui';

 export const IconButtonGroupStyles = ({ euiTheme }: UseEuiTheme) => {
+  const border = `${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain} !important`;
+
  return {
    button: {
      '&.euiButtonGroupButton': {
        backgroundColor: euiTheme.colors.emptyShade,
-        border: `${euiTheme.border.thin} !important`,
+        border,
        borderRight: 'none !important',
        '&:first-of-type': {
          borderTopLeftRadius: `${euiTheme.border.radius.medium} !important`,
          borderBottomLeftRadius: `${euiTheme.border.radius.medium} !important`,
        },
        '&:last-of-type': {
-          borderRight: `${euiTheme.border.thin} !important`,
+          borderRight: border,
          borderTopRightRadius: `${euiTheme.border.radius.medium} !important`,
          borderBottomRightRadius: `${euiTheme.border.radius.medium} !important`,
        },
--- a/src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.styles.ts
+++ b/src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.styles.ts
@ -15,17 +15,24 @@ export const fontWeightDefinitions = (euiTheme: UseEuiTheme['euiTheme']) => ({
 });

 export const ToolbarButtonStyles = ({ euiTheme }: UseEuiTheme) => {
+  const isAmsterdam = euiTheme.themeName === 'EUI_THEME_AMSTERDAM';
+
  return {
-    default: {
+    default: isAmsterdam
+      ? {
          // style declaration carried over from https://github.com/elastic/kibana/blob/v8.10.4/src/plugins/kibana_react/public/toolbar_button/toolbar_button.scss
          // informed by issue https://github.com/elastic/eui/issues/4730
          borderStyle: 'solid',
          border: euiTheme.border.thin,
          borderColor: euiTheme.border.color,
+        }
+      : {
+          // manual border override to ensure disabled buttons have a border to align with EuiButtonGroup styles
+          border: `${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain}`,
        },
    emptyButton: {
      backgroundColor: euiTheme.colors.backgroundBasePlain,
-      border: `${euiTheme.border.thin}`,
+      border: `${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain}`,
      color: `${euiTheme.colors.textParagraph}`,
    },
    buttonPositions: {
--- a/src/platform/packages/shared/shared-ux/button_toolbar/src/popover/popover.test.tsx
+++ b/src/platform/packages/shared/shared-ux/button_toolbar/src/popover/popover.test.tsx
@ -38,7 +38,7 @@ describe('<ToolbarPopover />', () => {
    expect(button.prop('color')).toBe('text');
    expect(button.prop('css')).toMatchObject({
      backgroundColor: '#FFFFFF',
-      border: '1px solid #E3E8F2',
+      border: '1px solid #CAD3E2',
      color: '#1D2A3E',
    });
  });
--- a/src/platform/plugins/private/vis_types/vislib/public/vislib/components/legend/snapshots/legend.test.tsx.snap
+++ b/src/platform/plugins/private/vis_types/vislib/public/vislib/components/legend/snapshots/legend.test.tsx.snap
@ -2,4 +2,4 @@

 exports[`VisLegend Component Legend closed should match the snapshot 1`] = `"<div class=\\"visLegend\\"><button type=\\"button\\" class=\\"visLegend__toggle kbn-resetFocusState\\" aria-label=\\"Toggle legend\\" aria-expanded=\\"false\\" aria-controls=\\"legendId\\" data-test-subj=\\"vislibToggleLegend\\" title=\\"Toggle legend\\"><span data-euiicon-type=\\"list\\" color=\\"text\\"></span></button></div>"`;

-exports[`VisLegend Component Legend open should match the snapshot 1`] = `"<div class=\\"visLegend\\"><button type=\\"button\\" class=\\"visLegend__toggle kbn-resetFocusState visLegend__toggle--isOpen\\" aria-label=\\"Toggle legend\\" aria-expanded=\\"true\\" aria-controls=\\"legendId\\" data-test-subj=\\"vislibToggleLegend\\" title=\\"Toggle legend\\"><span data-euiicon-type=\\"list\\" color=\\"text\\"></span></button><ul class=\\"visLegend__list\\" id=\\"legendId\\"><li class=\\"visLegend__value\\"><div class=\\"euiPopover css-bvzum9-euiPopover-block\\"><button class=\\"euiButtonEmpty visLegend__button css-1eiq4rd-euiButtonDisplay-euiButtonEmpty-xs-empty-text-flush-left\\" type=\\"button\\" data-label=\\"A\\" title=\\"A\\" aria-label=\\"A, toggle options\\" data-test-subj=\\"legend-A\\"><span class=\\"euiButtonEmpty__content css-cf8eum-euiButtonDisplayContent\\"><span class=\\"eui-textTruncate euiButtonEmpty__text\\"><span data-euiicon-type=\\"dot\\" color=\\"red\\" data-test-subj=\\"legendSelectedColor-red\\"></span><span class=\\"visLegend__valueTitle\\">A</span></span></span></button></div></li><li class=\\"visLegend__value\\"><div class=\\"euiPopover css-bvzum9-euiPopover-block\\"><button class=\\"euiButtonEmpty visLegend__button css-1eiq4rd-euiButtonDisplay-euiButtonEmpty-xs-empty-text-flush-left\\" type=\\"button\\" data-label=\\"B\\" title=\\"B\\" aria-label=\\"B, toggle options\\" data-test-subj=\\"legend-B\\"><span class=\\"euiButtonEmpty__content css-cf8eum-euiButtonDisplayContent\\"><span class=\\"eui-textTruncate euiButtonEmpty__text\\"><span data-euiicon-type=\\"dot\\" color=\\"red\\" data-test-subj=\\"legendSelectedColor-red\\"></span><span class=\\"visLegend__valueTitle\\">B</span></span></span></button></div></li></ul></div>"`;
+exports[`VisLegend Component Legend open should match the snapshot 1`] = `"<div class=\\"visLegend\\"><button type=\\"button\\" class=\\"visLegend__toggle kbn-resetFocusState visLegend__toggle--isOpen\\" aria-label=\\"Toggle legend\\" aria-expanded=\\"true\\" aria-controls=\\"legendId\\" data-test-subj=\\"vislibToggleLegend\\" title=\\"Toggle legend\\"><span data-euiicon-type=\\"list\\" color=\\"text\\"></span></button><ul class=\\"visLegend__list\\" id=\\"legendId\\"><li class=\\"visLegend__value\\"><div class=\\"euiPopover css-bvzum9-euiPopover-block\\"><button class=\\"euiButtonEmpty visLegend__button css-1t7pnba-euiButtonDisplay-euiButtonEmpty-xs-empty-text-flush-left\\" type=\\"button\\" data-label=\\"A\\" title=\\"A\\" aria-label=\\"A, toggle options\\" data-test-subj=\\"legend-A\\"><span class=\\"euiButtonEmpty__content css-1lhgt31-euiButtonDisplayContent\\"><span class=\\"eui-textTruncate euiButtonEmpty__text\\"><span data-euiicon-type=\\"dot\\" color=\\"red\\" data-test-subj=\\"legendSelectedColor-red\\"></span><span class=\\"visLegend__valueTitle\\">A</span></span></span></button></div></li><li class=\\"visLegend__value\\"><div class=\\"euiPopover css-bvzum9-euiPopover-block\\"><button class=\\"euiButtonEmpty visLegend__button css-1t7pnba-euiButtonDisplay-euiButtonEmpty-xs-empty-text-flush-left\\" type=\\"button\\" data-label=\\"B\\" title=\\"B\\" aria-label=\\"B, toggle options\\" data-test-subj=\\"legend-B\\"><span class=\\"euiButtonEmpty__content css-1lhgt31-euiButtonDisplayContent\\"><span class=\\"eui-textTruncate euiButtonEmpty__text\\"><span data-euiicon-type=\\"dot\\" color=\\"red\\" data-test-subj=\\"legendSelectedColor-red\\"></span><span class=\\"visLegend__valueTitle\\">B</span></span></span></button></div></li></ul></div>"`;
--- a/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list.scss
+++ b/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list.scss
@ -1,3 +1,20 @@
+/* additional custom overrides due to unexpected component usage;
+    open issue: https://github.com/elastic/eui-private/issues/270 */
+.optionsList__filterGroup {
+  /* prevents duplicate border due to nested filterGroup */
+  &::after {
+    display: none;
+  }
+
+  .euiFilterButton__wrapper {
+    padding: 0;
+
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+}
 .optionsList__inputButtonOverride {
  max-inline-size: 100% !important;

--- a/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx
+++ b/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx
@ -9,6 +9,7 @@

 import { isEmpty } from 'lodash';
 import React, { useMemo, useState } from 'react';
+import classNames from 'classnames';

 import {
  EuiFilterButton,
@ -175,7 +176,11 @@ export const OptionsListControl = ({
  );

  return (
-    <EuiFilterGroup fullWidth compressed={isCompressed(api)} className={controlPanelClassName}>
+    <EuiFilterGroup
+      fullWidth
+      compressed={isCompressed(api)}
+      className={classNames('optionsList__filterGroup', controlPanelClassName)}
+    >
      <EuiInputPopover
        id={popoverId}
        ownFocus
--- a/src/platform/plugins/shared/discover/public/application/main/components/sidebar/discover_sidebar_responsive.test.tsx
+++ b/src/platform/plugins/shared/discover/public/application/main/components/sidebar/discover_sidebar_responsive.test.tsx
@ -10,7 +10,7 @@
 import { BehaviorSubject } from 'rxjs';
 import { ReactWrapper } from 'enzyme';
 import { findTestSubject } from '@elastic/eui/lib/test';
-import { EuiProgress } from '@elastic/eui';
+import { EuiProgress, EuiThemeProvider } from '@elastic/eui';
 import { getDataTableRecords, realHits } from '../../../../__fixtures__/real_hits';
 import { act } from 'react-dom/test-utils';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
@ -210,7 +210,9 @@ async function mountComponent(
      <KibanaContextProvider services={mockedServices}>
        <DiscoverAppStateProvider value={appState}>
          <InternalStateProvider value={internalState}>
+            <EuiThemeProvider>
              <DiscoverSidebarResponsive {...props} />
+            </EuiThemeProvider>
          </InternalStateProvider>
        </DiscoverAppStateProvider>
      </KibanaContextProvider>
--- a/src/platform/plugins/shared/presentation_util/public/components/field_picker/field_type_filter.tsx
+++ b/src/platform/plugins/shared/presentation_util/public/components/field_picker/field_type_filter.tsx
@ -49,7 +49,7 @@ export function FieldTypeFilter({
      {...buttonProps}
      data-test-subj="toggleFieldFilterButton"
      iconType="arrowDown"
-      isSelected={fieldTypesValue.length > 0}
+      isSelected={isPopoverOpen}
      numFilters={0}
      hasActiveFilters={fieldTypesValue.length > 0}
      numActiveFilters={fieldTypesValue.length}
--- a/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table.test.tsx
+++ b/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table.test.tsx
@ -8,7 +8,8 @@
 */

 import React from 'react';
-import { render, screen, act, fireEvent } from '@testing-library/react';
+import { act, fireEvent, screen } from '@testing-library/react';
+import { render } from '@elastic/eui/lib/test/rtl';
 import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import { buildDataTableRecord } from '@kbn/discover-utils';
 import { createStubDataView } from '@kbn/data-views-plugin/common/data_view.stub';
--- a/src/platform/plugins/shared/unified_search/public/dataview_picker/change_dataview.styles.ts
+++ b/src/platform/plugins/shared/unified_search/public/dataview_picker/change_dataview.styles.ts
@ -28,7 +28,8 @@ export const changeDataViewStyles = ({
  return {
    trigger: {
      maxWidth: fullWidth ? undefined : MIN_WIDTH,
-      border: theme.border.thin,
+      backgroundColor: theme.colors.backgroundBasePlain,
+      border: `${theme.border.width.thin} solid ${theme.colors.borderBasePlain}`,
      borderTopLeftRadius: 0,
      borderBottomLeftRadius: 0,
    },
--- a/src/platform/plugins/shared/unified_search/public/dataview_picker/change_dataview.tsx
+++ b/src/platform/plugins/shared/unified_search/public/dataview_picker/change_dataview.tsx
@ -262,7 +262,7 @@ export function ChangeDataView({
                padding: 11px;
                border-radius: ${euiTheme.border.radius.small} 0 0 ${euiTheme.border.radius.small};
                background-color: ${euiTheme.colors.lightestShade};
-                border: ${euiTheme.border.thin};
+                border: ${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain};
                border-right: 0;
              `}
            >
--- a/src/platform/plugins/shared/unified_search/public/filter_bar/filter_button_group/filter_button_group.scss
+++ b/src/platform/plugins/shared/unified_search/public/filter_bar/filter_button_group/filter_button_group.scss
@ -1,8 +1,17 @@
 .kbnFilterButtonGroup {
+  position: relative;
  height: $euiFormControlHeight;
  background-color: $euiFormInputGroupLabelBackground;
  border-radius: $euiFormControlBorderRadius;
-  box-shadow: 0 0 1px inset rgba($euiFormBorderOpaqueColor, .4);
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border: $euiBorderWidthThin solid $euiFormBorderColor;
+    border-radius: inherit;
+    pointer-events: none;
+  }

  // Targets any interactable elements
  *:enabled {
--- a/src/platform/plugins/shared/unified_search/public/query_string_input/query_bar_top_row.tsx
+++ b/src/platform/plugins/shared/unified_search/public/query_string_input/query_bar_top_row.tsx
@ -650,7 +650,10 @@ export const QueryBarTopRow = React.memo(
              timeRangeForSuggestionsOverride={props.timeRangeForSuggestionsOverride}
              filtersForSuggestions={props.filtersForSuggestions}
              onFiltersUpdated={props.onFiltersUpdated}
-              buttonProps={{ size: shouldShowDatePickerAsBadge() ? 's' : 'm', display: 'empty' }}
+              buttonProps={{
+                size: shouldShowDatePickerAsBadge() ? 's' : 'm',
+                display: 'empty',
+              }}
              isDisabled={props.isDisabled}
              suggestionsAbstraction={props.suggestionsAbstraction}
            />
--- a/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/feature_table.tsx
+++ b/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/feature_table.tsx
@ -270,7 +270,7 @@ export class FeatureTable extends Component<Props, State> {
      );

      const extraAction = (
-        <EuiText style={{ maxWidth: 200 }} size={'xs'} data-test-subj="reservedFeatureDescription">
+        <EuiText css={{ maxWidth: 200 }} size={'xs'} data-test-subj="reservedFeatureDescription">
          {feature.reserved.description}
        </EuiText>
      );
@ -353,7 +353,7 @@ export class FeatureTable extends Component<Props, State> {
            featureName: feature.name,
          },
        })}
-        style={{
+        css={{
          minWidth: 200,
        }}
      />
--- a/x-pack/platform/packages/shared/security/api_key_management/src/components/token_field.tsx
+++ b/x-pack/platform/packages/shared/security/api_key_management/src/components/token_field.tsx
@ -36,10 +36,9 @@ export const TokenField: FunctionComponent<TokenFieldProps> = ({ value, ...props
        defaultMessage: 'Token',
      })}
      value={value}
-      style={{
+      css={{
        fontFamily: euiThemeVars.euiCodeFontFamily,
        fontSize: euiThemeVars.euiFontSizeXS,
-        backgroundColor: 'transparent',
      }}
      onFocus={(event) => event.currentTarget.select()}
      readOnly
@ -53,7 +52,6 @@ export const TokenField: FunctionComponent<TokenFieldProps> = ({ value, ...props
              })}
              iconType="copyClipboard"
              color="accentSecondary"
-              style={{ backgroundColor: 'transparent' }}
              onClick={copyText}
            />
          )}
--- a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/snapshots/app.test.tsx.snap
+++ b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/snapshots/app.test.tsx.snap
--- a/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/field_types_filter/field_types_help_popover.tsx
+++ b/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/field_types_filter/field_types_help_popover.tsx
@ -84,6 +84,7 @@ export const FieldTypesHelpPopover: FC<{
    const helpButton = (
      <EuiFilterButton
        grow={false}
+        isSelected={isHelpOpen}
        onClick={onHelpClick}
        data-test-subj="fieldTypesHelpButton"
        className="dataVisualizerFieldTypesHelp__button"
--- a/x-pack/platform/plugins/shared/alerting/public/pages/maintenance_windows/components/status_filter.tsx
+++ b/x-pack/platform/plugins/shared/alerting/public/pages/maintenance_windows/components/status_filter.tsx
@ -47,6 +47,7 @@ export const StatusFilter: React.FC<RuleStatusFilterProps> = React.memo(
            <EuiFilterButton
              data-test-subj="status-filter-button"
              iconType="arrowDown"
+              isSelected={isPopoverOpen}
              hasActiveFilters={selectedStatus.length > 0}
              numActiveFilters={selectedStatus.length}
              numFilters={selectedStatus.length}
--- a/x-pack/platform/plugins/shared/cases/public/components/user_actions_activity_bar/filter_activity.tsx
+++ b/x-pack/platform/plugins/shared/cases/public/components/user_actions_activity_bar/filter_activity.tsx
@ -50,6 +50,8 @@ export const FilterActivity = React.memo<FilterActivityProps>(
          `}
          grow={false}
          onClick={() => handleFilterChange('all')}
+          isToggle
+          isSelected={type === 'all'}
          hasActiveFilters={type === 'all'}
          numFilters={userActionsStats && userActionsStats.total > 0 ? userActionsStats.total : 0}
          isLoading={isLoading}
@ -62,6 +64,8 @@ export const FilterActivity = React.memo<FilterActivityProps>(
        <EuiFilterButton
          withNext
          grow={false}
+          isToggle
+          isSelected={type === 'user'}
          hasActiveFilters={type === 'user'}
          numFilters={
            userActionsStats && userActionsStats.totalComments > 0
@ -76,6 +80,8 @@ export const FilterActivity = React.memo<FilterActivityProps>(
          {i18n.COMMENTS}
        </EuiFilterButton>
        <EuiFilterButton
+          isToggle
+          isSelected={type === 'action'}
          hasActiveFilters={type === 'action'}
          numFilters={
            userActionsStats && userActionsStats.totalOtherActions > 0
--- a/x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/table/dataset_quality_details_link.tsx
+++ b/x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/table/dataset_quality_details_link.tsx
@ -5,7 +5,7 @@
 * 2.0.
 */

-import { EuiHeaderLink } from '@elastic/eui';
+import { EuiButtonEmpty } from '@elastic/eui';
 import {
  DATA_QUALITY_DETAILS_LOCATOR_ID,
  DataQualityDetailsLocatorParams,
@ -41,15 +41,16 @@ export const DatasetQualityDetailsLink = React.memo(
    });

    return (
-      <EuiHeaderLink
+      <EuiButtonEmpty
        {...datasetQualityLinkDetailsProps}
        color="primary"
        data-test-subj={`datasetQualityTableDetailsLink-${dataStream}`}
        target="_blank"
        size="xs"
+        flush="both"
      >
        {children}
-      </EuiHeaderLink>
+      </EuiButtonEmpty>
    );
  }
 );
--- a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_mappings_content.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_mappings_content.tsx
@ -541,13 +541,22 @@ export const DetailsPageMappingsContent: FunctionComponent<{
                )}
                onClick={onToggleChange}
              >
-                <EuiFilterButton hasActiveFilters={!isJSONVisible} withNext>
+                <EuiFilterButton
+                  isToggle
+                  isSelected={!isJSONVisible}
+                  hasActiveFilters={!isJSONVisible}
+                  withNext
+                >
                  <FormattedMessage
                    id="xpack.idxMgmt.indexDetails.mappings.tableView"
                    defaultMessage="List"
                  />
                </EuiFilterButton>
-                <EuiFilterButton hasActiveFilters={isJSONVisible}>
+                <EuiFilterButton
+                  isToggle
+                  isSelected={isJSONVisible}
+                  hasActiveFilters={isJSONVisible}
+                >
                  <FormattedMessage
                    id="xpack.idxMgmt.indexDetails.mappings.json"
                    defaultMessage="JSON"
--- a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/datapanel.test.tsx
+++ b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/datapanel.test.tsx
@ -28,6 +28,7 @@ import { uiActionsPluginMock } from '@kbn/ui-actions-plugin/public/mocks';
 import { createIndexPatternServiceMock } from '../../mocks/data_views_service_mock';
 import { createMockFramePublicAPI } from '../../mocks';
 import { DataViewsState } from '../../state_management';
+import { EuiThemeProvider } from '@elastic/eui';

 const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });

@ -244,7 +245,11 @@ const renderFormBasedDataPanel = async (propsOverrides?: Partial<FormBasedDataPa
  const { rerender, ...rest } = render(
    <FormBasedDataPanel {...defaultProps} {...propsOverrides} />,
    {
-      wrapper: ({ children }) => <I18nProvider>{children}</I18nProvider>,
+      wrapper: ({ children }) => (
+        <EuiThemeProvider>
+          <I18nProvider>{children}</I18nProvider>
+        </EuiThemeProvider>
+      ),
    }
  );
  await waitToLoad();
--- a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/esql_layer/components/datapanel.test.tsx
+++ b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/esql_layer/components/datapanel.test.tsx
@ -19,7 +19,8 @@ import type { DatatableColumn } from '@kbn/expressions-plugin/public';
 import { coreMock } from '@kbn/core/public/mocks';
 import { uiActionsPluginMock } from '@kbn/ui-actions-plugin/public/mocks';
 import userEvent from '@testing-library/user-event';
-import { render, screen, within } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
+import { render } from '@elastic/eui/lib/test/rtl';

 import { type TextBasedDataPanelProps, TextBasedDataPanel } from './datapanel';
 import type { TextBasedPrivateState } from '../types';
--- a/x-pack/platform/plugins/shared/maps/public/_mapbox_hacks.scss
+++ b/x-pack/platform/plugins/shared/maps/public/_mapbox_hacks.scss
@ -31,7 +31,7 @@
    transition: background $euiAnimSpeedNormal ease-in-out;

    &:hover {
-      background-color: transparentize($euiColorDarkShade, .9);
+      background-color: lightOrDarkTheme(rgba($euiColorTextPrimary, .08), rgba($euiColorPlainLight, .12));
    }
  }

--- a/x-pack/platform/plugins/shared/maps/public/connected_components/toolbar_overlay/fit_to_data/fit_to_data.tsx
+++ b/x-pack/platform/plugins/shared/maps/public/connected_components/toolbar_overlay/fit_to_data/fit_to_data.tsx
@ -40,6 +40,7 @@ export function FitToData(props: Props) {
        iconType="expand"
        aria-label={label}
        title={title}
+        color="text"
        display={props.autoFitToDataBounds ? 'fill' : 'empty'}
      />
    </EuiPanel>
--- a/x-pack/platform/plugins/shared/ml/public/application/notifications/components/entity_filter.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/notifications/components/entity_filter.tsx
@ -60,6 +60,7 @@ export const EntityFilter: FC<CustomComponentProps> = React.memo(({ query, onCha
      iconType="arrowDown"
      iconSide="right"
      onClick={setIsOpen.bind(null, (prev) => !prev)}
+      isSelected={isOpen}
      hasActiveFilters={hasActiveFilters}
      numActiveFilters={hasActiveFilters ? selectedOptions.length : undefined}
      grow
--- a/x-pack/platform/plugins/shared/security/public/account_management/user_profile/user_profile.tsx
+++ b/x-pack/platform/plugins/shared/security/public/account_management/user_profile/user_profile.tsx
@ -508,7 +508,7 @@ function UserAvatarEditor({
        </FormRow>
      ) : (
        <EuiFlexGroup responsive={false}>
-          <EuiFlexItem grow={false} style={{ width: 64 }}>
+          <EuiFlexItem grow={false} css={{ width: 64 }}>
            <FormRow
              label={
                <FormLabel for="data.avatar.initials">
@ -556,7 +556,7 @@ function UserAvatarEditor({
                    onClick={() => formik.setFieldValue('data.avatar.color', getRandomColor())}
                    size="xs"
                    flush="right"
-                    style={{ height: euiTheme.base }}
+                    css={{ height: euiTheme.base }}
                  >
                    <FormattedMessage
                      id="xpack.security.accountManagement.userProfile.randomizeButton"
@ -690,7 +690,7 @@ const UserRoles: FunctionComponent<UserRoleProps> = ({ user }) => {
        <EuiBadgeGroup
          gutterSize="xs"
          data-test-subj="remainingRoles"
-          style={{
+          css={{
            maxWidth: '200px',
          }}
        >
@ -976,7 +976,7 @@ export const SaveChangesBottomBar: FunctionComponent = () => {
  const { count } = useFormChangesContext();

  return (
-    <EuiFlexGroup alignItems="center" style={{ width: '100%' }} responsive={false}>
+    <EuiFlexGroup alignItems="center" css={{ width: '100%' }} responsive={false}>
      <EuiFlexItem>
        <EuiFlexGroup responsive={false} gutterSize="xs">
          <EuiFlexItem grow={false}>
--- a/x-pack/platform/plugins/shared/security/public/management/api_keys/api_keys_grid/api_keys_table.tsx
+++ b/x-pack/platform/plugins/shared/security/public/management/api_keys/api_keys_grid/api_keys_table.tsx
@ -389,6 +389,8 @@ export const TypesFilterButton: FunctionComponent<CustomComponentProps> = ({ que
        <EuiFilterButton
          iconType="user"
          iconSide="left"
+          isToggle
+          isSelected={filters.type === 'rest'}
          hasActiveFilters={filters.type === 'rest'}
          onClick={() => {
            onFilterChange({ ...filters, type: filters.type === 'rest' ? undefined : 'rest' });
@ -412,6 +414,8 @@ export const TypesFilterButton: FunctionComponent<CustomComponentProps> = ({ que
        <EuiFilterButton
          iconType="cluster"
          iconSide="left"
+          isToggle
+          isSelected={filters.type === 'cross_cluster'}
          hasActiveFilters={filters.type === 'cross_cluster'}
          onClick={() => {
            onFilterChange({
@ -438,6 +442,8 @@ export const TypesFilterButton: FunctionComponent<CustomComponentProps> = ({ que
        <EuiFilterButton
          iconType="gear"
          iconSide="left"
+          isToggle
+          isSelected={filters.type === 'managed'}
          hasActiveFilters={filters.type === 'managed'}
          onClick={() => {
            onFilterChange({
@ -476,6 +482,8 @@ export const ExpiredFilterButton: FunctionComponent<CustomComponentProps> = ({
  return (
    <>
      <EuiFilterButton
+        isToggle
+        isSelected={filters.expired === false}
        hasActiveFilters={filters.expired === false}
        onClick={() => {
          if (filters.expired === false) {
@ -493,6 +501,8 @@ export const ExpiredFilterButton: FunctionComponent<CustomComponentProps> = ({
        />
      </EuiFilterButton>
      <EuiFilterButton
+        isToggle
+        isSelected={filters.expired === true}
        hasActiveFilters={filters.expired === true}
        onClick={() => {
          if (filters.expired === true) {
--- a/x-pack/platform/plugins/shared/security/server/authentication/snapshots/unauthenticated_page.test.tsx.snap
+++ b/x-pack/platform/plugins/shared/security/server/authentication/snapshots/unauthenticated_page.test.tsx.snap
@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`UnauthenticatedPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><style></style><style data-emotion=\\"eui \\"></style></style><link href=\\"/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div data-test-subj=\\"promptPage\\" style=\\"min-block-size:max(460px, 100vh);padding-block-start:var(--euiFixedHeadersOffset, 0)\\" class=\\"euiPageTemplate eui-14j2cxa-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-j6zf49-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1oc2fb7-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt eui-dnzkgr-euiPanel-m-plain-hasShadow-euiEmptyPrompt-vertical\\"><div class=\\"euiEmptyPrompt__main eui-1s4ogs-euiEmptyPrompt__main-vertical-l\\"><div class=\\"euiEmptyPrompt__icon eui-1ysd0i8-euiEmptyPrompt__icon-vertical\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content eui-1cebog9-euiEmptyPrompt__content-vertical\\"><h2 class=\\"euiTitle eui-f3huy-euiTitle-m\\">We hit an authentication error</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1ph7xy0-euiText-m-euiTextColor-subdued\\"><p>Try logging in again, and if the problem persists, contact your system administrator.</p></div><div class=\\"euiSpacer euiSpacer--l eui-p2o3x6-euiSpacer-l\\"></div><div class=\\"euiFlexGroup euiEmptyPrompt__actions eui-1rkti4c-euiFlexGroup-m-center-center-column-euiEmptyPrompt__actions-vertical\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/some/url?some-query=some-value#some-hash\\" rel=\\"noreferrer\\" class=\\"euiButton eui-ez3yru-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"logInButton\\"><span class=\\"eui-cf8eum-euiButtonDisplayContent\\">Log in</span></a></div></div></div></div></div></div></section></main></div></body></html>"`;
+exports[`UnauthenticatedPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><style></style><style data-emotion=\\"eui \\"></style></style><link href=\\"/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div data-test-subj=\\"promptPage\\" style=\\"min-block-size:max(460px, 100vh);padding-block-start:var(--euiFixedHeadersOffset, 0)\\" class=\\"euiPageTemplate eui-14j2cxa-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-j6zf49-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1oc2fb7-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt eui-dnzkgr-euiPanel-m-plain-hasShadow-euiEmptyPrompt-vertical\\"><div class=\\"euiEmptyPrompt__main eui-1s4ogs-euiEmptyPrompt__main-vertical-l\\"><div class=\\"euiEmptyPrompt__icon eui-1ysd0i8-euiEmptyPrompt__icon-vertical\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content eui-1cebog9-euiEmptyPrompt__content-vertical\\"><h2 class=\\"euiTitle eui-f3huy-euiTitle-m\\">We hit an authentication error</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1ph7xy0-euiText-m-euiTextColor-subdued\\"><p>Try logging in again, and if the problem persists, contact your system administrator.</p></div><div class=\\"euiSpacer euiSpacer--l eui-p2o3x6-euiSpacer-l\\"></div><div class=\\"euiFlexGroup euiEmptyPrompt__actions eui-1rkti4c-euiFlexGroup-m-center-center-column-euiEmptyPrompt__actions-vertical\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/some/url?some-query=some-value#some-hash\\" rel=\\"noreferrer\\" class=\\"euiButton eui-lm9iyu-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"logInButton\\"><span class=\\"eui-1lhgt31-euiButtonDisplayContent\\">Log in</span></a></div></div></div></div></div></div></section></main></div></body></html>"`;

-exports[`UnauthenticatedPage renders as expected with custom title 1`] = `"<html lang=\\"en\\"><head><title>My Company Name</title><style></style><style data-emotion=\\"eui \\"></style></style><link href=\\"/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div data-test-subj=\\"promptPage\\" style=\\"min-block-size:max(460px, 100vh);padding-block-start:var(--euiFixedHeadersOffset, 0)\\" class=\\"euiPageTemplate eui-14j2cxa-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-j6zf49-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1oc2fb7-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt eui-dnzkgr-euiPanel-m-plain-hasShadow-euiEmptyPrompt-vertical\\"><div class=\\"euiEmptyPrompt__main eui-1s4ogs-euiEmptyPrompt__main-vertical-l\\"><div class=\\"euiEmptyPrompt__icon eui-1ysd0i8-euiEmptyPrompt__icon-vertical\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content eui-1cebog9-euiEmptyPrompt__content-vertical\\"><h2 class=\\"euiTitle eui-f3huy-euiTitle-m\\">We hit an authentication error</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1ph7xy0-euiText-m-euiTextColor-subdued\\"><p>Try logging in again, and if the problem persists, contact your system administrator.</p></div><div class=\\"euiSpacer euiSpacer--l eui-p2o3x6-euiSpacer-l\\"></div><div class=\\"euiFlexGroup euiEmptyPrompt__actions eui-1rkti4c-euiFlexGroup-m-center-center-column-euiEmptyPrompt__actions-vertical\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/some/url?some-query=some-value#some-hash\\" rel=\\"noreferrer\\" class=\\"euiButton eui-ez3yru-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"logInButton\\"><span class=\\"eui-cf8eum-euiButtonDisplayContent\\">Log in</span></a></div></div></div></div></div></div></section></main></div></body></html>"`;
+exports[`UnauthenticatedPage renders as expected with custom title 1`] = `"<html lang=\\"en\\"><head><title>My Company Name</title><style></style><style data-emotion=\\"eui \\"></style></style><link href=\\"/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div data-test-subj=\\"promptPage\\" style=\\"min-block-size:max(460px, 100vh);padding-block-start:var(--euiFixedHeadersOffset, 0)\\" class=\\"euiPageTemplate eui-14j2cxa-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-j6zf49-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1oc2fb7-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt eui-dnzkgr-euiPanel-m-plain-hasShadow-euiEmptyPrompt-vertical\\"><div class=\\"euiEmptyPrompt__main eui-1s4ogs-euiEmptyPrompt__main-vertical-l\\"><div class=\\"euiEmptyPrompt__icon eui-1ysd0i8-euiEmptyPrompt__icon-vertical\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content eui-1cebog9-euiEmptyPrompt__content-vertical\\"><h2 class=\\"euiTitle eui-f3huy-euiTitle-m\\">We hit an authentication error</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1ph7xy0-euiText-m-euiTextColor-subdued\\"><p>Try logging in again, and if the problem persists, contact your system administrator.</p></div><div class=\\"euiSpacer euiSpacer--l eui-p2o3x6-euiSpacer-l\\"></div><div class=\\"euiFlexGroup euiEmptyPrompt__actions eui-1rkti4c-euiFlexGroup-m-center-center-column-euiEmptyPrompt__actions-vertical\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/some/url?some-query=some-value#some-hash\\" rel=\\"noreferrer\\" class=\\"euiButton eui-lm9iyu-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"logInButton\\"><span class=\\"eui-1lhgt31-euiButtonDisplayContent\\">Log in</span></a></div></div></div></div></div></div></section></main></div></body></html>"`;
--- a/x-pack/platform/plugins/shared/security/server/authorization/snapshots/reset_session_page.test.tsx.snap
+++ b/x-pack/platform/plugins/shared/security/server/authorization/snapshots/reset_session_page.test.tsx.snap
@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`ResetSessionPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><style></style><style data-emotion=\\"eui \\"></style></style><link href=\\"/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/internal/security/reset_session_page.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div data-test-subj=\\"promptPage\\" style=\\"min-block-size:max(460px, 100vh);padding-block-start:var(--euiFixedHeadersOffset, 0)\\" class=\\"euiPageTemplate eui-14j2cxa-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-j6zf49-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1oc2fb7-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt eui-dnzkgr-euiPanel-m-plain-hasShadow-euiEmptyPrompt-vertical\\"><div class=\\"euiEmptyPrompt__main eui-1s4ogs-euiEmptyPrompt__main-vertical-l\\"><div class=\\"euiEmptyPrompt__icon eui-1ysd0i8-euiEmptyPrompt__icon-vertical\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content eui-1cebog9-euiEmptyPrompt__content-vertical\\"><h2 class=\\"euiTitle eui-f3huy-euiTitle-m\\">You do not have permission to access the requested page</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1ph7xy0-euiText-m-euiTextColor-subdued\\"><p>Either go back to the previous page or log in as a different user.</p></div><div class=\\"euiSpacer euiSpacer--l eui-p2o3x6-euiSpacer-l\\"></div><div class=\\"euiFlexGroup euiEmptyPrompt__actions eui-1rkti4c-euiFlexGroup-m-center-center-column-euiEmptyPrompt__actions-vertical\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/path/to/logout\\" rel=\\"noreferrer\\" class=\\"euiButton eui-ez3yru-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"eui-cf8eum-euiButtonDisplayContent\\">Log in as different user</span></a></div><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonEmpty eui-1y378bv-euiButtonDisplay-euiButtonEmpty-m-empty-primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonEmpty__content eui-cf8eum-euiButtonDisplayContent\\"><span class=\\"eui-textTruncate euiButtonEmpty__text\\">Go back</span></span></button></div></div></div></div></div></div></section></main></div></body></html>"`;
+exports[`ResetSessionPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><style></style><style data-emotion=\\"eui \\"></style></style><link href=\\"/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/internal/security/reset_session_page.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div data-test-subj=\\"promptPage\\" style=\\"min-block-size:max(460px, 100vh);padding-block-start:var(--euiFixedHeadersOffset, 0)\\" class=\\"euiPageTemplate eui-14j2cxa-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-j6zf49-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1oc2fb7-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt eui-dnzkgr-euiPanel-m-plain-hasShadow-euiEmptyPrompt-vertical\\"><div class=\\"euiEmptyPrompt__main eui-1s4ogs-euiEmptyPrompt__main-vertical-l\\"><div class=\\"euiEmptyPrompt__icon eui-1ysd0i8-euiEmptyPrompt__icon-vertical\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content eui-1cebog9-euiEmptyPrompt__content-vertical\\"><h2 class=\\"euiTitle eui-f3huy-euiTitle-m\\">You do not have permission to access the requested page</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1ph7xy0-euiText-m-euiTextColor-subdued\\"><p>Either go back to the previous page or log in as a different user.</p></div><div class=\\"euiSpacer euiSpacer--l eui-p2o3x6-euiSpacer-l\\"></div><div class=\\"euiFlexGroup euiEmptyPrompt__actions eui-1rkti4c-euiFlexGroup-m-center-center-column-euiEmptyPrompt__actions-vertical\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/path/to/logout\\" rel=\\"noreferrer\\" class=\\"euiButton eui-lm9iyu-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"eui-1lhgt31-euiButtonDisplayContent\\">Log in as different user</span></a></div><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonEmpty eui-hb1eud-euiButtonDisplay-euiButtonEmpty-m-empty-primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonEmpty__content eui-1lhgt31-euiButtonDisplayContent\\"><span class=\\"eui-textTruncate euiButtonEmpty__text\\">Go back</span></span></button></div></div></div></div></div></div></section></main></div></body></html>"`;

-exports[`ResetSessionPage renders as expected with custom page title 1`] = `"<html lang=\\"en\\"><head><title>My Company Name</title><style></style><style data-emotion=\\"eui \\"></style></style><link href=\\"/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/internal/security/reset_session_page.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div data-test-subj=\\"promptPage\\" style=\\"min-block-size:max(460px, 100vh);padding-block-start:var(--euiFixedHeadersOffset, 0)\\" class=\\"euiPageTemplate eui-14j2cxa-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-j6zf49-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1oc2fb7-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt eui-dnzkgr-euiPanel-m-plain-hasShadow-euiEmptyPrompt-vertical\\"><div class=\\"euiEmptyPrompt__main eui-1s4ogs-euiEmptyPrompt__main-vertical-l\\"><div class=\\"euiEmptyPrompt__icon eui-1ysd0i8-euiEmptyPrompt__icon-vertical\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content eui-1cebog9-euiEmptyPrompt__content-vertical\\"><h2 class=\\"euiTitle eui-f3huy-euiTitle-m\\">You do not have permission to access the requested page</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1ph7xy0-euiText-m-euiTextColor-subdued\\"><p>Either go back to the previous page or log in as a different user.</p></div><div class=\\"euiSpacer euiSpacer--l eui-p2o3x6-euiSpacer-l\\"></div><div class=\\"euiFlexGroup euiEmptyPrompt__actions eui-1rkti4c-euiFlexGroup-m-center-center-column-euiEmptyPrompt__actions-vertical\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/path/to/logout\\" rel=\\"noreferrer\\" class=\\"euiButton eui-ez3yru-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"eui-cf8eum-euiButtonDisplayContent\\">Log in as different user</span></a></div><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonEmpty eui-1y378bv-euiButtonDisplay-euiButtonEmpty-m-empty-primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonEmpty__content eui-cf8eum-euiButtonDisplayContent\\"><span class=\\"eui-textTruncate euiButtonEmpty__text\\">Go back</span></span></button></div></div></div></div></div></div></section></main></div></body></html>"`;
+exports[`ResetSessionPage renders as expected with custom page title 1`] = `"<html lang=\\"en\\"><head><title>My Company Name</title><style></style><style data-emotion=\\"eui \\"></style></style><link href=\\"/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/internal/security/reset_session_page.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div data-test-subj=\\"promptPage\\" style=\\"min-block-size:max(460px, 100vh);padding-block-start:var(--euiFixedHeadersOffset, 0)\\" class=\\"euiPageTemplate eui-14j2cxa-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-j6zf49-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1oc2fb7-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt eui-dnzkgr-euiPanel-m-plain-hasShadow-euiEmptyPrompt-vertical\\"><div class=\\"euiEmptyPrompt__main eui-1s4ogs-euiEmptyPrompt__main-vertical-l\\"><div class=\\"euiEmptyPrompt__icon eui-1ysd0i8-euiEmptyPrompt__icon-vertical\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content eui-1cebog9-euiEmptyPrompt__content-vertical\\"><h2 class=\\"euiTitle eui-f3huy-euiTitle-m\\">You do not have permission to access the requested page</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1ph7xy0-euiText-m-euiTextColor-subdued\\"><p>Either go back to the previous page or log in as a different user.</p></div><div class=\\"euiSpacer euiSpacer--l eui-p2o3x6-euiSpacer-l\\"></div><div class=\\"euiFlexGroup euiEmptyPrompt__actions eui-1rkti4c-euiFlexGroup-m-center-center-column-euiEmptyPrompt__actions-vertical\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/path/to/logout\\" rel=\\"noreferrer\\" class=\\"euiButton eui-lm9iyu-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"eui-1lhgt31-euiButtonDisplayContent\\">Log in as different user</span></a></div><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonEmpty eui-hb1eud-euiButtonDisplay-euiButtonEmpty-m-empty-primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonEmpty__content eui-1lhgt31-euiButtonDisplayContent\\"><span class=\\"eui-textTruncate euiButtonEmpty__text\\">Go back</span></span></button></div></div></div></div></div></div></section></main></div></body></html>"`;
--- a/x-pack/platform/plugins/shared/spaces/public/nav_control/components/snapshots/manage_spaces_button.test.tsx.snap
+++ b/x-pack/platform/plugins/shared/spaces/public/nav_control/components/snapshots/manage_spaces_button.test.tsx.snap
@ -4,6 +4,18 @@ exports[`ManageSpacesButton doesn't render if user profile forbids managing spac

 exports[`ManageSpacesButton renders as expected 1`] = `
 <EuiButton
+  css={
+    Object {
+      "map": undefined,
+      "name": "1h9mq2l",
+      "next": undefined,
+      "styles": "
+              margin: 12px;
+              width: calc(100% - 12px * 2);
+            ",
+      "toString": [Function],
+    }
+  }
  data-test-subj="manageSpaces"
  onClick={[Function]}
  size="s"
--- a/x-pack/platform/plugins/shared/spaces/public/nav_control/components/manage_spaces_button.tsx
+++ b/x-pack/platform/plugins/shared/spaces/public/nav_control/components/manage_spaces_button.tsx
@ -5,9 +5,9 @@
 * 2.0.
 */

-import { EuiButton } from '@elastic/eui';
-import type { CSSProperties } from 'react';
-import React, { Component } from 'react';
+import { EuiButton, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import React from 'react';

 import type { ApplicationStart, Capabilities } from '@kbn/core/public';
 import { FormattedMessage } from '@kbn/i18n-react';
@ -16,26 +16,46 @@ interface Props {
  isDisabled?: boolean;
  className?: string;
  size?: 's' | 'm';
-  style?: CSSProperties;
+  fullWidth?: boolean;
  onClick?: () => void;
  capabilities: Capabilities;
  navigateToApp: ApplicationStart['navigateToApp'];
 }

-export class ManageSpacesButton extends Component<Props, {}> {
-  public render() {
-    if (!this.props.capabilities.spaces.manage) {
+export const ManageSpacesButton: React.FC<Props> = ({
+  isDisabled,
+  size,
+  fullWidth,
+  onClick,
+  capabilities,
+  navigateToApp,
+}) => {
+  const { euiTheme } = useEuiTheme();
+  const navigateToManageSpaces = () => {
+    if (onClick) {
+      onClick();
+    }
+    navigateToApp('management', { path: 'kibana/spaces' });
+  };
+
+  if (!capabilities.spaces.manage) {
    return null;
  }

  return (
    <EuiButton
-        size={this.props.size || 's'}
-        className={this.props.className}
-        isDisabled={this.props.isDisabled}
-        onClick={this.navigateToManageSpaces}
-        style={this.props.style}
+      size={size || 's'}
+      isDisabled={isDisabled}
+      onClick={navigateToManageSpaces}
      data-test-subj="manageSpaces"
+      css={
+        fullWidth
+          ? { width: `100%` }
+          : css`
+              margin: ${euiTheme.size.m};
+              width: calc(100% - ${euiTheme.size.m} * 2);
+            `
+      }
    >
      <FormattedMessage
        id="xpack.spaces.manageSpacesButton.manageSpacesButtonLabel"
@ -43,13 +63,4 @@ export class ManageSpacesButton extends Component<Props, {}> {
      />
    </EuiButton>
  );
-  }
-
-  private navigateToManageSpaces = () => {
-    if (this.props.onClick) {
-      this.props.onClick();
-    }
-
-    this.props.navigateToApp('management', { path: 'kibana/spaces' });
 };
-}
--- a/x-pack/platform/plugins/shared/spaces/public/nav_control/components/spaces_description.tsx
+++ b/x-pack/platform/plugins/shared/spaces/public/nav_control/components/spaces_description.tsx
@ -44,7 +44,7 @@ export const SpacesDescription: FC<Props> = (props: Props) => {
      <div key="manageSpacesButton" className="spcDescription__manageButtonWrapper">
        <ManageSpacesButton
          size="s"
-          style={{ width: `100%` }}
+          fullWidth
          onClick={props.onClickManageSpaceBtn}
          capabilities={props.capabilities}
          navigateToApp={props.navigateToApp}
--- a/x-pack/platform/plugins/shared/spaces/public/space_list/space_list_internal.tsx
+++ b/x-pack/platform/plugins/shared/spaces/public/space_list/space_list_internal.tsx
@ -107,22 +107,14 @@ export const SpaceListInternal = ({

    if (displayLimit && authorizedSpaceTargets.length > displayLimit) {
      button = isExpanded ? (
-        <EuiButtonEmpty
-          size="xs"
-          onClick={() => setIsExpanded(false)}
-          style={{ alignSelf: 'center' }}
-        >
+        <EuiButtonEmpty size="xs" onClick={() => setIsExpanded(false)}>
          <FormattedMessage
            id="xpack.spaces.spaceList.showLessSpacesLink"
            defaultMessage="show less"
          />
        </EuiButtonEmpty>
      ) : (
-        <EuiButtonEmpty
-          size="xs"
-          onClick={() => setIsExpanded(true)}
-          style={{ alignSelf: 'center' }}
-        >
+        <EuiButtonEmpty size="xs" onClick={() => setIsExpanded(true)}>
          <FormattedMessage
            id="xpack.spaces.spaceList.showMoreSpacesLink"
            defaultMessage="+{count} more"
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status_filter.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status_filter.tsx
@ -51,6 +51,7 @@ export const EventLogListStatusFilter = (props: EventLogListStatusFilterProps) =
          <EuiFilterButton
            data-test-subj="eventLogStatusFilterButton"
            iconType="arrowDown"
+            isSelected={isPopoverOpen}
            hasActiveFilters={selectedOptions.length > 0}
            numActiveFilters={selectedOptions.length}
            numFilters={selectedOptions.length}
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/action_type_filter.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/action_type_filter.tsx
@ -45,6 +45,7 @@ export const ActionTypeFilter: React.FunctionComponent<ActionTypeFilterProps> =
      button={
        <EuiFilterButton
          iconType="arrowDown"
+          isSelected={isPopoverOpen}
          hasActiveFilters={filters.length > 0}
          numActiveFilters={filters.length}
          numFilters={filters.length}
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_execution_status_filter.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_execution_status_filter.tsx
@ -59,6 +59,7 @@ export const RuleExecutionStatusFilter: React.FunctionComponent<RuleExecutionSta
      button={
        <EuiFilterButton
          iconType="arrowDown"
+          isSelected={isPopoverOpen}
          hasActiveFilters={selectedValues.length > 0}
          numActiveFilters={selectedValues.length}
          numFilters={selectedValues.length}
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_last_run_outcome_filter.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_last_run_outcome_filter.tsx
@ -59,6 +59,7 @@ export const RuleLastRunOutcomeFilter: React.FunctionComponent<RuleLastRunOutcom
      button={
        <EuiFilterButton
          iconType="arrowDown"
+          isSelected={isPopoverOpen}
          hasActiveFilters={selectedOutcomes.length > 0}
          numActiveFilters={selectedOutcomes.length}
          numFilters={selectedOutcomes.length}
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_filter.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_filter.tsx
@ -105,6 +105,7 @@ export const RuleStatusFilter = (props: RuleStatusFilterProps) => {
          <EuiFilterButton
            data-test-subj={buttonDataTestSubj}
            iconType="arrowDown"
+            isSelected={isPopoverOpen}
            hasActiveFilters={selectedStatuses.length > 0}
            numActiveFilters={selectedStatuses.length}
            numFilters={selectedStatuses.length}
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_tag_filter.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_tag_filter.tsx
@ -68,10 +68,12 @@ const OptionWrapper = memo(

 const RuleTagFilterPopoverButton = memo(
  ({
+    isSelected,
    selectedTags,
    onClosePopover,
    buttonDataTestSubj,
  }: {
+    isSelected: boolean;
    selectedTags: string[];
    onClosePopover: () => void;
    buttonDataTestSubj?: string;
@ -80,6 +82,7 @@ const RuleTagFilterPopoverButton = memo(
      <EuiFilterButton
        data-test-subj={buttonDataTestSubj}
        iconType="arrowDown"
+        isSelected={isSelected}
        hasActiveFilters={selectedTags.length > 0}
        numActiveFilters={selectedTags.length}
        numFilters={selectedTags.length}
@ -273,6 +276,7 @@ export const RuleTagFilter = memo((props: RuleTagFilterProps) => {
        closePopover={onClosePopover}
        button={
          <RuleTagFilterPopoverButton
+            isSelected={isPopoverOpen}
            selectedTags={selectedTags}
            onClosePopover={onClosePopover}
            buttonDataTestSubj={buttonDataTestSubj}
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/type_filter.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/type_filter.tsx
@ -42,6 +42,7 @@ export const TypeFilter: React.FunctionComponent<TypeFilterProps> = ({
      button={
        <EuiFilterButton
          iconType="arrowDown"
+          isSelected={isPopoverOpen}
          hasActiveFilters={filters.length > 0}
          numActiveFilters={filters.length}
          numFilters={filters.length}
--- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/filter_expanded.tsx
+++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/filter_expanded.tsx
@ -37,7 +37,11 @@ export function FilterExpanded(props: FilterProps) {
  return (
    <EuiPopover
      button={
-        <EuiFilterButton onClick={() => setIsOpen((prevState) => !prevState)} iconType="arrowDown">
+        <EuiFilterButton
+          onClick={() => setIsOpen((prevState) => !prevState)}
+          iconType="arrowDown"
+          isSelected={isOpen}
+        >
          {props.label}
        </EuiFilterButton>
      }
--- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/components/labels_filter.tsx
+++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/components/labels_filter.tsx
@ -39,7 +39,12 @@ export function LabelsFieldFilter(props: FilterProps) {
  };

  const button = (
-    <EuiFilterButton iconType="arrowDown" iconSide="right" onClick={onButtonClick}>
+    <EuiFilterButton
+      iconType="arrowDown"
+      iconSide="right"
+      isSelected={isPopoverOpen}
+      onClick={onButtonClick}
+    >
      {LABELS_LABEL}
    </EuiFilterButton>
  );
--- a/x-pack/solutions/observability/plugins/observability_shared/public/components/field_value_suggestions/field_value_selection.tsx
+++ b/x-pack/solutions/observability/plugins/observability_shared/public/components/field_value_suggestions/field_value_selection.tsx
@ -136,6 +136,7 @@ export function FieldValueSelection({
        defaultMessage: 'expands filter group for {label} filter',
        values: { label },
      })}
+      isSelected={isPopoverOpen || forceOpen}
      hasActiveFilters={numOfFilters > 0}
      iconType="arrowDown"
      numActiveFilters={numOfFilters}
--- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/components/filter_status_button.tsx
+++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/components/filter_status_button.tsx
@ -36,6 +36,8 @@ export const FilterStatusButton = ({
  return (
    <EuiFilterButton
      data-test-subj={dataTestSubj}
+      isToggle
+      isSelected={isActive}
      hasActiveFilters={isActive}
      isDisabled={isDisabled}
      onClick={() => {
--- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/step_detail/waterfall/waterfall_filter.tsx
+++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/step_detail/waterfall/waterfall_filter.tsx
@ -158,6 +158,8 @@ export const WaterfallFilter = ({
          <EuiFilterGroup>
            {MIME_FILTERS.map(({ label, mimeType }) => (
              <EuiFilterButton
+                isToggle
+                isSelected={activeFilters.includes(mimeType)}
                hasActiveFilters={activeFilters.includes(mimeType)}
                onClick={() => toggleFilters(mimeType)}
                key={label}
--- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/snapshots/filter_status_button.test.tsx.snap
+++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/snapshots/filter_status_button.test.tsx.snap
@ -1,13 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`FilterStatusButton renders without errors for valid props 1`] = `
+<div
+  class="euiFilterButton__wrapper css-nbqv3o-wrapper-withNext-hasToggle"
+>
  <button
-  class="euiButtonEmpty euiFilterButton euiFilterButton-hasActiveFilters emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-withNext-hasActiveFilters"
+    aria-pressed="true"
+    class="euiButtonGroupButton euiButtonGroupButton-isSelected euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-fill-text-euiFilterButton-hasActiveFilters-toggle"
    data-test-subj="foo"
    type="button"
  >
    <span
-    class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
+      class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed-euiFilterButton__content"
    >
      <span
        class="euiFilterButton__text emotion-euiFilterButton__text"
@ -18,6 +22,7 @@ exports[`FilterStatusButton renders without errors for valid props 1`] = `
      </span>
    </span>
  </button>
+</div>
 `;

 exports[`FilterStatusButton shallow renders without errors for valid props 1`] = `
--- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/snapshots/status_filter.test.tsx.snap
+++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/snapshots/status_filter.test.tsx.snap
@ -3,14 +3,18 @@
 exports[`StatusFilterComponent renders without errors for valid props 1`] = `
 <div
  class="euiFilterGroup emotion-euiFilterGroup-uncompressed"
+>
+  <div
+    class="euiFilterButton__wrapper css-nbqv3o-wrapper-withNext-hasToggle"
  >
    <button
-    class="euiButtonEmpty euiFilterButton euiFilterButton-hasActiveFilters emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-withNext-hasActiveFilters"
+      aria-pressed="true"
+      class="euiButtonGroupButton euiButtonGroupButton-isSelected euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-fill-text-euiFilterButton-hasActiveFilters-toggle"
      data-test-subj="xpack.synthetics.filterBar.filterStatusAll"
      type="button"
    >
      <span
-      class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed-euiFilterButton__content"
      >
        <span
          class="euiFilterButton__text emotion-euiFilterButton__text"
@ -21,13 +25,18 @@ exports[`StatusFilterComponent renders without errors for valid props 1`] = `
        </span>
      </span>
    </button>
+  </div>
+  <div
+    class="euiFilterButton__wrapper css-nbqv3o-wrapper-withNext-hasToggle"
+  >
    <button
-    class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-withNext"
+      aria-pressed="false"
+      class="euiButtonGroupButton euiFilterButton euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-empty-text-euiFilterButton-toggle"
      data-test-subj="xpack.synthetics.filterBar.filterStatusUp"
      type="button"
    >
      <span
-      class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed-euiFilterButton__content"
      >
        <span
          class="euiFilterButton__text emotion-euiFilterButton__text"
@ -38,13 +47,18 @@ exports[`StatusFilterComponent renders without errors for valid props 1`] = `
        </span>
      </span>
    </button>
+  </div>
+  <div
+    class="euiFilterButton__wrapper css-10m1aro-wrapper-hasToggle"
+  >
    <button
-    class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton"
+      aria-pressed="false"
+      class="euiButtonGroupButton euiFilterButton euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-empty-text-euiFilterButton-toggle"
      data-test-subj="xpack.synthetics.filterBar.filterStatusDown"
      type="button"
    >
      <span
-      class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed-euiFilterButton__content"
      >
        <span
          class="euiFilterButton__text emotion-euiFilterButton__text"
@ -56,6 +70,7 @@ exports[`StatusFilterComponent renders without errors for valid props 1`] = `
      </span>
    </button>
  </div>
+</div>
 `;

 exports[`StatusFilterComponent shallow renders without errors for valid props 1`] = `
--- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/filter_status_button.tsx
+++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/filter_status_button.tsx
@ -31,6 +31,8 @@ export const FilterStatusButton = ({
  return (
    <EuiFilterButton
      data-test-subj={dataTestSubj}
+      isToggle
+      isSelected={isActive}
      hasActiveFilters={isActive}
      isDisabled={isDisabled}
      onClick={() => {
--- a/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/index.tsx
+++ b/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/index.tsx
@ -126,6 +126,8 @@ export const HistoricalResultsComponent: FC<Props> = ({ indexName }) => {
            aria-label={FILTER_RESULTS_BY_OUTCOME}
          >
            <EuiFilterButton
+              isToggle
+              isSelected={isShowAll}
              hasActiveFilters={isShowAll}
              role="radio"
              data-test-subj="historicalResultsOutcomeFilterAll"
@ -135,6 +137,8 @@ export const HistoricalResultsComponent: FC<Props> = ({ indexName }) => {
              {ALL}
            </EuiFilterButton>
            <EuiFilterButton
+              isToggle
+              isSelected={isShowPass}
              hasActiveFilters={isShowPass}
              role="radio"
              data-test-subj="historicalResultsOutcomeFilterPass"
@ -144,6 +148,8 @@ export const HistoricalResultsComponent: FC<Props> = ({ indexName }) => {
              {PASS}
            </EuiFilterButton>
            <EuiFilterButton
+              isToggle
+              isSelected={isShowFail}
              hasActiveFilters={isShowFail}
              role="radio"
              data-test-subj="historicalResultsOutcomeFilterFail"
--- a/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/rules/rules_table_header.tsx
+++ b/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/rules/rules_table_header.tsx
@ -157,6 +157,8 @@ export const RulesTableHeader = ({
              <EuiFilterGroup>
                <EuiFilterButton
                  withNext
+                  isToggle
+                  isSelected={enabledDisabledItemsFilterState === 'enabled'}
                  hasActiveFilters={enabledDisabledItemsFilterState === 'enabled'}
                  onClick={toggleEnabledRulesFilter}
                  data-test-subj={RULES_TABLE_HEADER_TEST_SUBJ.RULES_ENABLED_FILTER}
@ -167,6 +169,8 @@ export const RulesTableHeader = ({
                  />
                </EuiFilterButton>
                <EuiFilterButton
+                  isToggle
+                  isSelected={enabledDisabledItemsFilterState === 'enabled'}
                  hasActiveFilters={enabledDisabledItemsFilterState === 'disabled'}
                  onClick={toggleDisabledRulesFilter}
                  data-test-subj={RULES_TABLE_HEADER_TEST_SUBJ.RULES_DISABLED_FILTER}
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/jobs_table_filters.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/jobs_table_filters.tsx
@ -86,6 +86,8 @@ export const JobsTableFiltersComponent = ({
      <EuiFlexItem grow={false}>
        <EuiFilterGroup>
          <EuiFilterButton
+            isToggle
+            isSelected={showElasticJobs}
            hasActiveFilters={showElasticJobs}
            onClick={handleElasticJobsClick}
            data-test-subj="show-elastic-jobs-filter-button"
@ -94,6 +96,8 @@ export const JobsTableFiltersComponent = ({
            {i18n.SHOW_ELASTIC_JOBS}
          </EuiFilterButton>
          <EuiFilterButton
+            isToggle
+            isSelected={showCustomJobs}
            hasActiveFilters={showCustomJobs}
            onClick={handleCustomJobsClick}
            data-test-subj="show-custom-jobs-filter-button"
--- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_gaps/components/rules_with_gaps_overview_panel/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_gaps/components/rules_with_gaps_overview_panel/index.tsx
@ -138,6 +138,8 @@ export const RulesWithGapsOverviewPanel = () => {
        <EuiFlexItem grow={false}>
          <EuiFilterGroup>
            <EuiFilterButton
+              isToggle
+              isSelected={showRulesWithGaps}
              hasActiveFilters={showRulesWithGaps}
              onClick={handleShowRulesWithGapsFilterButtonClick}
              iconType={showRulesWithGaps ? `checkInCircleFilled` : undefined}
--- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/rules_table_filters/rules_table_filters.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/rules_table_filters/rules_table_filters.tsx
@ -120,6 +120,8 @@ const RulesTableFiltersComponent = () => {
      <EuiFlexItem grow={false}>
        <EuiFilterGroup>
          <EuiFilterButton
+            isToggle
+            isSelected={showElasticRules}
            hasActiveFilters={showElasticRules}
            onClick={handleElasticRulesClick}
            data-test-subj="showElasticRulesFilterButton"
@ -129,6 +131,8 @@ const RulesTableFiltersComponent = () => {
            {rulesPrebuiltInstalledCount != null ? ` (${rulesPrebuiltInstalledCount ?? ''})` : ''}
          </EuiFilterButton>
          <EuiFilterButton
+            isToggle
+            isSelected={showCustomRules}
            hasActiveFilters={showCustomRules}
            onClick={handleCustomRulesClick}
            data-test-subj="showCustomRulesFilterButton"
@ -142,6 +146,8 @@ const RulesTableFiltersComponent = () => {
      <EuiFlexItem grow={false}>
        <EuiFilterGroup>
          <EuiFilterButton
+            isToggle
+            isSelected={enabled === true}
            hasActiveFilters={enabled === true}
            onClick={handleShowEnabledRulesClick}
            data-test-subj="showEnabledRulesFilterButton"
@ -150,6 +156,8 @@ const RulesTableFiltersComponent = () => {
            {i18n.ENABLED_RULES}
          </EuiFilterButton>
          <EuiFilterButton
+            isToggle
+            isSelected={enabled === false}
            hasActiveFilters={enabled === false}
            onClick={handleShowDisabledRulesClick}
            data-test-subj="showDisabledRulesFilterButton"
--- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/pages/coverage_overview/filters_panel.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/pages/coverage_overview/filters_panel.tsx
@ -76,12 +76,16 @@ const CoverageOverviewFiltersPanelComponent = () => {
              <EuiFilterGroup>
                <EuiFilterButton
                  withNext
+                  isToggle
+                  isSelected={!showExpandedCells}
                  hasActiveFilters={!showExpandedCells}
                  onClick={handleCollapseCellsFilterClick}
                >
                  {i18n.COLLAPSE_CELLS_FILTER_BUTTON}
                </EuiFilterButton>
                <EuiFilterButton
+                  isToggle
+                  isSelected={showExpandedCells}
                  hasActiveFilters={showExpandedCells}
                  onClick={handleExpandCellsFilterClick}
                >
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/flow_controls/snapshots/flow_direction_select.test.tsx.snap
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/flow_controls/snapshots/flow_direction_select.test.tsx.snap
@ -3,14 +3,18 @@
 exports[`Select Flow Direction rendering it renders the basic group button for uni-direction and bi-direction 1`] = `
 <div
  class="euiFilterGroup emotion-euiFilterGroup-uncompressed"
+>
+  <div
+    class="euiFilterButton__wrapper css-nbqv3o-wrapper-withNext-hasToggle"
  >
    <button
-    class="euiButtonEmpty euiFilterButton euiFilterButton-hasActiveFilters emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-withNext-hasActiveFilters"
+      aria-pressed="true"
+      class="euiButtonGroupButton euiButtonGroupButton-isSelected euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-fill-text-euiFilterButton-hasActiveFilters-toggle"
      data-test-subj="uniDirectional"
      type="button"
    >
      <span
-      class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed-euiFilterButton__content"
      >
        <span
          class="euiFilterButton__text emotion-euiFilterButton__text"
@ -21,13 +25,18 @@ exports[`Select Flow Direction rendering it renders the basic group button for u
        </span>
      </span>
    </button>
+  </div>
+  <div
+    class="euiFilterButton__wrapper css-10m1aro-wrapper-hasToggle"
+  >
    <button
-    class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton"
+      aria-pressed="false"
+      class="euiButtonGroupButton euiFilterButton euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-empty-text-euiFilterButton-toggle"
      data-test-subj="biDirectional"
      type="button"
    >
      <span
-      class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed-euiFilterButton__content"
      >
        <span
          class="euiFilterButton__text emotion-euiFilterButton__text"
@ -39,4 +48,5 @@ exports[`Select Flow Direction rendering it renders the basic group button for u
      </span>
    </button>
  </div>
+</div>
 `;
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/flow_controls/flow_direction_select.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/flow_controls/flow_direction_select.tsx
@ -20,6 +20,8 @@ export const FlowDirectionSelect = React.memo<Props>(({ onChangeDirection, selec
  <EuiFilterGroup>
    <EuiFilterButton
      withNext
+      isToggle
+      isSelected={selectedDirection === FlowDirection.uniDirectional}
      hasActiveFilters={selectedDirection === FlowDirection.uniDirectional}
      onClick={() => onChangeDirection(FlowDirection.uniDirectional)}
      data-test-subj={FlowDirection.uniDirectional}
@ -28,6 +30,8 @@ export const FlowDirectionSelect = React.memo<Props>(({ onChangeDirection, selec
    </EuiFilterButton>

    <EuiFilterButton
+      isToggle
+      isSelected={selectedDirection === FlowDirection.biDirectional}
      hasActiveFilters={selectedDirection === FlowDirection.biDirectional}
      onClick={() => onChangeDirection(FlowDirection.biDirectional)}
      data-test-subj={FlowDirection.biDirectional}
--- a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.tsx
@ -79,6 +79,8 @@ export const SearchRow = React.memo<Props>(
              <>
                <EuiFilterButton
                  data-test-subj="only-favorites-toggle"
+                  isToggle
+                  isSelected={onlyFavorites}
                  hasActiveFilters={onlyFavorites}
                  onClick={onToggleOnlyFavorites}
                  numFilters={favoriteCount ?? undefined}
--- a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/open_timeline/use_timeline_status.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/open_timeline/use_timeline_status.tsx
@ -93,6 +93,8 @@ export const useTimelineStatus = ({
    return isTemplateFilterEnabled
      ? filters.map((tab: TemplateTimelineFilter) => (
          <EuiFilterButton
+            isToggle
+            isSelected={tab.id === templateTimelineType}
            hasActiveFilters={tab.id === templateTimelineType}
            key={`template-timeline-filter-${tab.id}`}
            numFilters={tab.count}
--- a/x-pack/test/functional/services/slo/common.ts
+++ b/x-pack/test/functional/services/slo/common.ts
@ -66,7 +66,9 @@ export function SloUiCommonServiceProvider({ getService }: FtrProviderContext) {
    async clickOverviewMode() {
      await retry.tryForTime(60 * 1000, async () => {
        await this.assertOverviewModeSelectorExists();
-        await testSubjects.click(OVERVIEW_MODE_SELECTOR);
+        const wrapper = await testSubjects.find(OVERVIEW_MODE_SELECTOR);
+        const button = await testSubjects.findDescendant('groups', wrapper);
+        await button.click();
      });
    },

--- a/yarn.lock
+++ b/yarn.lock
@ -2165,12 +2165,12 @@
  resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
  integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==

-"@elastic/eui-amsterdam@npm:@elastic/eui@102.2.0-amsterdam.0":
-  version "102.2.0-amsterdam.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-102.2.0-amsterdam.0.tgz#f520caecd95e1054de6b8e21d67f76768ae0b345"
-  integrity sha512-VqZAac9KHMaPS8yFaibSvD/j2+5/F2/smXrVXIOoTZb7EfK7Fg0UVJOzRdlLon+4W0gHaHvijbe2q8lmym7q6A==
+"@elastic/eui-amsterdam@npm:@elastic/eui@102.3.0-amsterdam.0":
+  version "102.3.0-amsterdam.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-102.3.0-amsterdam.0.tgz#c7cf10b8746d949ca3ce395429b282e8265b9f78"
+  integrity sha512-G1W09aeOWldHwPkkJJ9/42q7+z5N9cr/oNESVW1wZ/FunYJt0FUIxqTj3QbpzK3B/qdCaW+Xe4wOyoW5Zad04Q==
  dependencies:
-    "@elastic/eui-theme-common" "1.0.0"
+    "@elastic/eui-theme-common" "1.1.0"
    "@elastic/prismjs-esql" "^1.1.0"
    "@hello-pangea/dnd" "^16.6.0"
    "@types/lodash" "^4.14.202"
@ -2206,26 +2206,26 @@
    uuid "^8.3.0"
    vfile "^4.2.1"

-"@elastic/eui-theme-borealis@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui-theme-borealis/-/eui-theme-borealis-1.0.0.tgz#f85679d2d72dfc43a620241cbf4161d4e4e81841"
-  integrity sha512-Zf3ZX5siUhF+TNOdP0FZ3PNEpVmfe3DDXFm5biAKFlGp4e5yrR1FKPYOzkOdJtPWlOoNaedawnALXNVjp1UH8w==
+"@elastic/eui-theme-borealis@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui-theme-borealis/-/eui-theme-borealis-1.1.0.tgz#36cea288aa5238987d72601725653734a4db789f"
+  integrity sha512-sm5wxrDPv/vul/37AAFmj9GfeAyA55+DWYQPI3k79hu6/Dcsp53Kdwaxh4BgFuNjfAAtMbmPkpBIOJMGSCeW1w==

-"@elastic/eui-theme-common@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui-theme-common/-/eui-theme-common-1.0.0.tgz#c5e7b7597c4ebe71fc533b18458415a14a93794d"
-  integrity sha512-9+P21npVm05OmFr0OPkA5DSdts9teOo/OEotbJFAVkqBLkNf+Eevv6q89B8eQ6r383RnVwTl7vBzb6M9PnULJg==
+"@elastic/eui-theme-common@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui-theme-common/-/eui-theme-common-1.1.0.tgz#952d98faf5a6afab50f126cd6eca980966317a1d"
+  integrity sha512-WI+hkJcPdX82a7Y7LGIkHnC80X4O8YwjjzgwEHngsuMXKuFUkCs9JFru1adzg+mF0TAseUjE+V5PvNWlrm8J3g==
  dependencies:
    "@types/lodash" "^4.14.202"
    chroma-js "^2.4.2"
    lodash "^4.17.21"

-"@elastic/eui@102.2.0":
-  version "102.2.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-102.2.0.tgz#cba90fece1afa78686fd51ba9fa5fd019fd0c6a0"
-  integrity sha512-ksFQ66kKtftvcaEuHuzI7vI6CSDeet9QU5nkBDOl18QuoA3VyeGzX4ISranWj+Gyk22SGn2K9BEudXSVkoDBWg==
+"@elastic/eui@102.3.0":
+  version "102.3.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-102.3.0.tgz#8bdeceb229d6987874ac32ec0db6e34d74bae0c9"
+  integrity sha512-U0WOGkKaiYc42t6d+42RYnFJD6p03pHheM8H8t2sr+fmsnd6sMzEwkng+xiTZrUGSvtqmw1ltbJXdK31J5EwdQ==
  dependencies:
-    "@elastic/eui-theme-common" "1.0.0"
+    "@elastic/eui-theme-common" "1.1.0"
    "@elastic/prismjs-esql" "^1.1.0"
    "@hello-pangea/dnd" "^16.6.0"
    "@types/lodash" "^4.14.202"