[EuiSplitButton] Add split button component #9269

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged

mgadewoll merged 21 commits into elastic:main from mgadewoll:feat/8942-split-button

Dec 19, 2025

...ages/eui/.loki/reference/chrome_desktop_Navigation_EuiSplitButton_Dark_Mode.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

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

....loki/reference/chrome_desktop_Navigation_EuiSplitButton_High_Contrast_Mode.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

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

.../reference/chrome_desktop_Navigation_EuiSplitButton_High_Contrast_Mode_Dark.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

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

...s/eui/.loki/reference/chrome_desktop_Navigation_EuiSplitButton_Kitchen_Sink.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

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

...ges/eui/.loki/reference/chrome_desktop_Navigation_EuiSplitButton_Playground.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

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

.../reference/chrome_desktop_Navigation_EuiSplitButton_Single_Secondary_Action.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

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

...s/eui/.loki/reference/chrome_desktop_Navigation_EuiSplitButton_With_Popover.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

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

...s/eui/.loki/reference/chrome_desktop_Navigation_EuiSplitButton_With_Tooltip.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

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

...ki/reference/chrome_desktop_Navigation_EuiSplitButton_With_Wrapping_Popover.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

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

packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSplitButton_Dark_Mode.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

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

.../.loki/reference/chrome_mobile_Navigation_EuiSplitButton_High_Contrast_Mode.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

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

...i/reference/chrome_mobile_Navigation_EuiSplitButton_High_Contrast_Mode_Dark.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

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

...es/eui/.loki/reference/chrome_mobile_Navigation_EuiSplitButton_Kitchen_Sink.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

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

...ages/eui/.loki/reference/chrome_mobile_Navigation_EuiSplitButton_Playground.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

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

...i/reference/chrome_mobile_Navigation_EuiSplitButton_Single_Secondary_Action.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

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

...es/eui/.loki/reference/chrome_mobile_Navigation_EuiSplitButton_With_Popover.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

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

...es/eui/.loki/reference/chrome_mobile_Navigation_EuiSplitButton_With_Tooltip.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

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

...oki/reference/chrome_mobile_Navigation_EuiSplitButton_With_Wrapping_Popover.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

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

packages/eui/changelogs/upcoming/9269.md

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		- Added `EuiSplitButton` and its respective sub-components `EuiSplitButton.ActionPrimary` and `EuiSplitButton.ActionSecondary`

packages/eui/src/components/button/button_icon/button_icon.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -106,7 +106,7 @@ export type EuiButtonIconPropsForButton = { @@
       }
     >;
-    type Props = ExclusiveUnion<
+    export type Props = ExclusiveUnion<
       EuiButtonIconPropsForAnchor,
       EuiButtonIconPropsForButton
     >;
@@ Expand Down @@

packages/eui/src/components/button/index.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -23,3 +23,10 @@ export type { @@
       EuiButtonGroupProps,
     } from './button_group';
     export { EuiButtonGroup } from './button_group';
+    export type {
+      EuiSplitButtonProps,
+      EuiSplitButtonActionPrimaryProps,
+      EuiSplitButtonActionSecondaryProps,
+    } from './split_button';
+    export { EuiSplitButton } from './split_button';

packages/eui/src/components/button/split_button/__snapshots__/split_button.test.tsx.snap

-Original file line number
+Diff line change
@@ -0,0 +1,41 @@
+    // Jest Snapshot v1, https://goo.gl/fbAQLP
+    exports[`EuiSplitButton renders 1`] = `
+    <div
+      class="euiSplitButton emotion-euiSplitButton"
+      role="group"
+    >
+      <button
+        class="euiButton euiSplitButtonActionPrimary emotion-euiButtonDisplay-m-defaultMinWidth-base-primary-euiSplitButtonActionPrimary"
+        data-test-subj="primary-action"
+        type="button"
+      >
+        <span
+          class="emotion-euiButtonDisplayContent"
+        >
+          <span
+            class="eui-textTruncate"
+          >
+            Primary Action
+          </span>
+        </span>
+      </button>
+      <div
+        aria-hidden="true"
+        class="euiSplitButton__divider css-1p9055z-divider"
+      />
+      <button
+        aria-label="Secondary action"
+        class="euiButtonIcon euiSplitButtonActionSecondary emotion-euiButtonIcon-m-base-primary-euiSplitButtonActionSecondary"
+        data-test-subj="secondary-action"
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+          class="euiButtonIcon__icon"
+          color="inherit"
+          data-euiicon-type="arrowDown"
+        />
+      </button>
+    </div>
+    `;

packages/eui/src/components/button/split_button/index.ts

-Original file line number
+Diff line change
@@ -0,0 +1,18 @@
+    /*
+     * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+     * or more contributor license agreements. Licensed under the Elastic License
+     * 2.0 and the Server Side Public License, v 1; you may not use this file except
+     * in compliance with, at your election, the Elastic License 2.0 or the Server
+     * Side Public License, v 1.
+     */
+    export type { EuiSplitButtonProps } from './split_button';
+    export { EuiSplitButton } from './split_button';
+    export type {
+      EuiSplitButtonActionPrimaryProps,
+      EuiSplitButtonActionSecondaryProps,
+    } from './split_button_actions';
+    export {
+      EuiSplitButtonActionPrimary,
+      EuiSplitButtonActionSecondary,
+    } from './split_button_actions';