diff --git a/packages/grafana-ui/src/components/Button/ButtonGroup.tsx b/packages/grafana-ui/src/components/Button/ButtonGroup.tsx
index b2921949ea1..c10d42b345a 100644
--- a/packages/grafana-ui/src/components/Button/ButtonGroup.tsx
+++ b/packages/grafana-ui/src/components/Button/ButtonGroup.tsx
@@ -1,14 +1,14 @@
 import React, { forwardRef, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
-import { GrafanaTheme } from '@grafana/data';
-import { useStyles } from '../../themes';
+import { useStyles2 } from '../../themes';
+import { GrafanaThemeV2 } from '@grafana/data';
 
 export interface Props extends HTMLAttributes<HTMLDivElement> {
   className?: string;
 }
 
 export const ButtonGroup = forwardRef<HTMLDivElement, Props>(({ className, children, ...rest }, ref) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
 
   return (
     <div ref={ref} className={cx('button-group', styles.wrapper, className)} {...rest}>
@@ -19,7 +19,7 @@ export const ButtonGroup = forwardRef<HTMLDivElement, Props>(({ className, child
 
 ButtonGroup.displayName = 'ButtonGroup';
 
-const getStyles = (theme: GrafanaTheme) => ({
+const getStyles = (theme: GrafanaThemeV2) => ({
   wrapper: css`
     display: flex;
 
@@ -32,12 +32,12 @@ const getStyles = (theme: GrafanaTheme) => ({
       }
 
       &:last-of-type {
-        border-radius: 0 ${theme.border.radius.sm} ${theme.border.radius.sm} 0;
+        border-radius: 0 ${theme.shape.borderRadius()} ${theme.shape.borderRadius()} 0;
         border-right-width: 1px;
       }
 
       &:first-child {
-        border-radius: ${theme.border.radius.sm} 0 0 ${theme.border.radius.sm};
+        border-radius: ${theme.shape.borderRadius()} 0 0 ${theme.shape.borderRadius()};
       }
     }
   `,