diff --git a/packages/buttons/src/elements/Button.spec.tsx b/packages/buttons/src/elements/Button.spec.tsx
index 43d436a648a..8224ac8847a 100644
--- a/packages/buttons/src/elements/Button.spec.tsx
+++ b/packages/buttons/src/elements/Button.spec.tsx
@@ -9,6 +9,7 @@ import React from 'react';
 import { render, renderRtl } from 'garden-test-utils';
 import { Button } from './Button';
 import TestIcon from '@zendeskgarden/svg-icons/src/16/gear-stroke.svg';
+import { COMPONENT_ID } from '../styled/StyledButton';
 
 describe('Button', () => {
   it('is rendered as a button', () => {
@@ -24,6 +25,20 @@ describe('Button', () => {
     expect(container.firstChild).toBe(ref.current);
   });
 
+  describe('`data-garden-id` attribute', () => {
+    it('sets a default data-garden-id attribute', () => {
+      const { getByRole } = render(<Button />);
+
+      expect(getByRole('button')).toHaveAttribute('data-garden-id', COMPONENT_ID);
+    });
+
+    it('supports overriding the data-garden-id attribute', () => {
+      const { getByRole } = render(<Button data-garden-id="myCoolButton" />);
+
+      expect(getByRole('button')).toHaveAttribute('data-garden-id', 'myCoolButton');
+    });
+  });
+
   describe('Icons', () => {
     it('successfully renders start and end icons', () => {
       const { getByTestId } = render(
diff --git a/packages/buttons/src/styled/StyledAnchor.spec.tsx b/packages/buttons/src/styled/StyledAnchor.spec.tsx
index 376c2a674c6..f116d162e0e 100644
--- a/packages/buttons/src/styled/StyledAnchor.spec.tsx
+++ b/packages/buttons/src/styled/StyledAnchor.spec.tsx
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { render, renderRtl } from 'garden-test-utils';
+
 import { PALETTE } from '@zendeskgarden/react-theming';
 import { StyledAnchor } from './StyledAnchor';
 
@@ -34,4 +35,12 @@ describe('StyledAnchor', () => {
 
     expect(container.firstChild).toHaveStyleRule('direction', 'rtl');
   });
+
+  describe('`data-garden-id` attribute', () => {
+    it('has the correct `data-garden-id`', () => {
+      const { container } = render(<StyledAnchor />);
+
+      expect(container.firstChild).toHaveAttribute('data-garden-id', 'buttons.anchor');
+    });
+  });
 });
diff --git a/packages/buttons/src/styled/StyledAnchor.ts b/packages/buttons/src/styled/StyledAnchor.ts
index eee90b6a431..1db00498192 100644
--- a/packages/buttons/src/styled/StyledAnchor.ts
+++ b/packages/buttons/src/styled/StyledAnchor.ts
@@ -8,13 +8,14 @@
 import styled from 'styled-components';
 import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { StyledButton } from './StyledButton';
+import { IAnchorProps } from './../types';
 
 const COMPONENT_ID = 'buttons.anchor';
 
 /**
  * Accepts all `<a>` props
  */
-export const StyledAnchor = styled(StyledButton).attrs(props => ({
+export const StyledAnchor = styled(StyledButton).attrs<IAnchorProps>(props => ({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION,
   as: 'a',
@@ -24,7 +25,7 @@ export const StyledAnchor = styled(StyledButton).attrs(props => ({
 }))`
   direction: ${props => props.theme.rtl && 'rtl'};
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${props => retrieveComponentStyles((props as any)['data-garden-id'], props)};
 `;
 
 StyledAnchor.defaultProps = {
diff --git a/packages/buttons/src/styled/StyledButton.ts b/packages/buttons/src/styled/StyledButton.ts
index 43127c9a536..f23bf9c5d9e 100644
--- a/packages/buttons/src/styled/StyledButton.ts
+++ b/packages/buttons/src/styled/StyledButton.ts
@@ -19,7 +19,7 @@ import { IButtonProps } from '../types';
 import { StyledSplitButton } from './StyledSplitButton';
 import { StyledIcon } from './StyledIcon';
 
-const COMPONENT_ID = 'buttons.button';
+export const COMPONENT_ID = 'buttons.button';
 
 const getBorderRadius = (props: IButtonProps & ThemeProps<DefaultTheme>) => {
   if (props.isPill) {
@@ -431,7 +431,7 @@ const sizeStyles = (props: IButtonProps & ThemeProps<DefaultTheme>) => {
  * 3. Shifting :focus-visible from LVHFA order to preserve `text-decoration` on hover
  */
 export const StyledButton = styled.button.attrs<IButtonProps>(props => ({
-  'data-garden-id': COMPONENT_ID,
+  'data-garden-id': (props as any)['data-garden-id'] || COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION,
   type: props.type || 'button'
 }))<IButtonProps>`
diff --git a/packages/buttons/src/styled/StyledIcon.spec.tsx b/packages/buttons/src/styled/StyledIcon.spec.tsx
index 738486e89a9..6c62cc615e4 100644
--- a/packages/buttons/src/styled/StyledIcon.spec.tsx
+++ b/packages/buttons/src/styled/StyledIcon.spec.tsx
@@ -79,4 +79,16 @@ describe('StyledIcon', () => {
       }).toThrow();
     });
   });
+
+  describe('`data-garden-id` attribute', () => {
+    it('has the correct `data-garden-id`', () => {
+      const { container } = render(
+        <StyledIcon>
+          <TestIcon />
+        </StyledIcon>
+      );
+
+      expect(container.firstChild).toHaveAttribute('data-garden-id', 'buttons.icon');
+    });
+  });
 });
diff --git a/packages/buttons/src/styled/StyledIconButton.spec.tsx b/packages/buttons/src/styled/StyledIconButton.spec.tsx
index 9008c3f8aef..917a30bc3d5 100644
--- a/packages/buttons/src/styled/StyledIconButton.spec.tsx
+++ b/packages/buttons/src/styled/StyledIconButton.spec.tsx
@@ -8,7 +8,7 @@
 import React from 'react';
 import { css } from 'styled-components';
 import { render } from 'garden-test-utils';
-import { StyledIconButton } from './StyledIconButton';
+import { COMPONENT_ID, StyledIconButton } from './StyledIconButton';
 import { StyledIcon } from './StyledIcon';
 import { PALETTE } from '@zendeskgarden/react-theming';
 import { rgba } from 'polished';
@@ -88,4 +88,12 @@ describe('StyledIconButton', () => {
       });
     });
   });
+
+  describe('`data-garden-id` attribute', () => {
+    it('has the correct `data-garden-id`', () => {
+      const { container } = render(<StyledIconButton />);
+
+      expect(container.firstChild).toHaveAttribute('data-garden-id', COMPONENT_ID);
+    });
+  });
 });
diff --git a/packages/buttons/src/styled/StyledIconButton.ts b/packages/buttons/src/styled/StyledIconButton.ts
index a6a8857b5e0..47906e658a0 100644
--- a/packages/buttons/src/styled/StyledIconButton.ts
+++ b/packages/buttons/src/styled/StyledIconButton.ts
@@ -8,10 +8,10 @@
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
 import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { IButtonProps } from '../types';
-import { StyledButton, getHeight } from './StyledButton';
+import { COMPONENT_ID as BTN_COMPONENT_ID, StyledButton, getHeight } from './StyledButton';
 import { StyledIcon } from './StyledIcon';
 
-const COMPONENT_ID = 'buttons.icon_button';
+export const COMPONENT_ID = 'buttons.icon_button';
 
 const iconColorStyles = ({ theme }: IButtonProps & ThemeProps<DefaultTheme>) => {
   const options = { theme, variable: 'foreground.default' };
@@ -69,17 +69,21 @@ const iconStyles = (props: IButtonProps & ThemeProps<DefaultTheme>) => {
   `;
 };
 
-export const StyledIconButton = styled(StyledButton as 'button').attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': PACKAGE_VERSION
-})<IButtonProps>`
+export const StyledIconButton = styled(StyledButton).attrs<IButtonProps>(props => {
+  const externalId: string = (props as any)['data-garden-id'];
+
+  return {
+    'data-garden-id': externalId && externalId !== BTN_COMPONENT_ID ? externalId : COMPONENT_ID,
+    'data-garden-version': PACKAGE_VERSION
+  };
+})`
   ${props => iconButtonStyles(props)};
 
   & ${StyledIcon} {
     ${props => iconStyles(props)}
   }
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${props => retrieveComponentStyles((props as any)['data-garden-id'], props)};
 `;
 
 StyledIconButton.defaultProps = {
diff --git a/packages/buttons/src/styled/index.ts b/packages/buttons/src/styled/index.ts
index da45c860e97..75c16bfd9c9 100644
--- a/packages/buttons/src/styled/index.ts
+++ b/packages/buttons/src/styled/index.ts
@@ -6,8 +6,8 @@
  */
 
 export * from './StyledAnchor';
-export * from './StyledButton';
+export { StyledButton } from './StyledButton';
 export * from './StyledSplitButton';
 export * from './StyledExternalIcon';
 export * from './StyledIcon';
-export * from './StyledIconButton';
+export { StyledIconButton } from './StyledIconButton';
diff --git a/packages/colorpickers/src/elements/ColorSwatchDialog/index.spec.tsx b/packages/colorpickers/src/elements/ColorSwatchDialog/index.spec.tsx
index cfc0e8343cc..fd433305009 100644
--- a/packages/colorpickers/src/elements/ColorSwatchDialog/index.spec.tsx
+++ b/packages/colorpickers/src/elements/ColorSwatchDialog/index.spec.tsx
@@ -247,4 +247,20 @@ describe('ColorSwatchDialog', () => {
       expect(dialog).toBeNull();
     });
   });
+
+  describe('`data-garden-id` attribute', () => {
+    it('has the correct `data-garden-id`', () => {
+      const { getByRole } = render(
+        <ColorSwatchDialog
+          name="test"
+          colors={colors}
+          buttonProps={{
+            'aria-label': 'Choose your favorite color'
+          }}
+        />
+      );
+
+      expect(getByRole('button')).toHaveAttribute('data-garden-id', 'buttons.button');
+    });
+  });
 });
diff --git a/packages/colorpickers/src/styled/ColorPickerDialog/StyledButton.ts b/packages/colorpickers/src/styled/ColorPickerDialog/StyledButton.ts
index a8371f58121..03e3850fff0 100644
--- a/packages/colorpickers/src/styled/ColorPickerDialog/StyledButton.ts
+++ b/packages/colorpickers/src/styled/ColorPickerDialog/StyledButton.ts
@@ -6,18 +6,15 @@
  */
 
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { Button } from '@zendeskgarden/react-buttons';
 
-const COMPONENT_ID = 'colorpickers.colordialog_button';
-
 /**
  * 1. IE11 group width override.
  * 2. Input group border overrides.
  */
 export const StyledButton = styled(Button as any).attrs({
   isNeutral: true,
-  'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })`
   padding: 0;
@@ -32,8 +29,6 @@ export const StyledButton = styled(Button as any).attrs({
       ${props => props.theme.borderRadii.md} !important; /* [2] */
     /* stylelint-enable */
   }
-
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
 
 StyledButton.defaultProps = {
diff --git a/packages/dropdowns/src/elements/menu/Menu.spec.tsx b/packages/dropdowns/src/elements/menu/Menu.spec.tsx
index d97886a36b3..0427e43ec6b 100644
--- a/packages/dropdowns/src/elements/menu/Menu.spec.tsx
+++ b/packages/dropdowns/src/elements/menu/Menu.spec.tsx
@@ -659,4 +659,15 @@ describe('Menu', () => {
       expect(getByTestId('grape')).toHaveAttribute('aria-checked', 'true');
     });
   });
+
+  describe('`data-garden-id` attribute', () => {
+    it('has the correct `data-garden-id`', async () => {
+      const { getByRole } = render(<TestMenu button="click me" />);
+
+      await floating();
+      const button = getByRole('button');
+
+      expect(button).toHaveAttribute('data-garden-id', 'buttons.button');
+    });
+  });
 });
diff --git a/packages/dropdowns/src/elements/menu/Menu.tsx b/packages/dropdowns/src/elements/menu/Menu.tsx
index be8a714bb4c..9067aaafb65 100644
--- a/packages/dropdowns/src/elements/menu/Menu.tsx
+++ b/packages/dropdowns/src/elements/menu/Menu.tsx
@@ -11,12 +11,11 @@ import { mergeRefs } from 'react-merge-refs';
 import { ThemeContext } from 'styled-components';
 import { useMenu } from '@zendeskgarden/container-menu';
 import { DEFAULT_THEME, useWindow } from '@zendeskgarden/react-theming';
-import { IButtonProps } from '@zendeskgarden/react-buttons';
+import { Button, IButtonProps } from '@zendeskgarden/react-buttons';
 import { IMenuProps, PLACEMENT } from '../../types';
 import { MenuContext } from '../../context/useMenuContext';
 import { toItems } from './utils';
 import { MenuList } from './MenuList';
-import { StyledButton } from '../../views';
 import ChevronIcon from '@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg';
 
 /**
@@ -87,12 +86,12 @@ export const Menu = forwardRef<HTMLUListElement, IMenuProps>(
       typeof button === 'function' ? (
         button(triggerProps)
       ) : (
-        <StyledButton {...triggerProps}>
+        <Button {...triggerProps}>
           {button}
-          <StyledButton.EndIcon isRotated={isExpanded}>
+          <Button.EndIcon isRotated={isExpanded}>
             <ChevronIcon />
-          </StyledButton.EndIcon>
-        </StyledButton>
+          </Button.EndIcon>
+        </Button>
       );
 
     const contextValue = useMemo(
diff --git a/packages/dropdowns/src/views/index.ts b/packages/dropdowns/src/views/index.ts
index d1cef2e9c59..e459f2e27a3 100644
--- a/packages/dropdowns/src/views/index.ts
+++ b/packages/dropdowns/src/views/index.ts
@@ -36,5 +36,4 @@ export * from './menu/StyledItemGroup';
 export * from './menu/StyledItemIcon';
 export * from './menu/StyledItemMeta';
 export * from './menu/StyledItemTypeIcon';
-export * from './menu/StyledButton';
 export * from './menu/StyledSeparator';
diff --git a/packages/dropdowns/src/views/menu/StyledButton.ts b/packages/dropdowns/src/views/menu/StyledButton.ts
deleted file mode 100644
index e6bab89a6df..00000000000
--- a/packages/dropdowns/src/views/menu/StyledButton.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
-import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
-import { Button } from '@zendeskgarden/react-buttons';
-
-const COMPONENT_ID = 'dropdowns.menu.button';
-
-export const StyledButton = styled(Button).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': PACKAGE_VERSION
-})`
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
-`;
-
-StyledButton.defaultProps = {
-  theme: DEFAULT_THEME
-};
diff --git a/packages/grid/src/elements/pane/components/SplitterButton.spec.tsx b/packages/grid/src/elements/pane/components/SplitterButton.spec.tsx
index cfcf83a9764..7e8efb6a40d 100644
--- a/packages/grid/src/elements/pane/components/SplitterButton.spec.tsx
+++ b/packages/grid/src/elements/pane/components/SplitterButton.spec.tsx
@@ -50,4 +50,12 @@ describe('SplitterButton', () => {
 
     expect(getByLabelText('toggle a').querySelector('svg')).toBeDefined();
   });
+
+  describe('`data-garden-id` attribute', () => {
+    it('has the correct `data-garden-id`', () => {
+      const { getByLabelText } = render(<UncontrolledTestSplitter />);
+
+      expect(getByLabelText('toggle a')).toHaveAttribute('data-garden-id', 'buttons.icon_button');
+    });
+  });
 });
diff --git a/packages/grid/src/styled/pane/StyledPaneSplitterButton.ts b/packages/grid/src/styled/pane/StyledPaneSplitterButton.ts
index bb26b7d0ff3..1a8edda090d 100644
--- a/packages/grid/src/styled/pane/StyledPaneSplitterButton.ts
+++ b/packages/grid/src/styled/pane/StyledPaneSplitterButton.ts
@@ -6,12 +6,10 @@
  */
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { ChevronButton } from '@zendeskgarden/react-buttons';
 import { Orientation } from '../../types';
 
-const COMPONENT_ID = 'pane.splitter_button';
-
 interface IStyledSplitterButtonProps {
   orientation: Orientation;
   isRotated: boolean;
@@ -52,7 +50,6 @@ const transformStyles = (props: IStyledSplitterButtonProps & ThemeProps<DefaultT
 };
 
 export const StyledPaneSplitterButton = styled(ChevronButton).attrs<IStyledSplitterButtonProps>({
-  'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION,
   isBasic: true,
   isPill: true,
@@ -61,8 +58,6 @@ export const StyledPaneSplitterButton = styled(ChevronButton).attrs<IStyledSplit
   ${sizeStyles};
 
   ${transformStyles};
-
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
 
 StyledPaneSplitterButton.defaultProps = {
diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.spec.tsx b/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.spec.tsx
index 64e96e447af..3020fe9fdd3 100644
--- a/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.spec.tsx
+++ b/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.spec.tsx
@@ -35,4 +35,12 @@ describe('StyledGlobalAlertButton', () => {
       }[type]
     );
   });
+
+  describe('`data-garden-id` attribute', () => {
+    it('has the correct `data-garden-id`', () => {
+      const { container } = render(<StyledGlobalAlertButton alertType="info" />);
+
+      expect(container.firstChild).toHaveAttribute('data-garden-id', 'buttons.button');
+    });
+  });
 });
diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.ts b/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.ts
index 11786e27bca..55c05e64c36 100644
--- a/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.ts
+++ b/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.ts
@@ -6,19 +6,12 @@
  */
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
-import {
-  getColorV8,
-  DEFAULT_THEME,
-  retrieveComponentStyles,
-  focusStyles
-} from '@zendeskgarden/react-theming';
+import { getColorV8, DEFAULT_THEME, focusStyles } from '@zendeskgarden/react-theming';
 import { Button } from '@zendeskgarden/react-buttons';
 
 import { IGlobalAlertProps } from '../../types';
 import { colorStyles as basicColorStyles } from './StyledGlobalAlertClose';
 
-const COMPONENT_ID = 'notifications.global-alert.button';
-
 interface IStyledGlobalAlertButtonProps {
   alertType: IGlobalAlertProps['type'];
   isBasic?: boolean;
@@ -91,7 +84,6 @@ function sizeStyles(props: ThemeProps<DefaultTheme>) {
 }
 
 export const StyledGlobalAlertButton = styled(Button).attrs({
-  'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION,
   focusInset: false,
   isDanger: false,
@@ -105,8 +97,6 @@ export const StyledGlobalAlertButton = styled(Button).attrs({
 
   ${sizeStyles};
   ${colorStyles};
-
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
 
 StyledGlobalAlertButton.defaultProps = {
diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.spec.tsx b/packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.spec.tsx
index 4aaf3e6634c..53c76887724 100644
--- a/packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.spec.tsx
+++ b/packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.spec.tsx
@@ -32,4 +32,16 @@ describe('StyledGlobalAlertClose', () => {
       { modifier: '&:hover' }
     );
   });
+
+  describe('`data-garden-id` attribute', () => {
+    it('has the correct `data-garden-id`', () => {
+      const { container } = render(
+        <StyledGlobalAlertClose alertType="success">
+          <XStrokeIcon />
+        </StyledGlobalAlertClose>
+      );
+
+      expect(container.firstChild).toHaveAttribute('data-garden-id', 'buttons.icon_button');
+    });
+  });
 });
diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.ts b/packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.ts
index 556e4bae06b..81a02d474f5 100644
--- a/packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.ts
+++ b/packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.ts
@@ -6,18 +6,11 @@
  */
 
 import styled, { css, DefaultTheme, ThemeProps } from 'styled-components';
-import {
-  getColorV8,
-  DEFAULT_THEME,
-  retrieveComponentStyles,
-  focusStyles
-} from '@zendeskgarden/react-theming';
+import { getColorV8, DEFAULT_THEME, focusStyles } from '@zendeskgarden/react-theming';
 import { IconButton } from '@zendeskgarden/react-buttons';
 
 import { IGlobalAlertProps } from '../../types';
 
-const COMPONENT_ID = 'notifications.global-alert.close';
-
 interface IStyledGlobalAlertCloseProps {
   alertType: IGlobalAlertProps['type'];
 }
@@ -97,14 +90,11 @@ const sizeStyles = (props: ThemeProps<DefaultTheme>) => {
 };
 
 export const StyledGlobalAlertClose = styled(IconButton).attrs({
-  'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION,
   size: 'small'
 })<IStyledGlobalAlertCloseProps>`
   ${sizeStyles};
   ${colorStyles};
-
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
 
 StyledGlobalAlertClose.defaultProps = {