diff --git a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.internal.story.tsx b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.internal.story.tsx
index b6f6dc9284b..ba562bda8c5 100644
--- a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.internal.story.tsx
+++ b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.internal.story.tsx
@@ -27,6 +27,7 @@ export const Basic: StoryFn<typeof ButtonSelect> = (args) => {
   return (
     <div style={{ marginLeft: '100px', position: 'relative', display: 'inline-block' }}>
       <ButtonSelect
+        variant="canvas"
         {...args}
         onChange={(value) => {
           action('onChange fired')(value);
diff --git a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx
index 12bc9d9afe9..1a1e6e5b37e 100644
--- a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx
+++ b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx
@@ -8,7 +8,6 @@ import React, { HTMLAttributes } from 'react';
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { ButtonGroup } from '../Button';
 import { ClickOutsideWrapper } from '../ClickOutsideWrapper/ClickOutsideWrapper';
 import { Menu } from '../Menu/Menu';
 import { MenuItem } from '../Menu/MenuItem';
@@ -46,7 +45,7 @@ const ButtonSelectComponent = <T,>(props: Props<T>) => {
   };
 
   return (
-    <ButtonGroup className={styles.wrapper}>
+    <div className={styles.wrapper}>
       <ToolbarButton
         className={className}
         isOpen={state.isOpen}
@@ -83,7 +82,7 @@ const ButtonSelectComponent = <T,>(props: Props<T>) => {
           </ClickOutsideWrapper>
         </div>
       )}
-    </ButtonGroup>
+    </div>
   );
 };