diff --git a/ui/src/dashboards/components/template_variables/Row.js b/ui/src/dashboards/components/template_variables/Row.js
index a3bf0a159..4242f0075 100644
--- a/ui/src/dashboards/components/template_variables/Row.js
+++ b/ui/src/dashboards/components/template_variables/Row.js
@@ -12,7 +12,7 @@ import Dropdown from 'shared/components/Dropdown'
 import TemplateQueryBuilder from 'src/dashboards/components/template_variables/TemplateQueryBuilder'
 import TableInput from 'src/dashboards/components/template_variables/TableInput'
 import RowValues from 'src/dashboards/components/template_variables/RowValues'
-import RowButtons from 'src/dashboards/components/template_variables/RowButtons'
+import ConfirmButton from 'src/shared/components/ConfirmButton'
 
 import {runTemplateVariableQuery as runTemplateVariableQueryAJAX} from 'src/dashboards/apis'
 
@@ -95,15 +95,31 @@ const TemplateVariableRow = ({
         autoFocusTarget={autoFocusTarget}
       />
     </div>
-    <div className="tvm--col-4">
-      <RowButtons
-        onStartEdit={onStartEdit}
-        isEditing={isEditing}
-        onCancelEdit={onCancelEdit}
-        onDelete={onDeleteTempVar}
-        id={id}
-        selectedType={selectedType}
-      />
+    <div className={`tvm--col-4${isEditing ? ' editing' : ''}`}>
+      {isEditing ? (
+        <div className="tvm-actions">
+          <button
+            className="btn btn-sm btn-info btn-square"
+            type="button"
+            onClick={onCancelEdit}
+          >
+            <span className="icon remove" />
+          </button>
+          <button className="btn btn-sm btn-success btn-square" type="submit">
+            <span className="icon checkmark" />
+          </button>
+        </div>
+      ) : (
+        <div className="tvm-actions">
+          <ConfirmButton
+            type="btn-danger"
+            confirmText="Delete template variable?"
+            confirmAction={onDeleteTempVar(id)}
+            icon="trash"
+            square={true}
+          />
+        </div>
+      )}
     </div>
   </form>
 )
diff --git a/ui/src/dashboards/components/template_variables/RowButtons.js b/ui/src/dashboards/components/template_variables/RowButtons.js
deleted file mode 100644
index 7e6fc4b16..000000000
--- a/ui/src/dashboards/components/template_variables/RowButtons.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import DeleteConfirmButtons from 'shared/components/DeleteConfirmButtons'
-
-const RowButtons = ({onStartEdit, isEditing, onCancelEdit, onDelete, id}) => {
-  if (isEditing) {
-    return (
-      <div className="tvm-actions">
-        <button
-          className="btn btn-sm btn-info btn-square"
-          type="button"
-          onClick={onCancelEdit}
-        >
-          <span className="icon remove" />
-        </button>
-        <button className="btn btn-sm btn-success btn-square" type="submit">
-          <span className="icon checkmark" />
-        </button>
-      </div>
-    )
-  }
-  return (
-    <div className="tvm-actions">
-      <DeleteConfirmButtons
-        onDelete={onDelete(id)}
-        icon="remove"
-        square={true}
-      />
-      <button
-        className="btn btn-sm btn-info btn-edit btn-square"
-        type="button"
-        onClick={onStartEdit('tempVar')}
-      >
-        <span className="icon pencil" />
-      </button>
-    </div>
-  )
-}
-
-const {bool, func, string} = PropTypes
-
-RowButtons.propTypes = {
-  onStartEdit: func.isRequired,
-  isEditing: bool.isRequired,
-  onCancelEdit: func.isRequired,
-  onDelete: func.isRequired,
-  id: string.isRequired,
-  selectedType: string.isRequired,
-}
-
-export default RowButtons
diff --git a/ui/src/shared/components/DeleteConfirmTableCell.js b/ui/src/shared/components/DeleteConfirmTableCell.js
deleted file mode 100644
index 674d41da2..000000000
--- a/ui/src/shared/components/DeleteConfirmTableCell.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-
-import DeleteConfirmButtons from 'shared/components/DeleteConfirmButtons'
-import {ADMIN_TABLE} from 'src/admin/constants/tableSizing'
-
-const DeleteConfirmTableCell = props => (
-  <td className="text-right" style={{width: `${ADMIN_TABLE.colDelete}px`}}>
-    <DeleteConfirmButtons {...props} />
-  </td>
-)
-
-export default DeleteConfirmTableCell
diff --git a/ui/src/style/components/template-variables-manager.scss b/ui/src/style/components/template-variables-manager.scss
index ddc682525..dc722d5f0 100644
--- a/ui/src/style/components/template-variables-manager.scss
+++ b/ui/src/style/components/template-variables-manager.scss
@@ -28,22 +28,35 @@ $tvmp-table-gutter: 8px;
   }
 }
 .template-variable-manager--body {
-  padding: 18px ($tvmp-gutter - $tvmp-table-gutter) $tvmp-gutter ($tvmp-gutter - $tvmp-table-gutter);
+  padding: 18px ($tvmp-gutter - $tvmp-table-gutter) $tvmp-gutter
+    ($tvmp-gutter - $tvmp-table-gutter);
   border-radius: 0 0 $radius $radius;
   min-height: $tvmp-min-height;
   max-height: $tvmp-max-height;
-  @include gradient-v($g2-kevlar,$g0-obsidian);
-  @include custom-scrollbar-round($g0-obsidian,$g3-castle);
+  @include gradient-v($g2-kevlar, $g0-obsidian);
+  @include custom-scrollbar-round($g0-obsidian, $g3-castle);
 }
 .template-variable-manager--table,
 .template-variable-manager--table-container {
   width: 100%;
 }
 /* Column Widths */
-.tvm--col-1 {flex: 0 0 140px;}
-.tvm--col-2 {flex: 0 0 140px;}
-.tvm--col-3 {flex: 1 0 0;}
-.tvm--col-4 {flex: 0 0 68px;}
+.tvm--col-1 {
+  flex: 0 0 140px;
+}
+.tvm--col-2 {
+  flex: 0 0 140px;
+}
+.tvm--col-3 {
+  flex: 1 0 0;
+}
+.tvm--col-4 {
+  flex: 0 0 30px;
+
+  &.editing {
+    flex: 0 0 68px;
+  }
+}
 
 /* Table Column Labels */
 .template-variable-manager--table-heading {
@@ -61,7 +74,9 @@ $tvmp-table-gutter: 8px;
     @include no-user-select();
     padding-left: 6px;
     margin-right: $tvmp-table-gutter;
-    &:last-child {margin-right: 0;}
+    &:last-child {
+      margin-right: 0;
+    }
   }
 }
 
@@ -84,7 +99,9 @@ $tvmp-table-gutter: 8px;
 
   > * {
     margin-right: $tvmp-table-gutter;
-    &:last-child {margin-right: 0;}
+    &:last-child {
+      margin-right: 0;
+    }
   }
 }
 
@@ -110,8 +127,7 @@ $tvmp-table-gutter: 8px;
   border: 2px solid $g5-pepper;
   background-color: $g2-kevlar;
   overflow: hidden;
-  transition:
-    border-color 0.25s ease;
+  transition: border-color 0.25s ease;
 
   &:hover {
     cursor: text;
@@ -167,12 +183,16 @@ $tvmp-table-gutter: 8px;
     margin-bottom: 2px;
     margin-right: 2px;
   }
-  > *:last-child {margin-right: 0;}
+  > *:last-child {
+    margin-right: 0;
+  }
 
   .dropdown {
-    flex: 1 0 0%;
+    flex: 1 0 0;
 
-    & > .dropdown-toggle {width: 100%;}
+    & > .dropdown-toggle {
+      width: 100%;
+    }
   }
 }
 .tvm-query-builder--text {
@@ -188,29 +208,13 @@ $tvmp-table-gutter: 8px;
   font-weight: 600;
   font-family: $code-font;
 }
+
 .tvm-actions {
   display: flex;
   align-items: center;
   justify-content: flex-end;
 
-  .btn-edit {
-    order: 1;
-  }
-
-  > .btn:first-child {
+  & > .btn:nth-child(2) {
     margin-left: $tvmp-table-gutter;
   }
-
-  /* Override confirm buttons styles */
-  /* Janky, but doing this quick & dirty for now  */
-  .btn-danger {
-    order: 2;
-  }
-  .confirm-or-cancel > .btn {
-    margin-left: $tvmp-table-gutter !important;
-  }
-  /* Hide the edit button when confirming a delete */
-  .confirm-or-cancel + .btn-edit {
-    display: none;
-  }
 }