diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index 12c12e3717..3ed9b93fa5 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -27,9 +27,17 @@
     visible = false
   }
 
+  export function cancel() {
+    if (!visible) {
+      return
+    }
+    dispatch("cancel")
+    hide()
+  }
+
   function handleKey(e) {
     if (visible && e.key === "Escape") {
-      hide()
+      cancel()
     }
   }
 
@@ -41,7 +49,7 @@
     }
   }
 
-  setContext(Context.Modal, { show, hide })
+  setContext(Context.Modal, { show, hide, cancel })
 </script>
 
 <svelte:window on:keydown={handleKey} />
@@ -56,15 +64,17 @@
   <Portal target=".modal-container">
     <div
       class="spectrum-Underlay is-open"
-      transition:fade|local={{ duration: 200 }}
-      on:mousedown|self={hide}
+      in:fade={{ duration: 200 }}
+      out:fade|local={{ duration: 200 }}
+      on:mousedown|self={cancel}
     >
-      <div class="modal-wrapper" on:mousedown|self={hide}>
-        <div class="modal-inner-wrapper" on:mousedown|self={hide}>
+      <div class="modal-wrapper" on:mousedown|self={cancel}>
+        <div class="modal-inner-wrapper" on:mousedown|self={cancel}>
           <div
             use:focusFirstInput
             class="spectrum-Modal is-open"
-            transition:fly|local={{ y: 30, duration: 200 }}
+            in:fly={{ y: 30, duration: 200 }}
+            out:fly|local={{ y: 30, duration: 200 }}
           >
             <slot />
           </div>
diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte
index 16338b1ed2..dae9b9e8af 100644
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@@ -16,7 +16,7 @@
   export let onConfirm = undefined
   export let disabled = false
 
-  const { hide } = getContext(Context.Modal)
+  const { hide, cancel } = getContext(Context.Modal)
   let loading = false
   $: confirmDisabled = disabled || loading
 
@@ -56,7 +56,7 @@
       >
         <slot name="footer" />
         {#if showCancelButton}
-          <Button group secondary on:click={hide}>{cancelText}</Button>
+          <Button group secondary on:click={cancel}>{cancelText}</Button>
         {/if}
         {#if showConfirmButton}
           <Button