From 07f2f3281a359de9f4bb0b99728b4615358120bc Mon Sep 17 00:00:00 2001
From: Kerry <71330158+skerry3000@users.noreply.github.com>
Date: Wed, 9 Dec 2020 13:12:50 -0500
Subject: [PATCH] [EuiButtonGroup] pass a type of button when rendering a
 button for button group button (#4368)

* [EuiButtonGroup] pass a type of button when rendering a button for button group button

* [EuiButtonGroup]: add some autodoc comments to new props

* [EuiButtonGroup]: add changes to change log

* [EuiButtonGroup]: PR feedback: change the type attribute to element; add type attribute to button content instead of in both button and button group option

* Move `type` back to EuiButtonGroupOption

And added a test for changing it

Co-authored-by: cchaos <caroline.horn@elastic.co>
Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 CHANGELOG.md                                  |  1 +
 .../__snapshots__/button_group.test.tsx.snap  | 58 +++++++++++++++++++
 .../button/button_group/button_group.test.tsx | 10 +++-
 .../button/button_group/button_group.tsx      |  6 +-
 .../button_group/button_group_button.tsx      | 10 ++--
 5 files changed, 78 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 81037145165..ad6a27c8890 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@
 - Fixed `inputRef` for `EuiCheckbox` ([#4298](https://github.com/elastic/eui/pull/4298))
 - Limited the links allowed in `EuiMarkdownEditor` to http, https, or starting with a forward slash ([#4362](https://github.com/elastic/eui/pull/4362))
 - Aligned components with an `href` prop to React's practice of disallowing `javascript:` protocols ([#4362](https://github.com/elastic/eui/pull/4362))
+- Fixed form submit bug in `EuiButtonGroup` by adding an optional `type` prop for `EuiButtonGroupOption` ([#4368](https://github.com/elastic/eui/pull/4368))
 
 **Theme: Amsterdam**
 
diff --git a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
index 0db6d7464d8..0d2dba2a90b 100644
--- a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
+++ b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
@@ -18,6 +18,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -37,6 +38,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -57,6 +59,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -143,6 +146,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -180,6 +184,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -199,6 +204,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -219,6 +225,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -305,6 +312,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -342,6 +350,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -361,6 +370,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -381,6 +391,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -467,6 +478,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -504,6 +516,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -523,6 +536,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -543,6 +557,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -629,6 +644,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -666,6 +682,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -685,6 +702,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -705,6 +723,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -791,6 +810,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -828,6 +848,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -847,6 +868,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -867,6 +889,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -953,6 +976,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
       class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -990,6 +1014,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
       class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1009,6 +1034,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1029,6 +1055,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
       class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1115,6 +1142,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
       class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1152,6 +1180,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1171,6 +1200,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1191,6 +1221,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1277,6 +1308,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1314,6 +1346,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1333,6 +1366,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1353,6 +1387,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1439,6 +1474,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
       class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1478,6 +1514,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
       data-test-subj="test subject string"
       disabled=""
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1498,6 +1535,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1518,6 +1556,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1557,6 +1596,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
       data-test-subj="test subject string"
       disabled=""
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1577,6 +1617,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1597,6 +1638,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1634,6 +1676,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1653,6 +1696,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1673,6 +1717,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1759,6 +1804,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1796,6 +1842,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1815,6 +1862,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1835,6 +1883,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled euiButtonGroupButton-isIconOnly"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1921,6 +1970,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled euiButtonGroupButton-isIconOnly"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2008,6 +2058,7 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2045,6 +2096,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2064,6 +2116,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
       aria-pressed="true"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2084,6 +2137,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2123,6 +2177,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2142,6 +2197,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
       id="button01"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2162,6 +2218,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2250,6 +2307,7 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
+      type="submit"
     >
       <span
         class="euiButtonContent euiButton__content"
diff --git a/src/components/button/button_group/button_group.test.tsx b/src/components/button/button_group/button_group.test.tsx
index 0bfa03159f4..9c84d2f464e 100644
--- a/src/components/button/button_group/button_group.test.tsx
+++ b/src/components/button/button_group/button_group.test.tsx
@@ -21,7 +21,12 @@ import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps as commonProps } from '../../../test';
 
-import { EuiButtonGroup, EuiButtonGroupProps } from './button_group';
+import {
+  EuiButtonGroup,
+  EuiButtonGroupOptionProps,
+  EuiButtonGroupProps,
+} from './button_group';
+
 import { COLORS } from '../button';
 
 const SIZES: Array<EuiButtonGroupProps['buttonSize']> = [
@@ -30,7 +35,7 @@ const SIZES: Array<EuiButtonGroupProps['buttonSize']> = [
   'compressed',
 ];
 
-const options = [
+const options: EuiButtonGroupOptionProps[] = [
   {
     id: 'button00',
     label: 'Option one',
@@ -47,6 +52,7 @@ const options = [
     label: 'Option three',
     iconType: 'bolt',
     isDisabled: true,
+    type: 'submit',
   },
 ];
 
diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx
index 6702a364b1c..8ec71fd9f6a 100644
--- a/src/components/button/button_group/button_group.tsx
+++ b/src/components/button/button_group/button_group.tsx
@@ -42,6 +42,10 @@ export interface EuiButtonGroupOptionProps
    * The value of the radio input.
    */
   value?: any;
+  /**
+   * The type of the underlying HTML button
+   */
+  type?: 'button' | 'submit' | 'reset';
 }
 
 export type EuiButtonGroupProps = CommonProps & {
@@ -179,7 +183,7 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
               name={nameIfSingle}
               isDisabled={isDisabled}
               {...(option as EuiButtonGroupOptionProps)}
-              type={typeIsSingle ? 'label' : 'button'}
+              element={typeIsSingle ? 'label' : 'button'}
               isSelected={
                 typeIsSingle
                   ? option.id === idSelected
diff --git a/src/components/button/button_group/button_group_button.tsx b/src/components/button/button_group/button_group_button.tsx
index dea959ed661..de7e477d8a5 100644
--- a/src/components/button/button_group/button_group_button.tsx
+++ b/src/components/button/button_group/button_group_button.tsx
@@ -27,7 +27,7 @@ type Props = EuiButtonGroupOptionProps & {
   /**
    * Element to display based on single or multi
    */
-  type: 'button' | 'label';
+  element: 'button' | 'label';
   /**
    * Styles the selected button to look selected (usually with `fill`)
    */
@@ -69,15 +69,16 @@ export const EuiButtonGroupButton: FunctionComponent<Props> = ({
   onChange,
   size,
   value,
+  element = 'button',
   type = 'button',
   ...rest
 }) => {
   // Force element to be a button if disabled
-  const element = isDisabled ? 'button' : type;
+  const el = isDisabled ? 'button' : element;
 
   let elementProps = {};
   let singleInput;
-  if (element === 'label') {
+  if (el === 'label') {
     elementProps = {
       ...elementProps,
       htmlFor: id,
@@ -100,6 +101,7 @@ export const EuiButtonGroupButton: FunctionComponent<Props> = ({
       ...elementProps,
       id,
       isSelected,
+      type,
       onClick: () => onChange(id),
     };
   }
@@ -123,7 +125,7 @@ export const EuiButtonGroupButton: FunctionComponent<Props> = ({
     <EuiButtonDisplay
       baseClassName="euiButtonGroupButton"
       className={buttonClasses}
-      element={element}
+      element={el}
       fill={size !== 'compressed' && isSelected}
       isDisabled={isDisabled}
       size={size === 'compressed' ? 's' : size}