1 files changed, 100 insertions, 0 deletions
diff --git a/toolkit/content/widgets/moz-button/moz-button.stories.mjs b/toolkit/content/widgets/moz-button/moz-button.stories.mjs
new file mode 100644
index 0000000000..52a459e807
--- /dev/null
+++ b/toolkit/content/widgets/moz-button/moz-button.stories.mjs
@@ -0,0 +1,100 @@
+/* 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 "../vendor/lit.all.mjs";
+// eslint-disable-next-line import/no-unassigned-import
+import "./moz-button.mjs";
+
+export default {
+  title: "UI Widgets/Moz Button",
+  component: "moz-button",
+  argTypes: {
+    l10nId: {
+      options: [
+        "moz-button-labelled",
+        "moz-button-titled",
+        "moz-button-aria-labelled",
+      ],
+      control: { type: "select" },
+    },
+    size: {
+      options: ["default", "small"],
+      control: { type: "radio" },
+    },
+  },
+  parameters: {
+    actions: {
+      handles: ["click"],
+    },
+    status: "in-development",
+    fluent: `
+moz-button-labelled = Button
+moz-button-primary = Primary
+moz-button-destructive = Destructive
+moz-button-titled =
+  .title = View logins
+moz-button-aria-labelled =
+  .aria-label = View logins
+`,
+  },
+};
+
+const Template = ({ type, size, l10nId, iconUrl, disabled }) => html`
+  <style>
+    moz-button[type~="icon"]::part(button) {
+      background-image: url("${iconUrl}");
+    }
+  </style>
+  <moz-button
+    data-l10n-id=${l10nId}
+    type=${type}
+    size=${size}
+    ?disabled=${disabled}
+  ></moz-button>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  type: "default",
+  size: "default",
+  l10nId: "moz-button-labelled",
+  iconUrl: "chrome://global/skin/icons/more.svg",
+  disabled: false,
+};
+export const DefaultSmall = Template.bind({});
+DefaultSmall.args = {
+  type: "default",
+  size: "small",
+  l10nId: "moz-button-labelled",
+  iconUrl: "chrome://global/skin/icons/more.svg",
+  disabled: false,
+};
+export const Primary = Template.bind({});
+Primary.args = {
+  ...Default.args,
+  type: "primary",
+  l10nId: "moz-button-primary",
+};
+export const Destructive = Template.bind({});
+Destructive.args = {
+  ...Default.args,
+  type: "destructive",
+  l10nId: "moz-button-destructive",
+};
+export const Icon = Template.bind({});
+Icon.args = {
+  ...Default.args,
+  type: "icon",
+  l10nId: "moz-button-titled",
+};
+export const IconSmall = Template.bind({});
+IconSmall.args = {
+  ...Icon.args,
+  size: "small",
+};
+export const IconGhost = Template.bind({});
+IconGhost.args = {
+  ...Icon.args,
+  type: "icon ghost",
+};