diff --git a/change/@fluentui-web-components-be1b97fa-2097-4adc-ad03-f84e0ac0b1b1.json b/change/@fluentui-web-components-be1b97fa-2097-4adc-ad03-f84e0ac0b1b1.json
new file mode 100644
index 0000000000000..d5ddae11444d7
--- /dev/null
+++ b/change/@fluentui-web-components-be1b97fa-2097-4adc-ad03-f84e0ac0b1b1.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat(button): add button web component",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index 6c2df52c07236..8455cc240d8e9 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -40,6 +40,10 @@
       "types": "./dist/esm/badge/define.d.ts",
       "default": "./dist/esm/badge/define.js"
     },
+    "./button": {
+      "types": "./dist/esm/button/define.d.ts",
+      "default": "./dist/esm/button/define.js"
+    },
     "./counter-badge": {
       "types": "./dist/esm/counter-badge/define.d.ts",
       "default": "./dist/esm/counter-badge/define.js"
diff --git a/packages/web-components/src/button/README.md b/packages/web-components/src/button/README.md
new file mode 100644
index 0000000000000..bbcd0815837fd
--- /dev/null
+++ b/packages/web-components/src/button/README.md
@@ -0,0 +1,48 @@
+# Button
+
+The `Button` component allows users to commit a change or trigger an action via a single click or tap and is often found inside forms, dialogs, panels and/or pages.
+
+## **Design Spec**
+
+[Link to Button in Figma](https://www.figma.com/file/Nj9EBBvOZmS11zKNJfilVR/Button?node-id=1723%3A380&t=PNVwuI4rLXjxAFNJ-1)
+
+<br />
+
+## **Engineering Spec**
+
+Fluent WC3 Button has feature parity with the Fluent UI React 9 Button implementation but not direct parity.
+
+<br />
+
+## Class: `Button`
+
+<br />
+
+### **Component Name**
+
+`<fluent-button></fluent-button>`
+
+<br />
+
+## **Preparation**
+
+<br />
+
+### **Fluent Web Component v3 v.s Fluent React 9**
+
+<br />
+
+**Component and Slot Mapping**
+
+| Fluent UI React 9 | Fluent Web Components 3 |
+| ----------------- | ----------------------- |
+| `<Button>`        | `<fluent-button>`       |
+
+<br />
+
+**Property Mapping**
+| Fluent UI React 9 | Fluent Web Components 3 | Description of difference |
+| ------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------- |
+| `icon`is a slot | The default slot or `start`, and `end` | In FUIR9, `icon` is a slot. In the web components implementation, an icon can be passed into the default slot and paired with an `icon-only` attribute, or supplementally in the `start` and/or `end` slots |
+| `defaultValue` | `current-value` | In React, `defaultValue` sets the default value of form controls. In HTML, `value` is the default value, it doesn't update. [This RFC](https://github.com/microsoft/fast/issues/5119) provides more detail on how we came to decide to go with `current-value` instead of alternatives. Ultimately, the decision stems on staying aligned to the web platform as deviating would likely mean deviation for good. |
+| `as` | A separate web component for anchor implementations | In FUIR9, HTML is returned so interpolating tags in the virtual DOM doesn't present a problem. In WC's, we can't safely interpolate tags and the cost to provide two sets of API's, one form associated and one not`icon` is a slot. In the web components implementation, conditional rendering brings with it a cost as both templates need to be enumerated. Additionally, button is a form associated element whereas anchors are not. For this reason, we'll provide an "anchor-button" as a separate component. |
diff --git a/packages/web-components/src/button/button.definition.ts b/packages/web-components/src/button/button.definition.ts
new file mode 100644
index 0000000000000..dad785060b687
--- /dev/null
+++ b/packages/web-components/src/button/button.definition.ts
@@ -0,0 +1,21 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { Button } from './button.js';
+import { styles } from './button.styles.js';
+import { template } from './button.template.js';
+
+/**
+ * The Fluent Button Element. Implements {@link @microsoft/fast-foundation#Button },
+ * {@link @microsoft/fast-foundation#buttonTemplate}
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-button\>
+ */
+export const definition = Button.compose({
+  name: `${FluentDesignSystem.prefix}-button`,
+  template,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true,
+  },
+});
diff --git a/packages/web-components/src/button/button.options.ts b/packages/web-components/src/button/button.options.ts
new file mode 100644
index 0000000000000..66ea0819433b1
--- /dev/null
+++ b/packages/web-components/src/button/button.options.ts
@@ -0,0 +1,53 @@
+import { ButtonOptions, ValuesOf } from '@microsoft/fast-foundation';
+
+/**
+ * ButtonAppearance constants
+ * @public
+ */
+export const ButtonAppearance = {
+  primary: 'primary',
+  outline: 'outline',
+  subtle: 'subtle',
+  secondary: 'secondary',
+  transparent: 'transparent',
+} as const;
+
+/**
+ * A Button can be secondary, primary, outline, subtle, transparent
+ * @public
+ */
+export type ButtonAppearance = ValuesOf<typeof ButtonAppearance>;
+
+/**
+ * A Button can be square, circular or rounded.
+ * @public
+ */
+export const ButtonShape = {
+  circular: 'circular',
+  rounded: 'rounded',
+  square: 'square',
+} as const;
+
+/**
+ * A Button can be square, circular or rounded
+ * @public
+ */
+export type ButtonShape = ValuesOf<typeof ButtonShape>;
+
+/**
+ * A Button can be a size of small, medium or large.
+ * @public
+ */
+export const ButtonSize = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+} as const;
+
+/**
+ * A Button can be on of several preset sizes.
+ * @public
+ */
+export type ButtonSize = ValuesOf<typeof ButtonSize>;
+
+export { ButtonOptions };
diff --git a/packages/web-components/src/button/button.stories.ts b/packages/web-components/src/button/button.stories.ts
new file mode 100644
index 0000000000000..1069c4c3debce
--- /dev/null
+++ b/packages/web-components/src/button/button.stories.ts
@@ -0,0 +1,208 @@
+import { html } from '@microsoft/fast-element';
+import type { Args, Meta } from '@storybook/html';
+import { renderComponent } from '../helpers.stories.js';
+import type { Button as FluentButton } from './button.js';
+import { ButtonAppearance, ButtonShape, ButtonSize } from './button.options.js';
+import './define.js';
+
+type ButtonStoryArgs = Args & FluentButton;
+type ButtonStoryMeta = Meta<ButtonStoryArgs>;
+
+const storyTemplate = html<ButtonStoryArgs>`
+  <fluent-button
+    appearance="${x => x.appearance}"
+    shape="${x => x.shape}"
+    size="${x => x.size}"
+    ?disabled="${x => x.disabled}"
+    ?disabled-focusable="${x => x.disabledFocusable}"
+    ?icon-only="${x => x.iconOnly}"
+    ?icon="${x => x.icon}"
+  >
+    ${x => x.content}
+  </fluent-button>
+`;
+
+export default {
+  title: 'Components/Button/Button',
+  args: {
+    content: 'Button',
+    disabled: false,
+    disabledFocusable: false,
+  },
+  argTypes: {
+    appearance: {
+      options: Object.values(ButtonAppearance),
+      control: {
+        type: 'select',
+      },
+    },
+    shape: {
+      options: Object.values(ButtonShape),
+      control: {
+        type: 'select',
+      },
+    },
+    size: {
+      options: Object.values(ButtonSize),
+      control: {
+        type: 'select',
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      table: {
+        type: {
+          summary: 'Sets the disabled state of the component',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+    disabledFocusable: {
+      control: 'boolean',
+      table: {
+        type: {
+          summary: 'The component is disabled but still focusable',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+    content: {
+      control: 'Button text',
+    },
+  },
+} as ButtonStoryMeta;
+
+export const Button = renderComponent(storyTemplate).bind({});
+
+export const Appearance = renderComponent(html<ButtonStoryArgs>`
+  <fluent-button>Default</fluent-button>
+  <fluent-button appearance="primary">Primary</fluent-button>
+  <fluent-button appearance="outline">Outline</fluent-button>
+  <fluent-button appearance="subtle">Subtle</fluent-button>
+  <fluent-button appearance="transparent">Transparent</fluent-button>
+`);
+
+export const Shape = renderComponent(html<ButtonStoryArgs>`
+  <fluent-button shape="rounded">Rounded</fluent-button>
+  <fluent-button shape="circular">Circular</fluent-button>
+  <fluent-button shape="square">Square</fluent-button>
+`);
+
+export const Size = renderComponent(html<ButtonStoryArgs>`
+  <fluent-button size="small">Small</fluent-button>
+  <fluent-button size="small" icon
+    ><svg
+      fill="currentColor"
+      slot="start"
+      aria-hidden="true"
+      width="1em"
+      height="1em"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
+        fill="currentColor"
+      ></path></svg
+    >Small with calendar icon</fluent-button
+  >
+  <fluent-button size="small" icon-only aria-label="Small icon only button"
+    ><svg
+      fill="currentColor"
+      aria-hidden="true"
+      width="1em"
+      height="1em"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
+        fill="currentColor"
+      ></path></svg
+  ></fluent-button>
+  <fluent-button size="medium">Medium</fluent-button>
+  <fluent-button size="medium" icon
+    ><svg
+      fill="currentColor"
+      slot="start"
+      aria-hidden="true"
+      width="1em"
+      height="1em"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
+        fill="currentColor"
+      ></path></svg
+    >Medium with calendar icon</fluent-button
+  >
+  <fluent-button size="medium" icon-only aria-label="Medium icon only button"
+    ><svg
+      fill="currentColor"
+      aria-hidden="true"
+      width="1em"
+      height="1em"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
+        fill="currentColor"
+      ></path></svg
+  ></fluent-button>
+  <fluent-button size="large">Large</fluent-button>
+  <fluent-button size="large" icon
+    ><svg
+      fill="currentColor"
+      slot="start"
+      aria-hidden="true"
+      width="1em"
+      height="1em"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
+        fill="currentColor"
+      ></path></svg
+    >Large with calendar icon</fluent-button
+  >
+  <fluent-button size="large" icon-only aria-label="Large icon only button"
+    ><svg
+      fill="currentColor"
+      aria-hidden="true"
+      width="1em"
+      height="1em"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
+        fill="currentColor"
+      ></path></svg
+  ></fluent-button>
+`);
+
+export const Disabled = renderComponent(html<ButtonStoryArgs>`
+  <fluent-button>Enabled state</fluent-button>
+  <fluent-button disabled>Disabled state</fluent-button>
+  <fluent-button disabled-focusable>Disabled focusable state</fluent-button>
+  <fluent-button appearance="primary">Enabled state</fluent-button>
+  <fluent-button appearance="primary" disabled>Disabled state</fluent-button>
+  <fluent-button appearance="primary" disabled-focusable>Disabled focusable state</fluent-button>
+`);
+
+export const WithLongText = renderComponent(html<ButtonStoryArgs>`
+  <style>
+    .max-width {
+      width: 280px;
+    }
+  </style>
+  <fluent-button>Short text</fluent-button>
+  <fluent-button class="max-width">Long text wraps after it hits the max width of the component</fluent-button>
+`);
diff --git a/packages/web-components/src/button/button.styles.ts b/packages/web-components/src/button/button.styles.ts
new file mode 100644
index 0000000000000..93f90d0e7e860
--- /dev/null
+++ b/packages/web-components/src/button/button.styles.ts
@@ -0,0 +1,308 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import {
+  borderRadiusCircular,
+  borderRadiusLarge,
+  borderRadiusMedium,
+  borderRadiusNone,
+  borderRadiusSmall,
+  colorBrandBackground,
+  colorBrandBackgroundHover,
+  colorBrandBackgroundPressed,
+  colorNeutralBackground1,
+  colorNeutralBackground1Hover,
+  colorNeutralBackground1Pressed,
+  colorNeutralBackgroundDisabled,
+  colorNeutralForeground1,
+  colorNeutralForeground1Hover,
+  colorNeutralForeground1Pressed,
+  colorNeutralForeground2,
+  colorNeutralForeground2BrandHover,
+  colorNeutralForeground2BrandPressed,
+  colorNeutralForeground2Hover,
+  colorNeutralForeground2Pressed,
+  colorNeutralForegroundDisabled,
+  colorNeutralForegroundOnBrand,
+  colorNeutralStroke1,
+  colorNeutralStroke1Hover,
+  colorNeutralStroke1Pressed,
+  colorNeutralStrokeDisabled,
+  colorStrokeFocus2,
+  colorSubtleBackground,
+  colorSubtleBackgroundHover,
+  colorSubtleBackgroundPressed,
+  colorTransparentBackground,
+  colorTransparentBackgroundHover,
+  colorTransparentBackgroundPressed,
+  colorTransparentStroke,
+  curveEasyEase,
+  durationFaster,
+  fontFamilyBase,
+  fontSizeBase200,
+  fontSizeBase300,
+  fontSizeBase400,
+  fontWeightRegular,
+  fontWeightSemibold,
+  lineHeightBase200,
+  lineHeightBase300,
+  lineHeightBase400,
+  shadow2,
+  shadow4,
+  spacingHorizontalL,
+  spacingHorizontalM,
+  spacingHorizontalS,
+  spacingHorizontalSNudge,
+  spacingHorizontalXS,
+  strokeWidthThick,
+  strokeWidthThin,
+} from '../theme/design-tokens.js';
+
+// Need to support icon hover styles
+export const styles = css`
+  ${display('inline-flex')}
+
+  :host {
+    --icon-spacing: ${spacingHorizontalSNudge};
+    contain: layout style;
+  }
+
+  :host .control {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: center;
+    text-decoration-line: none;
+    margin: 0;
+    min-height: 32px;
+    outline-style: none;
+    background-color: ${colorNeutralBackground1};
+    color: ${colorNeutralForeground1};
+    border: ${strokeWidthThin} solid ${colorNeutralStroke1};
+    padding: 0 ${spacingHorizontalM};
+    min-width: 96px;
+    border-radius: ${borderRadiusMedium};
+    font-size: ${fontSizeBase300};
+    font-family: ${fontFamilyBase};
+    font-weight: ${fontWeightSemibold};
+    line-height: ${lineHeightBase300};
+    transition-duration: ${durationFaster};
+    transition-property: background, border, color;
+    transition-timing-function: ${curveEasyEase};
+    cursor: pointer;
+  }
+
+  .content {
+    display: inherit;
+  }
+
+  :host(:hover) .control {
+    background-color: ${colorNeutralBackground1Hover};
+    color: ${colorNeutralForeground1Hover};
+    border-color: ${colorNeutralStroke1Hover};
+  }
+
+  :host(:hover:active) .control {
+    background-color: ${colorNeutralBackground1Pressed};
+    border-color: ${colorNeutralStroke1Pressed};
+    color: ${colorNeutralForeground1Pressed};
+    outline-style: none;
+  }
+
+  :host .control:focus-visible {
+    border-color: ${colorTransparentStroke};
+    outline: ${strokeWidthThick} solid ${colorTransparentStroke};
+    box-shadow: ${shadow4}, 0 0 0 2px ${colorStrokeFocus2};
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition-duration: 0.01ms;
+  }
+
+  ::slotted(svg) {
+    font-size: 20px;
+    height: 20px;
+    width: 20px;
+    fill: currentColor;
+  }
+
+  ::slotted([slot='start']) {
+    margin-inline-end: var(--icon-spacing);
+  }
+
+  ::slotted([slot='end']) {
+    margin-inline-start: var(--icon-spacing);
+  }
+
+  :host([icon-only]) .control {
+    min-width: 32px;
+    max-width: 32px;
+  }
+
+  :host([size='small']) {
+    --icon-spacing: ${spacingHorizontalXS};
+  }
+
+  :host([size='small']) .control {
+    min-height: 24px;
+    min-width: 64px;
+    padding: 0 ${spacingHorizontalS};
+    border-radius: ${borderRadiusSmall};
+    font-size: ${fontSizeBase200};
+    line-height: ${lineHeightBase200};
+    font-weight: ${fontWeightRegular};
+  }
+
+  :host([size='small'][icon-only]) .control {
+    min-width: 24px;
+    max-width: 24px;
+  }
+
+  :host([size='large']) .control {
+    min-height: 40px;
+    border-radius: ${borderRadiusLarge};
+    padding: 0 ${spacingHorizontalL};
+    font-size: ${fontSizeBase400};
+    line-height: ${lineHeightBase400};
+  }
+
+  :host([size='large'][icon-only]) .control {
+    min-width: 40px;
+    max-width: 40px;
+  }
+
+  :host([size='large']) ::slotted(svg) {
+    font-size: 24px;
+    height: 24px;
+    width: 24px;
+  }
+
+  :host([shape='circular']) .control,
+  :host([shape='circular']) .control:focus-visible {
+    border-radius: ${borderRadiusCircular};
+  }
+
+  :host([shape='square']) .control,
+  :host([shape='square']) .control:focus-visible {
+    border-radius: ${borderRadiusNone};
+  }
+
+  :host([appearance='primary']) .control {
+    background-color: ${colorBrandBackground};
+    color: ${colorNeutralForegroundOnBrand};
+    border-color: transparent;
+  }
+
+  :host([appearance='primary']:hover) .control {
+    background-color: ${colorBrandBackgroundHover};
+  }
+
+  :host([appearance='primary']:hover) .control,
+  :host([appearance='primary']:hover:active) .control {
+    border-color: transparent;
+    color: ${colorNeutralForegroundOnBrand};
+  }
+
+  :host([appearance='primary']:hover:active) .control {
+    background-color: ${colorBrandBackgroundPressed};
+  }
+
+  :host([appearance='primary']) .control:focus-visible {
+    border-color: ${colorNeutralForegroundOnBrand};
+    box-shadow: ${shadow2}, 0 0 0 2px ${colorStrokeFocus2};
+  }
+
+  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"])) .control,
+  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"]):hover) .control,
+  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"]):hover:active) .control {
+    border-color: transparent;
+  }
+
+  :host([appearance='outline']) .control {
+    background-color: ${colorTransparentBackground};
+  }
+
+  :host([appearance='outline']:hover) .control {
+    background-color: ${colorTransparentBackgroundHover};
+  }
+
+  :host([appearance='outline']:hover:active) .control {
+    background-color: ${colorTransparentBackgroundPressed};
+  }
+
+  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"])) .control,
+  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"]):hover) .control,
+  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"]):hover:active) .control {
+    background-color: ${colorTransparentBackground};
+  }
+
+  :host([appearance='subtle']) .control {
+    background-color: ${colorSubtleBackground};
+    color: ${colorNeutralForeground2};
+    border-color: transparent;
+  }
+
+  :host([appearance='subtle']:hover) .control {
+    background-color: ${colorSubtleBackgroundHover};
+    color: ${colorNeutralForeground2Hover};
+    border-color: transparent;
+  }
+
+  :host([appearance='subtle']:hover:active) .control {
+    background-color: ${colorSubtleBackgroundPressed};
+    color: ${colorNeutralForeground2Pressed};
+    border-color: transparent;
+  }
+
+  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"])) .control,
+  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"]):hover) .control,
+  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"]):hover:active) .control {
+    background-color: ${colorTransparentBackground};
+    border-color: transparent;
+  }
+
+  :host([appearance='subtle']:hover) ::slotted(svg) {
+    fill: ${colorNeutralForeground2BrandHover};
+  }
+
+  :host([appearance='subtle']:hover:active) ::slotted(svg) {
+    fill: ${colorNeutralForeground2BrandPressed};
+  }
+
+  :host([appearance='transparent']) .control {
+    background-color: ${colorTransparentBackground};
+    color: ${colorNeutralForeground2};
+  }
+
+  :host([appearance='transparent']:hover) .control {
+    background-color: ${colorTransparentBackgroundHover};
+    color: ${colorNeutralForeground2BrandHover};
+  }
+
+  :host([appearance='transparent']:hover:active) .control {
+    background-color: ${colorTransparentBackgroundPressed};
+    color: ${colorNeutralForeground2BrandPressed};
+  }
+
+  :host([appearance='transparent']) .control,
+  :host([appearance='transparent']:hover) .control,
+  :host([appearance='transparent']:hover:active) .control {
+    border-color: transparent;
+  }
+
+  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"])) .control,
+  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"]):hover) .control,
+  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"]):hover:active) .control {
+    border-color: transparent;
+    background-color: ${colorTransparentBackground};
+  }
+
+  :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable])) .control,
+  :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable]):hover) .control,
+  :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable]):hover:active)
+    .control {
+    background-color: ${colorNeutralBackgroundDisabled};
+    border-color: ${colorNeutralStrokeDisabled};
+    color: ${colorNeutralForegroundDisabled};
+    cursor: not-allowed;
+  }
+`;
diff --git a/packages/web-components/src/button/button.template.ts b/packages/web-components/src/button/button.template.ts
new file mode 100644
index 0000000000000..d001a16c8134a
--- /dev/null
+++ b/packages/web-components/src/button/button.template.ts
@@ -0,0 +1,9 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import { buttonTemplate } from '@microsoft/fast-foundation';
+import type { Button } from './button.js';
+
+/**
+ * The template for the Button component.
+ * @public
+ */
+export const template: ElementViewTemplate<Button> = buttonTemplate();
diff --git a/packages/web-components/src/button/button.ts b/packages/web-components/src/button/button.ts
new file mode 100644
index 0000000000000..b6d7b33d559bd
--- /dev/null
+++ b/packages/web-components/src/button/button.ts
@@ -0,0 +1,92 @@
+import { attr } from '@microsoft/fast-element';
+import { FASTButton } from '@microsoft/fast-foundation';
+import { ButtonAppearance, ButtonShape, ButtonSize } from './button.options.js';
+
+/**
+ * The base class used for constructing a fluent-button custom element
+ * @public
+ */
+export class Button extends FASTButton {
+  /**
+   * The appearance the button should have.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: appearance
+   */
+  @attr
+  public appearance?: ButtonAppearance | undefined;
+
+  /**
+   * The shape the button should have.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: shape
+   */
+  @attr
+  public shape?: ButtonShape | undefined;
+
+  /**
+   * The size the button should have.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: size
+   */
+  @attr
+  public size?: ButtonSize;
+
+  /**
+   * The button has an icon only, no text content
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: icon-only
+   */
+  @attr({ attribute: 'icon-only', mode: 'boolean' })
+  public iconOnly: boolean = false;
+
+  /**
+   * The button is disabled but focusable
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: disabled-focusable
+   */
+  @attr({ attribute: 'disabled-focusable', mode: 'boolean' })
+  public disabledFocusable?: boolean = false;
+  protected disabledFocusableChanged(prev: boolean, next: boolean): void {
+    if (!this.$fastController.isConnected) {
+      return;
+    }
+
+    if (this.disabledFocusable) {
+      ((this as unknown) as HTMLElement).setAttribute('aria-disabled', 'true');
+    } else {
+      ((this as unknown) as HTMLElement).removeAttribute('aria-disabled');
+    }
+  }
+
+  /**
+   * Prevents disabledFocusable click events
+   */
+  private handleDisabledFocusableClick = (e: MouseEvent): void => {
+    if (e && this.disabledFocusable) {
+      e.stopImmediatePropagation();
+      return;
+    }
+  };
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+
+    ((this as unknown) as HTMLElement).addEventListener('click', this.handleDisabledFocusableClick);
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+
+    ((this as unknown) as HTMLElement).removeEventListener('click', this.handleDisabledFocusableClick);
+  }
+}
diff --git a/packages/web-components/src/button/define.ts b/packages/web-components/src/button/define.ts
new file mode 100644
index 0000000000000..accd17e129837
--- /dev/null
+++ b/packages/web-components/src/button/define.ts
@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './button.definition.js';
+
+definition.define(FluentDesignSystem.registry);
diff --git a/packages/web-components/src/button/index.ts b/packages/web-components/src/button/index.ts
new file mode 100644
index 0000000000000..37df4b2a8edda
--- /dev/null
+++ b/packages/web-components/src/button/index.ts
@@ -0,0 +1,5 @@
+export * from './button.js';
+export * from './button.options.js';
+export { template as ButtonTemplate } from './button.template.js';
+export { styles as ButtonStyles } from './button.styles.js';
+export { definition as ButtonDefinition } from './button.definition.js';
diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts
index 8faecf8059979..e254cb04a98b6 100644
--- a/packages/web-components/src/index.ts
+++ b/packages/web-components/src/index.ts
@@ -2,6 +2,7 @@ export * from './accordion/index.js';
 export * from './accordion-item/index.js';
 export * from './avatar/index.js';
 export * from './badge/index.js';
+export * from './button/index.js';
 export * from './counter-badge/index.js';
 export * from './divider/index.js';
 export * from './image/index.js';