@charcoal-ui/react 3.7.0 → 3.9.0

package/src/components/Button/__snapshots__/index.story.storyshot

@@ -1,6 +1,116 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Button Danger 1`] = `
+exports[`Storybook Tests Button Active 1`] = `
+.c0 {
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  padding: 0;
+  border-style: none;
+  outline: none;
+  color: inherit;
+  text-rendering: inherit;
+  -webkit-letter-spacing: inherit;
+  -moz-letter-spacing: inherit;
+  -ms-letter-spacing: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c1 {
+  width: -webkit-min-content;
+  width: -moz-min-content;
+  width: min-content;
+  display: inline-grid;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+  border-radius: 999999px;
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+  padding-right: 24px;
+  padding-left: 24px;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
+  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
+  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
+  height: 40px;
+}
+
+.c1:not(:disabled):not([aria-disabled]),
+.c1[aria-disabled='false'] {
+  color: var(--charcoal-text2-press);
+  background-color: var(--charcoal-surface3-press);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled='false']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+}
+
+<div
+  data-dark={false}
+>
+  <button
+    className="c0 c1"
+    disabled={false}
+  >
+    Button
+  </button>
+</div>
+`;
+
+exports[`Storybook Tests Button Danger 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -71,13 +181,19 @@ exports[`Storyshots Button Danger 1`] = `
   height: 40px;
 }
 
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -104,14 +220,13 @@ exports[`Storyshots Button Danger 1`] = `
   <button
     className="c0 c1"
     disabled={false}
-    onClick={[Function]}
   >
     Button
   </button>
 </div>
 `;
 
-exports[`Storyshots Button Default 1`] = `
+exports[`Storybook Tests Button Default 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -182,13 +297,19 @@ exports[`Storyshots Button Default 1`] = `
   height: 40px;
 }
 
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -215,14 +336,13 @@ exports[`Storyshots Button Default 1`] = `
   <button
     className="c0 c1"
     disabled={false}
-    onClick={[Function]}
   >
     Button
   </button>
 </div>
 `;
 
-exports[`Storyshots Button Disabled 1`] = `
+exports[`Storybook Tests Button Disabled 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -293,13 +413,19 @@ exports[`Storyshots Button Disabled 1`] = `
   height: 40px;
 }
 
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -326,14 +452,13 @@ exports[`Storyshots Button Disabled 1`] = `
   <button
     className="c0 c1"
     disabled={true}
-    onClick={[Function]}
   >
     Button
   </button>
 </div>
 `;
 
-exports[`Storyshots Button Fixed 1`] = `
+exports[`Storybook Tests Button Fixed 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -404,13 +529,19 @@ exports[`Storyshots Button Fixed 1`] = `
   height: 40px;
 }
 
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -437,14 +568,13 @@ exports[`Storyshots Button Fixed 1`] = `
   <button
     className="c0 c1"
     disabled={false}
-    onClick={[Function]}
   >
     Button
   </button>
 </div>
 `;
 
-exports[`Storyshots Button Focus 1`] = `
+exports[`Storybook Tests Button Focus 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -515,13 +645,19 @@ exports[`Storyshots Button Focus 1`] = `
   height: 40px;
 }
 
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -555,7 +691,7 @@ exports[`Storyshots Button Focus 1`] = `
 </div>
 `;
 
-exports[`Storyshots Button Layout Example 1`] = `
+exports[`Storybook Tests Button LayoutExample 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -626,13 +762,19 @@ exports[`Storyshots Button Layout Example 1`] = `
   height: 40px;
 }
 
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -685,13 +827,19 @@ exports[`Storyshots Button Layout Example 1`] = `
   height: 40px;
 }
 
-.c2:not(:disabled):not([aria-disabled]):active,
-.c2[aria-disabled='false']:active,
 .c2:not(:disabled):not([aria-disabled]):focus,
-.c2[aria-disabled='false']:focus,
+.c2[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c2:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c2[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c2:not(:disabled):not([aria-disabled]):focus-visible,
 .c2[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -744,13 +892,19 @@ exports[`Storyshots Button Layout Example 1`] = `
   height: 40px;
 }
 
-.c3:not(:disabled):not([aria-disabled]):active,
-.c3[aria-disabled='false']:active,
 .c3:not(:disabled):not([aria-disabled]):focus,
-.c3[aria-disabled='false']:focus,
+.c3[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c3:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c3[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c3:not(:disabled):not([aria-disabled]):focus-visible,
 .c3[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -803,13 +957,19 @@ exports[`Storyshots Button Layout Example 1`] = `
   height: 40px;
 }
 
-.c4:not(:disabled):not([aria-disabled]):active,
-.c4[aria-disabled='false']:active,
 .c4:not(:disabled):not([aria-disabled]):focus,
-.c4[aria-disabled='false']:focus,
+.c4[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c4:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c4[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c4:not(:disabled):not([aria-disabled]):focus-visible,
 .c4[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -862,13 +1022,19 @@ exports[`Storyshots Button Layout Example 1`] = `
   height: 40px;
 }
 
-.c5:not(:disabled):not([aria-disabled]):active,
-.c5[aria-disabled='false']:active,
 .c5:not(:disabled):not([aria-disabled]):focus,
-.c5[aria-disabled='false']:focus,
+.c5[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c5:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c5[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c5:not(:disabled):not([aria-disabled]):focus-visible,
 .c5[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -894,16 +1060,16 @@ exports[`Storyshots Button Layout Example 1`] = `
 >
   <div
     css="
-      display: grid;
-      gap: 24px;
-    "
+        display: grid;
+        gap: 24px;
+      "
   >
     <div
       css="
-        display: grid;
-        grid: auto / auto-flow min-content;
-        gap: 8px;
-      "
+          display: grid;
+          grid: auto / auto-flow min-content;
+          gap: 8px;
+        "
     >
       <button
         className="c0 c1"
@@ -926,10 +1092,10 @@ exports[`Storyshots Button Layout Example 1`] = `
     </div>
     <div
       css="
-        display: grid;
-        grid: auto-flow auto / 392px;
-        gap: 8px;
-      "
+          display: grid;
+          grid: auto-flow auto / 392px;
+          gap: 8px;
+        "
     >
       <button
         className="c0 c4"
@@ -946,12 +1112,12 @@ exports[`Storyshots Button Layout Example 1`] = `
     </div>
     <div
       css="
-        display: flex;
+          display: flex;
 
-        & > * + * {
-          margin-left: 8px;
-        }
-      "
+          & > * + * {
+            margin-left: 8px;
+          }
+        "
     >
       <button
         className="c0 c1"
@@ -974,14 +1140,14 @@ exports[`Storyshots Button Layout Example 1`] = `
     </div>
     <div
       css="
-        display: flex;
-        flex-direction: column;
-        width: 392px;
-
-        & > * + * {
-          margin-top: 8px;
-        }
-      "
+          display: flex;
+          flex-direction: column;
+          width: 392px;
+
+          & > * + * {
+            margin-top: 8px;
+          }
+        "
     >
       <button
         className="c0 c4"
@@ -998,14 +1164,14 @@ exports[`Storyshots Button Layout Example 1`] = `
     </div>
     <div
       css="
-        display: flex;
-        flex-direction: column;
-        width: 392px;
-
-        & > * + * {
-          margin-top: 8px;
-        }
-      "
+          display: flex;
+          flex-direction: column;
+          width: 392px;
+
+          & > * + * {
+            margin-top: 8px;
+          }
+        "
     >
       <button
         className="c0 c4"
@@ -1024,7 +1190,7 @@ exports[`Storyshots Button Layout Example 1`] = `
 </div>
 `;
 
-exports[`Storyshots Button Link 1`] = `
+exports[`Storybook Tests Button Link 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -1095,13 +1261,19 @@ exports[`Storyshots Button Link 1`] = `
   height: 40px;
 }
 
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -1128,14 +1300,13 @@ exports[`Storyshots Button Link 1`] = `
   <a
     className="c0 c1"
     href="#"
-    onClick={[Function]}
   >
     Button
   </a>
 </div>
 `;
 
-exports[`Storyshots Button Navigation 1`] = `
+exports[`Storybook Tests Button Navigation 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -1206,13 +1377,19 @@ exports[`Storyshots Button Navigation 1`] = `
   height: 40px;
 }
 
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -1239,14 +1416,13 @@ exports[`Storyshots Button Navigation 1`] = `
   <button
     className="c0 c1"
     disabled={false}
-    onClick={[Function]}
   >
     Button
   </button>
 </div>
 `;
 
-exports[`Storyshots Button Nihongo 1`] = `
+exports[`Storybook Tests Button Nihongo 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -1317,13 +1493,19 @@ exports[`Storyshots Button Nihongo 1`] = `
   height: 40px;
 }
 
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -1350,14 +1532,13 @@ exports[`Storyshots Button Nihongo 1`] = `
   <button
     className="c0 c1"
     disabled={false}
-    onClick={[Function]}
   >
     日本語だよ
   </button>
 </div>
 `;
 
-exports[`Storyshots Button Overlay 1`] = `
+exports[`Storybook Tests Button Overlay 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -1428,13 +1609,19 @@ exports[`Storyshots Button Overlay 1`] = `
   height: 40px;
 }
 
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -1461,14 +1648,13 @@ exports[`Storyshots Button Overlay 1`] = `
   <button
     className="c0 c1"
     disabled={false}
-    onClick={[Function]}
   >
     Button
   </button>
 </div>
 `;
 
-exports[`Storyshots Button Primary 1`] = `
+exports[`Storybook Tests Button Primary 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -1539,13 +1725,19 @@ exports[`Storyshots Button Primary 1`] = `
   height: 40px;
 }
 
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -1572,14 +1764,13 @@ exports[`Storyshots Button Primary 1`] = `
   <button
     className="c0 c1"
     disabled={false}
-    onClick={[Function]}
   >
     Button
   </button>
 </div>
 `;
 
-exports[`Storyshots Button Small 1`] = `
+exports[`Storybook Tests Button Small 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -1650,13 +1841,19 @@ exports[`Storyshots Button Small 1`] = `
   height: 32px;
 }
 
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -1683,7 +1880,6 @@ exports[`Storyshots Button Small 1`] = `
   <button
     className="c0 c1"
     disabled={false}
-    onClick={[Function]}
   >
     Button
   </button>