diff --git a/src/components/confirm-buttons.tsx b/src/components/confirm-buttons.tsx
new file mode 100644
index 00000000..25cb242c
--- /dev/null
+++ b/src/components/confirm-buttons.tsx
@@ -0,0 +1,72 @@
+import { Box, Button, Chip, IconButton, SvgIconTypeMap } from '@mui/material';
+import React, { useState } from 'react';
+import { useTranslator } from '../hooks';
+import CloseIcon from '@mui/icons-material/Close';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
+
+export function ConfirmButton(props: {
+  onConfirm: () => void;
+  confirmationText: string;
+  icon:
+    | JSX.Element
+    | (OverridableComponent<SvgIconTypeMap<unknown, 'svg'>> & {
+        muiName: string;
+      });
+  name?: string | undefined;
+  remainAfterConfirmation?: boolean;
+  remainText?: string;
+}): JSX.Element | null {
+  const [clicked, setClicked] = useState(false);
+  const [confirmed, setConfirmed] = useState(false);
+
+  return (
+    <Box sx={{ width: '6em' }}>
+      {clicked ? (
+        props.remainAfterConfirmation && confirmed ? (
+          <Chip label={props.remainText} />
+        ) : (
+          <Button
+            variant="contained"
+            color="error"
+            title={props.name}
+            onClick={_ => {
+              props.onConfirm();
+              if (props.remainAfterConfirmation) {
+                setConfirmed(true);
+              }
+            }}
+            onBlur={_ => setClicked(false)}
+            style={{ visibility: clicked ? 'visible' : 'hidden' }}
+            autoFocus
+          >
+            {props.confirmationText}
+          </Button>
+        )
+      ) : (
+        <IconButton title={props.name} onClick={_ => setClicked(true)}>
+          {props.icon}
+        </IconButton>
+      )}
+    </Box>
+  );
+}
+
+export function ConfirmDeleteButton(props: {
+  clickHandler: () => void;
+  name?: string;
+}): JSX.Element | null {
+  const trans = useTranslator('jupyterlab');
+
+  const buttonTitle = props.name
+    ? trans.__('Delete "%1"', props.name)
+    : trans.__('Delete job');
+
+  return (
+    <ConfirmButton
+      name={buttonTitle}
+      onConfirm={props.clickHandler}
+      confirmationText={trans.__('Delete')}
+      icon={<CloseIcon fontSize="small" />}
+    />
+  );
+}
diff --git a/src/components/confirm-delete-button.tsx b/src/components/confirm-delete-button.tsx
deleted file mode 100644
index 9f189d40..00000000
--- a/src/components/confirm-delete-button.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-
-import {
-  Button,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogContentText,
-  DialogActions
-} from '@mui/material';
-import { useTranslator } from '../hooks';
-
-export const ConfirmDeleteButton = (props: {
-  handleDelete: () => Promise<void>;
-  title: string;
-  text?: string;
-}): JSX.Element => {
-  const [open, setOpen] = React.useState(false);
-
-  const trans = useTranslator('jupyterlab');
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    <>
-      <Button variant="contained" color="error" onClick={_ => setOpen(true)}>
-        {props.title}
-      </Button>
-      <Dialog open={open} onClose={handleClose}>
-        <DialogTitle>{props.title}</DialogTitle>
-        {props.text && (
-          <DialogContent>
-            <DialogContentText>{props.text}</DialogContentText>
-          </DialogContent>
-        )}
-        <DialogActions>
-          <Button
-            variant="contained"
-            //hex of var(--md-grey-600)
-            sx={{ backgroundColor: '#757575' }}
-            onClick={handleClose}
-            autoFocus
-          >
-            {trans.__('Cancel')}
-          </Button>
-          <Button
-            variant="contained"
-            color="error"
-            onClick={_ => {
-              handleClose();
-              props.handleDelete();
-            }}
-          >
-            {trans.__('Delete')}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </>
-  );
-};
diff --git a/src/components/confirm-delete-icon.tsx b/src/components/confirm-delete-icon.tsx
deleted file mode 100644
index 2d8da87c..00000000
--- a/src/components/confirm-delete-icon.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Box, Button, IconButton } from '@mui/material';
-import React, { useState } from 'react';
-import { useTranslator } from '../hooks';
-import CloseIcon from '@mui/icons-material/Close';
-
-export function ConfirmDeleteIcon(props: {
-  name: string | undefined;
-  clickHandler: () => void;
-}): JSX.Element | null {
-  const [clicked, setClicked] = useState(false);
-
-  const trans = useTranslator('jupyterlab');
-
-  const buttonTitle = props.name
-    ? trans.__('Delete "%1"', props.name)
-    : trans.__('Delete job');
-
-  return (
-    <Box sx={{ width: '6em' }}>
-      {clicked ? (
-        <Button
-          variant="contained"
-          color="error"
-          title={buttonTitle}
-          onClick={props.clickHandler}
-          onBlur={_ => setClicked(false)}
-          style={{ visibility: clicked ? 'visible' : 'hidden' }}
-          autoFocus
-        >
-          {trans.__('Delete')}
-        </Button>
-      ) : (
-        <IconButton title={buttonTitle} onClick={_ => setClicked(true)}>
-          <CloseIcon fontSize="small" />
-        </IconButton>
-      )}
-    </Box>
-  );
-}
diff --git a/src/components/confirm-dialog-buttons.tsx b/src/components/confirm-dialog-buttons.tsx
new file mode 100644
index 00000000..d042b1c0
--- /dev/null
+++ b/src/components/confirm-dialog-buttons.tsx
@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+
+import {
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  useTheme
+} from '@mui/material';
+import { useTranslator } from '../hooks';
+
+export const ConfirmDialogButton = (props: {
+  onConfirm: () => Promise<void>;
+  title: string;
+  dialogText: string;
+  dialogConfirmText: string;
+  variant?: 'text' | 'contained' | 'outlined';
+  errorColor?: boolean;
+  pendingConfirmText?: string;
+}): JSX.Element => {
+  const [open, setOpen] = useState(false);
+
+  const trans = useTranslator('jupyterlab');
+  const theme = useTheme();
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Button
+        variant={props.variant ?? 'contained'}
+        color={props.errorColor ? 'error' : 'primary'}
+        onClick={_ => setOpen(true)}
+      >
+        {props.title}
+      </Button>
+      <Dialog open={open} onClose={handleClose}>
+        <DialogTitle>{props.title}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>{props.dialogText}</DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            variant="contained"
+            sx={{ backgroundColor: theme.palette.grey[600] }}
+            onClick={handleClose}
+            autoFocus
+          >
+            {trans.__('Cancel')}
+          </Button>
+          <Button
+            variant="contained"
+            color="error"
+            onClick={async _ => {
+              handleClose();
+              await props.onConfirm();
+            }}
+          >
+            {props.dialogConfirmText}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
+
+export const ConfirmDialogDeleteButton = (props: {
+  handleDelete: () => Promise<void>;
+  title: string;
+  dialogText: string;
+}): JSX.Element => {
+  const trans = useTranslator('jupyterlab');
+  return (
+    <ConfirmDialogButton
+      onConfirm={props.handleDelete}
+      title={props.title}
+      dialogText={props.dialogText}
+      dialogConfirmText={trans.__('Delete')}
+      pendingConfirmText={trans.__('Deleting')}
+      errorColor
+    />
+  );
+};
+
+export const ConfirmDialogStopButton = (props: {
+  handleStop: () => Promise<void>;
+  title: string;
+  dialogText: string;
+}): JSX.Element => {
+  const trans = useTranslator('jupyterlab');
+  return (
+    <ConfirmDialogButton
+      onConfirm={props.handleStop}
+      title={props.title}
+      dialogText={props.dialogText}
+      dialogConfirmText={trans.__('Stop')}
+      pendingConfirmText={trans.__('Stopping')}
+      variant="outlined"
+    />
+  );
+};
diff --git a/src/components/job-definition-row.tsx b/src/components/job-definition-row.tsx
index 53b19b7b..82f7f035 100644
--- a/src/components/job-definition-row.tsx
+++ b/src/components/job-definition-row.tsx
@@ -15,7 +15,7 @@ import TableCell from '@mui/material/TableCell';
 import { Scheduler, SchedulerService } from '../handler';
 import { useTranslator } from '../hooks';
 import { TranslationBundle } from '@jupyterlab/translation';
-import { ConfirmDeleteIcon } from './confirm-delete-icon';
+import { ConfirmDeleteButton } from './confirm-buttons';
 
 function CreatedAt(props: {
   job: Scheduler.IDescribeJobDefinition;
@@ -117,7 +117,7 @@ export function buildJobDefinitionRow(
           forceReload();
         }}
       />
-      <ConfirmDeleteIcon
+      <ConfirmDeleteButton
         name={jobDef.name}
         clickHandler={async () => {
           await ss.deleteJobDefinition(jobDef.job_definition_id);
diff --git a/src/components/job-row.tsx b/src/components/job-row.tsx
index 0f326094..bc580b2e 100644
--- a/src/components/job-row.tsx
+++ b/src/components/job-row.tsx
@@ -1,19 +1,15 @@
 import React, { useState } from 'react';
 
 import { JupyterFrontEnd } from '@jupyterlab/application';
-
-import DownloadIcon from '@mui/icons-material/Download';
-import StopIcon from '@mui/icons-material/Stop';
-import IconButton from '@mui/material/IconButton';
-import { Stack, TableCell, TableRow } from '@mui/material';
-
-import { ConfirmDeleteIcon } from './confirm-delete-icon';
+import { ConfirmDeleteButton, ConfirmButton } from './confirm-buttons';
 import { JobFileLink } from './job-file-link';
-
 import { CommandIDs } from '..';
 import { Scheduler } from '../handler';
 import { useTranslator } from '../hooks';
 import { ICreateJobModel } from '../model';
+import DownloadIcon from '@mui/icons-material/Download';
+import StopIcon from '@mui/icons-material/Stop';
+import { IconButton, Stack, TableCell, TableRow } from '@mui/material';
 
 function StopButton(props: {
   job: Scheduler.IDescribeJob;
@@ -28,9 +24,14 @@ function StopButton(props: {
     <div
       style={props.job.status !== 'IN_PROGRESS' ? { visibility: 'hidden' } : {}}
     >
-      <IconButton onClick={props.clickHandler} title={buttonTitle}>
-        <StopIcon fontSize="small" />
-      </IconButton>
+      <ConfirmButton
+        name={buttonTitle}
+        onConfirm={props.clickHandler}
+        confirmationText={trans.__('Stop')}
+        icon={<StopIcon fontSize="small" />}
+        remainAfterConfirmation
+        remainText={trans.__('Stopping')}
+      />
     </div>
   );
 }
@@ -117,15 +118,7 @@ export function buildJobRow(
     <Timestamp job={job} />,
     translateStatus(job.status),
     <Stack spacing={1} direction="row">
-      <StopButton
-        job={job}
-        clickHandler={() =>
-          app.commands.execute(CommandIDs.stopJob, {
-            id: job.job_id
-          })
-        }
-      />
-      <ConfirmDeleteIcon
+      <ConfirmDeleteButton
         name={job.name}
         clickHandler={() => {
           // optimistic delete for now, no verification on whether the delete
@@ -136,6 +129,14 @@ export function buildJobRow(
           deleteRow(job.job_id);
         }}
       />
+      <StopButton
+        job={job}
+        clickHandler={() =>
+          app.commands.execute(CommandIDs.stopJob, {
+            id: job.job_id
+          })
+        }
+      />
     </Stack>
   ];
 
diff --git a/src/mainviews/detail-view/job-definition.tsx b/src/mainviews/detail-view/job-definition.tsx
index 8c535f8e..8e073b44 100644
--- a/src/mainviews/detail-view/job-definition.tsx
+++ b/src/mainviews/detail-view/job-definition.tsx
@@ -13,7 +13,7 @@ import { ListJobsTable } from '../list-jobs';
 import { Scheduler as SchedulerTokens } from '../../tokens';
 
 import { Button, Card, CardContent, FormLabel, Stack } from '@mui/material';
-import { ConfirmDeleteButton } from '../../components/confirm-delete-button';
+import { ConfirmDialogDeleteButton } from '../../components/confirm-dialog-buttons';
 import { JupyterFrontEnd } from '@jupyterlab/application';
 import {
   ILabeledValueProps,
@@ -97,10 +97,10 @@ export function JobDefinition(props: IJobDefinitionProps): JSX.Element {
       >
         {trans.__('Edit Job Definition')}
       </Button>
-      <ConfirmDeleteButton
+      <ConfirmDialogDeleteButton
         handleDelete={handleDeleteJobDefinition}
         title={trans.__('Delete Job Definition')}
-        text={trans.__(
+        dialogText={trans.__(
           'Are you sure that you want to delete this job definition?'
         )}
       />
diff --git a/src/mainviews/detail-view/job-detail.tsx b/src/mainviews/detail-view/job-detail.tsx
index 6ef8f9bc..17bd52d2 100644
--- a/src/mainviews/detail-view/job-detail.tsx
+++ b/src/mainviews/detail-view/job-detail.tsx
@@ -2,7 +2,10 @@ import React, { useState } from 'react';
 
 import { JupyterFrontEnd } from '@jupyterlab/application';
 
-import { ConfirmDeleteButton } from '../../components/confirm-delete-button';
+import {
+  ConfirmDialogDeleteButton,
+  ConfirmDialogStopButton
+} from '../../components/confirm-dialog-buttons';
 import { JobFileLink } from '../../components/job-file-link';
 import { Scheduler, SchedulerService } from '../../handler';
 import { useTranslator } from '../../hooks';
@@ -97,14 +100,16 @@ export function JobDetail(props: IJobDetailProps): JSX.Element {
         </Button>
       )}
       {props.model.status === 'IN_PROGRESS' && (
-        <Button variant="outlined" onClick={handleStopJob}>
-          {trans.__('Stop Job')}
-        </Button>
+        <ConfirmDialogStopButton
+          handleStop={handleStopJob}
+          title={trans.__('Stop Job')}
+          dialogText={trans.__('Are you sure that you want to stop this job?')}
+        />
       )}
-      <ConfirmDeleteButton
+      <ConfirmDialogDeleteButton
         handleDelete={handleDeleteJob}
         title={trans.__('Delete Job')}
-        text={trans.__('Are you sure that you want to delete this job?')}
+        dialogText={trans.__('Are you sure that you want to delete this job?')}
       />
     </Stack>
   );