diff --git a/docs/pages/examples.vue b/docs/pages/examples.vue
index 4ca607ca..4c3449ed 100644
--- a/docs/pages/examples.vue
+++ b/docs/pages/examples.vue
@@ -39,7 +39,7 @@
         Toggle modal!
       </UButton>
 
-      <UModal v-model="isModalOpen">
+      <UModal v-model="isModalOpen" @submit.prevent="onSubmit">
         <div class="sm:flex sm:items-start">
           <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
             <UIcon name="heroicons-outline:exclamation" class="h-6 w-6 text-red-600" aria-hidden="true" />
@@ -56,7 +56,7 @@
           </div>
         </div>
         <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-          <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm" @click="open = false">
+          <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm" @click="open = false">
             Deactivate
           </button>
           <button ref="cancelButtonRef" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border u-border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium u-text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm" @click="open = false">
@@ -175,6 +175,10 @@
         Card:
       </div>
 
+      <UCard @submit.prevent="onSubmit">
+        <UButton type="submit" label="Submit" class="ml-auto" />
+      </UCard>
+
       <UCard body-class="flex">
         <div class="flex-1 px-4 py-5 sm:p-6 space-y-3">
           <UFormGroup label="Email" name="email" required>
@@ -269,6 +273,11 @@ function onClick () {
   console.warn('click')
 }
 
+function onSubmit () {
+  // eslint-disable-next-line no-console
+  console.warn('submit')
+}
+
 const dropdownItems = [
   [{
     label: 'Edit',
diff --git a/src/runtime/components/overlays/Modal.vue b/src/runtime/components/overlays/Modal.vue
index 0affc7b2..09829c53 100644
--- a/src/runtime/components/overlays/Modal.vue
+++ b/src/runtime/components/overlays/Modal.vue
@@ -61,6 +61,7 @@ export default {
     TransitionChild,
     Card
   },
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: Boolean,