diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinkEditorModalContent.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinkEditorModalContent.tsx
index 5303b403694..3d3a25fd749 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinkEditorModalContent.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinkEditorModalContent.tsx
@@ -1,8 +1,8 @@
 import { DataFrame, DataLink, VariableSuggestion } from '@grafana/data';
 import React, { FC, useState } from 'react';
 import { DataLinkEditor } from '../DataLinkEditor';
-import { HorizontalGroup } from '../../Layout/Layout';
 import { Button } from '../../Button';
+import { Modal } from '../../Modal/Modal';
 
 interface DataLinkEditorModalContentProps {
   link: DataLink;
@@ -32,7 +32,10 @@ export const DataLinkEditorModalContent: FC<DataLinkEditorModalContentProps> = (
           setDirtyLink(link);
         }}
       />
-      <HorizontalGroup>
+      <Modal.ButtonRow>
+        <Button variant="secondary" onClick={() => onCancel(index)} fill="outline">
+          Cancel
+        </Button>
         <Button
           onClick={() => {
             onSave(index, dirtyLink);
@@ -40,10 +43,7 @@ export const DataLinkEditorModalContent: FC<DataLinkEditorModalContentProps> = (
         >
           Save
         </Button>
-        <Button variant="secondary" onClick={() => onCancel(index)}>
-          Cancel
-        </Button>
-      </HorizontalGroup>
+      </Modal.ButtonRow>
     </>
   );
 };