diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx
index 83533f1168..97634975b4 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx
@@ -2,9 +2,9 @@ import React, { useState, useEffect } from 'react';
 import { string, node, number } from 'prop-types';
 import { Split, SplitItem, TextListItemVariants } from '@patternfly/react-core';
 import { DetailName, DetailValue } from '@components/DetailList';
+import Toggle from '@components/Toggle';
 import { yamlToJson, jsonToYaml, isJson } from '@util/yaml';
 import CodeMirrorInput from './CodeMirrorInput';
-import YamlJsonToggle from './YamlJsonToggle';
 import { JSON_MODE, YAML_MODE } from './constants';
 
 function getValueAsMode(value, mode) {
@@ -50,8 +50,12 @@ function VariablesDetail({ value, label, rows }) {
             </div>
           </SplitItem>
           <SplitItem>
-            <YamlJsonToggle
-              mode={mode}
+            <Toggle
+              leftLabel="YAML"
+              leftMode={YAML_MODE}
+              rightLabel="JSON"
+              rightMode={JSON_MODE}
+              currentMode={mode}
               onChange={newMode => {
                 try {
                   setCurrentValue(getValueAsMode(currentValue, newMode));
diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx
index 05548f8aa8..455b47b04b 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx
@@ -31,12 +31,12 @@ describe('<VariablesDetail>', () => {
     const wrapper = shallow(
       <VariablesDetail value="---foo: bar" label="Variables" />
     );
-    wrapper.find('YamlJsonToggle').invoke('onChange')('javascript');
+    wrapper.find('Toggle').invoke('onChange')('javascript');
     const input = wrapper.find('Styled(CodeMirrorInput)');
     expect(input.prop('mode')).toEqual('javascript');
     expect(input.prop('value')).toEqual('{\n  "foo": "bar"\n}');
 
-    wrapper.find('YamlJsonToggle').invoke('onChange')('yaml');
+    wrapper.find('Toggle').invoke('onChange')('yaml');
     const input2 = wrapper.find('Styled(CodeMirrorInput)');
     expect(input2.prop('mode')).toEqual('yaml');
     expect(input2.prop('value')).toEqual('foo: bar\n');
@@ -53,7 +53,7 @@ describe('<VariablesDetail>', () => {
       <VariablesDetail value="---foo: bar" label="Variables" />
     );
     act(() => {
-      wrapper.find('YamlJsonToggle').invoke('onChange')('javascript');
+      wrapper.find('Toggle').invoke('onChange')('javascript');
     });
     wrapper.setProps({
       value: '---bar: baz',
@@ -73,7 +73,7 @@ describe('<VariablesDetail>', () => {
   test('should default empty json to "{}"', () => {
     const wrapper = mount(<VariablesDetail value="" label="Variables" />);
     act(() => {
-      wrapper.find('YamlJsonToggle').invoke('onChange')('javascript');
+      wrapper.find('Toggle').invoke('onChange')('javascript');
     });
     wrapper.setProps({ value: '' });
     const input = wrapper.find('Styled(CodeMirrorInput)');
diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx
index 336a3fa996..4ea07052ec 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx
@@ -6,9 +6,9 @@ import { useField } from 'formik';
 import styled from 'styled-components';
 import { Split, SplitItem } from '@patternfly/react-core';
 import { CheckboxField } from '@components/FormField';
+import Toggle from '@components/Toggle';
 import { yamlToJson, jsonToYaml, isJson } from '@util/yaml';
 import CodeMirrorInput from './CodeMirrorInput';
-import YamlJsonToggle from './YamlJsonToggle';
 import { JSON_MODE, YAML_MODE } from './constants';
 
 const FieldHeader = styled.div`
@@ -34,8 +34,12 @@ function VariablesField({ i18n, id, name, label, readOnly, promptId }) {
             </label>
           </SplitItem>
           <SplitItem>
-            <YamlJsonToggle
-              mode={mode}
+            <Toggle
+              leftLabel="YAML"
+              leftMode={YAML_MODE}
+              rightLabel="JSON"
+              rightMode={JSON_MODE}
+              currentMode={mode}
               onChange={newMode => {
                 try {
                   const newVal =
diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx
index faddd2bc13..785b05df6c 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx
@@ -1,21 +1,16 @@
 import React, { useState } from 'react';
 import { string, func, bool, number } from 'prop-types';
-import { Button, Split, SplitItem } from '@patternfly/react-core';
+import { Split, SplitItem } from '@patternfly/react-core';
 import styled from 'styled-components';
 import { yamlToJson, jsonToYaml, isJson } from '@util/yaml';
+import Toggle from '@components/Toggle';
 import CodeMirrorInput from './CodeMirrorInput';
-import ButtonGroup from './ButtonGroup';
 import { JSON_MODE, YAML_MODE } from './constants';
 
 function formatJson(jsonString) {
   return JSON.stringify(JSON.parse(jsonString), null, 2);
 }
 
-const SmallButton = styled(Button)`
-  padding: 3px 8px;
-  font-size: var(--pf-global--FontSize--xs);
-`;
-
 const SplitItemRight = styled(SplitItem)`
   margin-bottom: 5px;
 `;
@@ -47,40 +42,25 @@ function VariablesInput(props) {
           </label>
         </SplitItem>
         <SplitItemRight>
-          <ButtonGroup>
-            <SmallButton
-              onClick={() => {
-                if (mode === YAML_MODE) {
-                  return;
-                }
-                try {
-                  onChange(jsonToYaml(value));
-                  setMode(YAML_MODE);
-                } catch (err) {
-                  onError(err.message);
-                }
-              }}
-              variant={mode === YAML_MODE ? 'primary' : 'secondary'}
-            >
-              YAML
-            </SmallButton>
-            <SmallButton
-              onClick={() => {
+          <Toggle
+            leftLabel="YAML"
+            leftMode={YAML_MODE}
+            rightLabel="JSON"
+            rightMode={JSON_MODE}
+            currentMode={mode}
+            onChange={newMode => {
+              try {
                 if (mode === JSON_MODE) {
-                  return;
-                }
-                try {
+                  onChange(jsonToYaml(value));
+                } else {
                   onChange(yamlToJson(value));
-                  setMode(JSON_MODE);
-                } catch (err) {
-                  onError(err.message);
                 }
-              }}
-              variant={mode === JSON_MODE ? 'primary' : 'secondary'}
-            >
-              JSON
-            </SmallButton>
-          </ButtonGroup>
+                setMode(newMode);
+              } catch (err) {
+                onError(err.message);
+              }
+            }}
+          />
         </SplitItemRight>
       </Split>
       <CodeMirrorInput
diff --git a/awx/ui_next/src/components/CodeMirrorInput/YamlJsonToggle.jsx b/awx/ui_next/src/components/CodeMirrorInput/YamlJsonToggle.jsx
deleted file mode 100644
index 2cf1050085..0000000000
--- a/awx/ui_next/src/components/CodeMirrorInput/YamlJsonToggle.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { oneOf, func } from 'prop-types';
-import styled from 'styled-components';
-import { Button } from '@patternfly/react-core';
-import ButtonGroup from './ButtonGroup';
-
-const SmallButton = styled(Button)`
-  padding: 3px 8px;
-  font-size: var(--pf-global--FontSize--xs);
-`;
-
-const YAML_MODE = 'yaml';
-const JSON_MODE = 'javascript';
-
-function YamlJsonToggle({ mode, onChange }) {
-  const setMode = newMode => {
-    if (mode !== newMode) {
-      onChange(newMode);
-    }
-  };
-
-  return (
-    <ButtonGroup>
-      <SmallButton
-        onClick={() => setMode(YAML_MODE)}
-        variant={mode === YAML_MODE ? 'primary' : 'secondary'}
-      >
-        YAML
-      </SmallButton>
-      <SmallButton
-        onClick={() => setMode(JSON_MODE)}
-        variant={mode === JSON_MODE ? 'primary' : 'secondary'}
-      >
-        JSON
-      </SmallButton>
-    </ButtonGroup>
-  );
-}
-YamlJsonToggle.propTypes = {
-  mode: oneOf([YAML_MODE, JSON_MODE]).isRequired,
-  onChange: func.isRequired,
-};
-
-export default YamlJsonToggle;
diff --git a/awx/ui_next/src/components/CodeMirrorInput/ButtonGroup.jsx b/awx/ui_next/src/components/Toggle/ButtonGroup.jsx
similarity index 100%
rename from awx/ui_next/src/components/CodeMirrorInput/ButtonGroup.jsx
rename to awx/ui_next/src/components/Toggle/ButtonGroup.jsx
diff --git a/awx/ui_next/src/components/Toggle/Toggle.jsx b/awx/ui_next/src/components/Toggle/Toggle.jsx
new file mode 100644
index 0000000000..db0d796000
--- /dev/null
+++ b/awx/ui_next/src/components/Toggle/Toggle.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { func, string } from 'prop-types';
+import styled from 'styled-components';
+import { Button } from '@patternfly/react-core';
+import ButtonGroup from './ButtonGroup';
+
+const SmallButton = styled(Button)`
+  padding: 3px 8px;
+  font-size: var(--pf-global--FontSize--xs);
+`;
+
+function Toggle({
+  leftLabel,
+  leftMode,
+  rightLabel,
+  rightMode,
+  currentMode,
+  onChange,
+}) {
+  const setValue = newValue => {
+    if (currentMode !== newValue) {
+      onChange(newValue);
+    }
+  };
+
+  return (
+    <ButtonGroup>
+      <SmallButton
+        onClick={() => setValue(leftMode)}
+        variant={currentMode === leftMode ? 'primary' : 'secondary'}
+      >
+        {leftLabel}
+      </SmallButton>
+      <SmallButton
+        onClick={() => setValue(rightMode)}
+        variant={currentMode === rightMode ? 'primary' : 'secondary'}
+      >
+        {rightLabel}
+      </SmallButton>
+    </ButtonGroup>
+  );
+}
+Toggle.propTypes = {
+  leftLabel: string.isRequired,
+  leftMode: string.isRequired,
+  rightLabel: string.isRequired,
+  rightMode: string.isRequired,
+  currentMode: string.isRequired,
+  onChange: func.isRequired,
+};
+
+export default Toggle;
diff --git a/awx/ui_next/src/components/Toggle/index.js b/awx/ui_next/src/components/Toggle/index.js
new file mode 100644
index 0000000000..c2ec545530
--- /dev/null
+++ b/awx/ui_next/src/components/Toggle/index.js
@@ -0,0 +1 @@
+export { default } from './Toggle';