diff --git a/.betterer.results b/.betterer.results
index 5c68c3c61bc..ec80329e2b6 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -1233,12 +1233,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "5"],
       [0, 0, 0, "Styles should be written using objects.", "6"]
     ],
-    "public/app/core/components/RolePicker/RolePickerMenu.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
-    "public/app/core/components/RolePicker/RolePickerSubMenu.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
     "public/app/core/components/RolePicker/ValueContainer.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
diff --git a/public/app/core/components/RolePicker/RolePickerMenu.tsx b/public/app/core/components/RolePicker/RolePickerMenu.tsx
index 1bfe1d63ce7..cb542c416ce 100644
--- a/public/app/core/components/RolePicker/RolePickerMenu.tsx
+++ b/public/app/core/components/RolePicker/RolePickerMenu.tsx
@@ -1,7 +1,7 @@
 import { css, cx } from '@emotion/css';
 import React, { useEffect, useRef, useState } from 'react';
 
-import { Button, CustomScrollbar, HorizontalGroup, TextLink, useStyles2, useTheme2 } from '@grafana/ui';
+import { Button, CustomScrollbar, Stack, TextLink, useStyles2, useTheme2 } from '@grafana/ui';
 import { getSelectStyles } from '@grafana/ui/src/components/Select/getSelectStyles';
 import { OrgRole, Role } from 'app/types';
 
@@ -256,14 +256,14 @@ export const RolePickerMenu = ({
           ))}
         </CustomScrollbar>
         <div className={customStyles.menuButtonRow}>
-          <HorizontalGroup justify="flex-end">
+          <Stack justifyContent="flex-end">
             <Button size="sm" fill="text" onClick={onClearInternal} disabled={updateDisabled}>
               Clear all
             </Button>
             <Button size="sm" onClick={onUpdateInternal} disabled={updateDisabled}>
               {apply ? `Apply` : `Update`}
             </Button>
-          </HorizontalGroup>
+          </Stack>
         </div>
       </div>
       <div ref={subMenuNode} />
diff --git a/public/app/core/components/RolePicker/RolePickerSubMenu.tsx b/public/app/core/components/RolePicker/RolePickerSubMenu.tsx
index 4f6b5aa2f9f..2c5ba1b151f 100644
--- a/public/app/core/components/RolePicker/RolePickerSubMenu.tsx
+++ b/public/app/core/components/RolePicker/RolePickerSubMenu.tsx
@@ -1,7 +1,7 @@
 import { cx } from '@emotion/css';
 import React from 'react';
 
-import { Button, CustomScrollbar, HorizontalGroup, useStyles2, useTheme2 } from '@grafana/ui';
+import { Button, CustomScrollbar, Stack, useStyles2, useTheme2 } from '@grafana/ui';
 import { getSelectStyles } from '@grafana/ui/src/components/Select/getSelectStyles';
 import { Role } from 'app/types';
 
@@ -65,11 +65,11 @@ export const RolePickerSubMenu = ({
         </div>
       </CustomScrollbar>
       <div className={customStyles.subMenuButtonRow}>
-        <HorizontalGroup justify="flex-end">
+        <Stack justifyContent="flex-end">
           <Button size="sm" fill="text" onClick={onClearInternal}>
             Clear
           </Button>
-        </HorizontalGroup>
+        </Stack>
       </div>
     </div>
   );