diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 7bc4c208ee..25e78abbd8 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -2559,6 +2559,8 @@ exports[`Storyshots Table|Table TextColumn 1`] = `
 </table>
 `;
 
+exports[`Storyshots Toast Click to close 1`] = `null`;
+
 exports[`Storyshots Toast Danger 1`] = `null`;
 
 exports[`Storyshots Toast Info 1`] = `null`;
diff --git a/scm-ui/ui-components/src/toast/ToastButton.tsx b/scm-ui/ui-components/src/toast/ToastButton.tsx
index 76ae63cd73..24e6cf5d8f 100644
--- a/scm-ui/ui-components/src/toast/ToastButton.tsx
+++ b/scm-ui/ui-components/src/toast/ToastButton.tsx
@@ -1,12 +1,13 @@
-import React, { FC, useContext } from "react";
+import React, { FC, useContext, MouseEvent } from "react";
 import { ToastThemeContext, Themeable } from "./themes";
 import styled from "styled-components";
 
 type Props = {
   icon?: string;
+  onClick?: () => void;
 };
 
-const ThemedButton = styled.div.attrs(props => ({
+const ThemedButton = styled.button.attrs(props => ({
   className: "button"
 }))<Themeable>`
   color: ${props => props.theme.primary};
@@ -25,10 +26,18 @@ const ToastButtonIcon = styled.i`
   margin-right: 0.25rem;
 `;
 
-const ToastButton: FC<Props> = ({ icon, children }) => {
+const ToastButton: FC<Props> = ({ icon, onClick, children }) => {
   const theme = useContext(ToastThemeContext);
+
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    if (onClick) {
+      e.preventDefault();
+      onClick();
+    }
+  };
+
   return (
-    <ThemedButton theme={theme}>
+    <ThemedButton theme={theme} onClick={handleClick}>
       {icon && <ToastButtonIcon className={`fas fa-fw fa-${icon}`} />} {children}
     </ThemedButton>
   );
diff --git a/scm-ui/ui-components/src/toast/index.stories.tsx b/scm-ui/ui-components/src/toast/index.stories.tsx
index af17964d2e..01e802a712 100644
--- a/scm-ui/ui-components/src/toast/index.stories.tsx
+++ b/scm-ui/ui-components/src/toast/index.stories.tsx
@@ -26,7 +26,31 @@ const Animator = () => {
   );
 };
 
+const Closeable = () => {
+  const [show, setShow] = useState(true);
+
+  const hide = () => {
+    setShow(false);
+  };
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <Toast type="success" title="Awesome feature">
+      <p>Close the message with a click</p>
+      <ToastButtons>
+        <ToastButton icon="times" onClick={hide}>
+          Click to close
+        </ToastButton>
+      </ToastButtons>
+    </Toast>
+  );
+};
+
 toastStories.add("Open/Close", () => <Animator />);
+toastStories.add("Click to close", () => <Closeable />);
 
 types.forEach(type => {
   toastStories.add(type.charAt(0).toUpperCase() + type.slice(1), () => (