diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
index a1d522091f58..d2f63e2a275c 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -572,7 +572,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
aria-expanded="false"
aria-haspopup="true"
aria-labelledby="tooltip-:r2m:"
- class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--primary"
+ class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--ghost"
title="Settings"
type="button"
>
@@ -1003,7 +1003,7 @@ exports[`DataTable renders as expected - Component API should render and match s
aria-expanded="false"
aria-haspopup="true"
aria-labelledby="tooltip-:rk:"
- class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--primary"
+ class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--ghost"
title="Settings"
type="button"
>
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap
index bc024fb82328..fc8b82a98834 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap
@@ -15,7 +15,7 @@ exports[`TableToolbarMenu renders as expected - Component API should render 1`]
aria-expanded="false"
aria-haspopup="true"
aria-labelledby="tooltip-:r0:"
- class="cds--btn--icon-only custom-class cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--primary"
+ class="cds--btn--icon-only custom-class cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--ghost"
title="Add"
type="button"
>
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-test.js b/packages/react/src/components/OverflowMenu/OverflowMenu-test.js
index daa44bb499d1..68dd74424456 100644
--- a/packages/react/src/components/OverflowMenu/OverflowMenu-test.js
+++ b/packages/react/src/components/OverflowMenu/OverflowMenu-test.js
@@ -37,6 +37,21 @@ describe('OverflowMenu', () => {
expect(screen.getByRole('button')).toHaveAttribute('data-testid', 'test');
});
+ it('should always use button kind=ghost', () => {
+ render(
+
+
+
+
+ );
+
+ expect(screen.getByRole('button')).not.toHaveClass('cds--btn--primary');
+ expect(screen.getByRole('button')).toHaveClass('cds--btn--ghost');
+ });
+
it('should flip menu alignment', async () => {
render(
+ label={iconDescription}
+ kind="ghost">
{open && this.state.hasMountedTrigger && wrappedMenuBody}
diff --git a/packages/react/src/components/OverflowMenu/next/OverflowMenu-test.js b/packages/react/src/components/OverflowMenu/next/OverflowMenu-test.js
index 519c0783a64a..0503b6450c77 100644
--- a/packages/react/src/components/OverflowMenu/next/OverflowMenu-test.js
+++ b/packages/react/src/components/OverflowMenu/next/OverflowMenu-test.js
@@ -86,6 +86,22 @@ describe('OverflowMenu (enable-v12-overflowmenu)', () => {
expect(container.firstChild).toHaveAttribute('id', 'custom-id');
});
+ it('should always use button kind=ghost', () => {
+ render(
+
+
+
+
+ );
+
+ expect(screen.getByRole('button')).not.toHaveClass('cds--btn--primary');
+ expect(screen.getByRole('button')).toHaveClass('cds--btn--ghost');
+ });
+
it('should close menu on outside click', async () => {
render(
diff --git a/packages/react/src/components/OverflowMenu/next/index.tsx b/packages/react/src/components/OverflowMenu/next/index.tsx
index 4262b53df804..3b9d3c92a504 100644
--- a/packages/react/src/components/OverflowMenu/next/index.tsx
+++ b/packages/react/src/components/OverflowMenu/next/index.tsx
@@ -189,7 +189,8 @@ const OverflowMenu = React.forwardRef(
onMouseDown={handleMousedown}
ref={floatingRef}
label={label}
- align={tooltipAlignment}>
+ align={tooltipAlignment}
+ kind="ghost">