diff --git a/ui/components/ui/toggle-button/toggle-button.stories.js b/ui/components/ui/toggle-button/toggle-button.stories.js
new file mode 100644
index 000000000..64f1a7acb
--- /dev/null
+++ b/ui/components/ui/toggle-button/toggle-button.stories.js
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { boolean, text } from '@storybook/addon-knobs';
+
+import ToggleButton from './toggle-button.component';
+
+export default {
+  title: 'ToggleButton',
+  component: ToggleButton,
+  id: __filename,
+};
+
+export const DefaultStory = () => {
+  const [checked, setChecked] = useState(false);
+  const handleOnToggle = (e) => {
+    action('onToggle')(e);
+    setChecked(!checked);
+  };
+  return (
+    <ToggleButton
+      offLabel={text('offLabel', 'off')}
+      onLabel={text('onLabel', 'on')}
+      disabled={boolean('disabled', false)}
+      value={checked}
+      onToggle={handleOnToggle}
+    />
+  );
+};
+
+DefaultStory.story = {
+  name: 'Default',
+};