1 files changed, 45 insertions, 0 deletions
diff --git a/browser/components/storybook/stories/toggle.stories.mjs b/browser/components/storybook/stories/toggle.stories.mjs
new file mode 100644
index 0000000000..af3e72c6fe
--- /dev/null
+++ b/browser/components/storybook/stories/toggle.stories.mjs
@@ -0,0 +1,45 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { html } from "lit";
+
+export default {
+  title: "Design System/Atoms/Toggle",
+};
+
+const Template = ({ checked, disabled }) =>
+  html`
+    <link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
+    <link
+      rel="stylesheet"
+      href="chrome://global/skin/in-content/toggle-button.css"
+    />
+    <input
+      type="checkbox"
+      class="toggle-button"
+      ?checked=${checked}
+      ?disabled=${disabled}
+    />
+  `;
+
+export const Unchecked = Template.bind({});
+Unchecked.args = {
+  disabled: false,
+  checked: false,
+};
+export const Checked = Template.bind({});
+Checked.args = {
+  disabled: false,
+  checked: true,
+};
+export const DisabledUnchecked = Template.bind({});
+DisabledUnchecked.args = {
+  disabled: true,
+  checked: false,
+};
+export const DisabledChecked = Template.bind({});
+DisabledChecked.args = {
+  disabled: true,
+  checked: true,
+};