diff --git a/packages/chakra-ui/src/Widgets/Widgets.ts b/packages/chakra-ui/src/Widgets/Widgets.ts
index d44acb8869..41256c6628 100644
--- a/packages/chakra-ui/src/Widgets/Widgets.ts
+++ b/packages/chakra-ui/src/Widgets/Widgets.ts
@@ -14,6 +14,7 @@ import TextareaWidget from "../TextareaWidget/TextareaWidget";
 import TextWidget from "../TextWidget/TextWidget";
 import UpDownWidget from "../UpDownWidget/UpDownWidget";
 import URLWidget from "../URLWidget/URLWidget";
+import SubmitButton from "../SubmitButton/SubmitButton";
 
 const widgets = {
   AltDateTimeWidget,
@@ -32,6 +33,7 @@ const widgets = {
   TextWidget,
   UpDownWidget,
   URLWidget,
+  SubmitButton
 };
 
 export default widgets;
diff --git a/packages/chakra-ui/test/__snapshots__/Array.test.tsx.snap b/packages/chakra-ui/test/__snapshots__/Array.test.tsx.snap
index 07f839414b..ddcfe7250f 100644
--- a/packages/chakra-ui/test/__snapshots__/Array.test.tsx.snap
+++ b/packages/chakra-ui/test/__snapshots__/Array.test.tsx.snap
@@ -69,6 +69,10 @@ exports[`array fields array 1`] = `
   vertical-align: middle;
 }
 
+.emotion-9 {
+  margin-top: 3px;
+}
+
 <form
   className="rjsf"
   noValidate={false}
@@ -121,9 +125,11 @@ exports[`array fields array 1`] = `
       </div>
     </div>
   </div>
-  <div>
+  <div
+    className="emotion-9"
+  >
     <button
-      className="btn btn-info"
+      className="chakra-button emotion-6"
       disabled={false}
       type="submit"
     >
@@ -297,6 +303,39 @@ exports[`array fields checkboxes 1`] = `
   vertical-align: middle;
 }
 
+.emotion-14 {
+  margin-top: 3px;
+}
+
+.emotion-15 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  width: auto;
+}
+
 <form
   className="rjsf"
   noValidate={false}
@@ -401,9 +440,11 @@ exports[`array fields checkboxes 1`] = `
       </div>
     </div>
   </div>
-  <div>
+  <div
+    className="emotion-14"
+  >
     <button
-      className="btn btn-info"
+      className="chakra-button emotion-15"
       disabled={false}
       type="submit"
     >
@@ -451,6 +492,39 @@ exports[`array fields fixed array 1`] = `
   margin-bottom: 1px;
 }
 
+.emotion-14 {
+  margin-top: 3px;
+}
+
+.emotion-15 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  width: auto;
+}
+
 <form
   className="rjsf"
   noValidate={false}
@@ -541,9 +615,11 @@ exports[`array fields fixed array 1`] = `
       </div>
     </div>
   </div>
-  <div>
+  <div
+    className="emotion-14"
+  >
     <button
-      className="btn btn-info"
+      className="chakra-button emotion-15"
       disabled={false}
       type="submit"
     >
diff --git a/packages/chakra-ui/test/__snapshots__/Form.test.tsx.snap b/packages/chakra-ui/test/__snapshots__/Form.test.tsx.snap
index 404fe48546..f8babe1726 100644
--- a/packages/chakra-ui/test/__snapshots__/Form.test.tsx.snap
+++ b/packages/chakra-ui/test/__snapshots__/Form.test.tsx.snap
@@ -7,6 +7,39 @@ exports[`single fields hidden field 1`] = `
   margin-bottom: 4px;
 }
 
+.emotion-2 {
+  margin-top: 3px;
+}
+
+.emotion-3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  width: auto;
+}
+
 <form
   className="rjsf"
   noValidate={false}
@@ -26,9 +59,11 @@ exports[`single fields hidden field 1`] = `
       />
     </div>
   </div>
-  <div>
+  <div
+    className="emotion-2"
+  >
     <button
-      className="btn btn-info"
+      className="chakra-button emotion-3"
       disabled={false}
       type="submit"
     >
@@ -39,6 +74,39 @@ exports[`single fields hidden field 1`] = `
 `;
 
 exports[`single fields null field 1`] = `
+.emotion-1 {
+  margin-top: 3px;
+}
+
+.emotion-2 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  width: auto;
+}
+
 <form
   className="rjsf"
   noValidate={false}
@@ -48,9 +116,11 @@ exports[`single fields null field 1`] = `
     className="chakra-form-control emotion-0"
     role="group"
   />
-  <div>
+  <div
+    className="emotion-1"
+  >
     <button
-      className="btn btn-info"
+      className="chakra-button emotion-2"
       disabled={false}
       type="submit"
     >
@@ -65,6 +135,39 @@ exports[`single fields number field 1`] = `
   margin-bottom: 1px;
 }
 
+.emotion-3 {
+  margin-top: 3px;
+}
+
+.emotion-4 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  width: auto;
+}
+
 <form
   className="rjsf"
   noValidate={false}
@@ -95,9 +198,11 @@ exports[`single fields number field 1`] = `
       />
     </div>
   </div>
-  <div>
+  <div
+    className="emotion-3"
+  >
     <button
-      className="btn btn-info"
+      className="chakra-button emotion-4"
       disabled={false}
       type="submit"
     >
@@ -108,6 +213,39 @@ exports[`single fields number field 1`] = `
 `;
 
 exports[`single fields string field format data-url 1`] = `
+.emotion-1 {
+  margin-top: 3px;
+}
+
+.emotion-2 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  width: auto;
+}
+
 <form
   className="rjsf"
   noValidate={false}
@@ -130,9 +268,11 @@ exports[`single fields string field format data-url 1`] = `
       </p>
     </div>
   </div>
-  <div>
+  <div
+    className="emotion-1"
+  >
     <button
-      className="btn btn-info"
+      className="chakra-button emotion-2"
       disabled={false}
       type="submit"
     >
@@ -147,6 +287,39 @@ exports[`single fields string field format email 1`] = `
   margin-bottom: 1px;
 }
 
+.emotion-3 {
+  margin-top: 3px;
+}
+
+.emotion-4 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  width: auto;
+}
+
 <form
   className="rjsf"
   noValidate={false}
@@ -177,9 +350,11 @@ exports[`single fields string field format email 1`] = `
       />
     </div>
   </div>
-  <div>
+  <div
+    className="emotion-3"
+  >
     <button
-      className="btn btn-info"
+      className="chakra-button emotion-4"
       disabled={false}
       type="submit"
     >
@@ -194,6 +369,39 @@ exports[`single fields string field format uri 1`] = `
   margin-bottom: 1px;
 }
 
+.emotion-3 {
+  margin-top: 3px;
+}
+
+.emotion-4 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  width: auto;
+}
+
 <form
   className="rjsf"
   noValidate={false}
@@ -224,9 +432,11 @@ exports[`single fields string field format uri 1`] = `
       />
     </div>
   </div>
-  <div>
+  <div
+    className="emotion-3"
+  >
     <button
-      className="btn btn-info"
+      className="chakra-button emotion-4"
       disabled={false}
       type="submit"
     >
@@ -241,6 +451,39 @@ exports[`single fields string field regular 1`] = `
   margin-bottom: 1px;
 }
 
+.emotion-3 {
+  margin-top: 3px;
+}
+
+.emotion-4 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  width: auto;
+}
+
 <form
   className="rjsf"
   noValidate={false}
@@ -271,9 +514,11 @@ exports[`single fields string field regular 1`] = `
       />
     </div>
   </div>
-  <div>
+  <div
+    className="emotion-3"
+  >
     <button
-      className="btn btn-info"
+      className="chakra-button emotion-4"
       disabled={false}
       type="submit"
     >
@@ -284,6 +529,39 @@ exports[`single fields string field regular 1`] = `
 `;
 
 exports[`single fields unsupported field 1`] = `
+.emotion-1 {
+  margin-top: 3px;
+}
+
+.emotion-2 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  width: auto;
+}
+
 <form
   className="rjsf"
   noValidate={false}
@@ -316,9 +594,11 @@ exports[`single fields unsupported field 1`] = `
       </pre>
     </div>
   </div>
-  <div>
+  <div
+    className="emotion-1"
+  >
     <button
-      className="btn btn-info"
+      className="chakra-button emotion-2"
       disabled={false}
       type="submit"
     >
@@ -333,6 +613,39 @@ exports[`single fields using custom tagName 1`] = `
   margin-bottom: 1px;
 }
 
+.emotion-3 {
+  margin-top: 3px;
+}
+
+.emotion-4 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  width: auto;
+}
+
 <div
   className="rjsf"
   noValidate={false}
@@ -363,9 +676,11 @@ exports[`single fields using custom tagName 1`] = `
       />
     </div>
   </div>
-  <div>
+  <div
+    className="emotion-3"
+  >
     <button
-      className="btn btn-info"
+      className="chakra-button emotion-4"
       disabled={false}
       type="submit"
     >
diff --git a/packages/chakra-ui/test/__snapshots__/Object.test.tsx.snap b/packages/chakra-ui/test/__snapshots__/Object.test.tsx.snap
index 443f638274..55ed58db53 100644
--- a/packages/chakra-ui/test/__snapshots__/Object.test.tsx.snap
+++ b/packages/chakra-ui/test/__snapshots__/Object.test.tsx.snap
@@ -16,6 +16,39 @@ exports[`object fields object 1`] = `
   text-align: start;
 }
 
+.emotion-12 {
+  margin-top: 3px;
+}
+
+.emotion-13 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  width: auto;
+}
+
 <form
   className="rjsf"
   noValidate={false}
@@ -102,9 +135,11 @@ exports[`object fields object 1`] = `
       </div>
     </div>
   </div>
-  <div>
+  <div
+    className="emotion-12"
+  >
     <button
-      className="btn btn-info"
+      className="chakra-button emotion-13"
       disabled={false}
       type="submit"
     >