diff --git a/packages/web-components/fast-components-msft/docs/api-report.md b/packages/web-components/fast-components-msft/docs/api-report.md
index 616df1f4512..0683ce5294c 100644
--- a/packages/web-components/fast-components-msft/docs/api-report.md
+++ b/packages/web-components/fast-components-msft/docs/api-report.md
@@ -29,9 +29,85 @@ import { Tabs } from '@microsoft/fast-foundation';
 import { TextArea } from '@microsoft/fast-foundation';
 import { TextField } from '@microsoft/fast-foundation';
 
+// Warning: (ae-internal-missing-underscore) The name "AccentButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const AccentButtonStyles: import("@microsoft/fast-element").ElementStyles;
+
+// @public (undocumented)
+export const accentFillActiveBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentFillFocusBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentFillHoverBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentFillLargeActiveBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentFillLargeFocusBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentFillLargeHoverBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentFillLargeRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentFillLargeSelectedBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentFillRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentFillSelectedBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentForegroundActiveBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentForegroundCutRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentForegroundFocusBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentForegroundHoverBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentForegroundLargeActiveBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentForegroundLargeFocusBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentForegroundLargeHoverBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentForegroundLargeRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentForegroundRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public
+export const ambientShadow = "0 0 calc((var(--elevation) * 0.225px) + 2px) rgba(0, 0, 0, calc(.11 * (2 - var(--background-luminance, 1))))";
+
 // @public (undocumented)
 export type BadgeAppearance = "accent" | "lightweight" | "neutral" | string;
 
+// Warning: (ae-internal-missing-underscore) The name "BaseButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const BaseButtonStyles: import("@microsoft/fast-element").ElementStyles;
+
+// @public (undocumented)
+export const directionalShadow = "0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgba(0, 0, 0, calc(.13 * (2 - var(--background-luminance, 1))))";
+
+// @public (undocumented)
+export const elevation: string;
+
 // @public (undocumented)
 export class FASTAccordion extends Accordion {
 }
@@ -262,6 +338,155 @@ export class FASTTextArea extends TextArea {
 export class FASTTextField extends TextField {
 }
 
+// @public (undocumented)
+export const heightNumber = "(var(--base-height-multiplier) + var(--density)) * var(--design-unit)";
+
+// Warning: (ae-internal-missing-underscore) The name "HypertextStyles" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const HypertextStyles: import("@microsoft/fast-element").ElementStyles;
+
+// Warning: (ae-internal-missing-underscore) The name "LightweightButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const LightweightButtonStyles: import("@microsoft/fast-element").ElementStyles;
+
+// @public (undocumented)
+export const neutralDividerRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillActiveBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillCardRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillFocusBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillHoverBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillInputActiveBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillInputFocusBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillInputHoverBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillInputRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillSelectedBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillStealthActiveBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillStealthFocusBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillStealthHoverBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillStealthRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillStealthSelectedBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillToggleActiveBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillToggleFocusBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillToggleHoverBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillToggleRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFocusBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFocusInnerAccentBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralForegroundActiveBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralForegroundFocusBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralForegroundHintBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralForegroundHintLargeBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralForegroundHoverBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralForegroundRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralForegroundToggleBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralForegroundToggleLargeBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralLayerCardBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralLayerCardContainerBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralLayerFloatingBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralLayerL1AltBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralLayerL1Behavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralLayerL2Behavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralLayerL3Behavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralLayerL4Behavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralOutlineActiveBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralOutlineFocusBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralOutlineHoverBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralOutlineRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// Warning: (ae-internal-missing-underscore) The name "OutlineButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const OutlineButtonStyles: import("@microsoft/fast-element").ElementStyles;
+
+// Warning: (ae-internal-missing-underscore) The name "StealthButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const StealthButtonStyles: import("@microsoft/fast-element").ElementStyles;
+
 
 // (No @packageDocumentation comment for this package)
 
diff --git a/packages/web-components/fast-components-msft/src/anchor/fixtures/anchor.html b/packages/web-components/fast-components-msft/src/anchor/fixtures/anchor.html
index ced49db9629..5a7c20083ec 100644
--- a/packages/web-components/fast-components-msft/src/anchor/fixtures/anchor.html
+++ b/packages/web-components/fast-components-msft/src/anchor/fixtures/anchor.html
@@ -17,7 +17,8 @@ <h4>Hypertext</h4>
     <fast-anchor href="#" appearance="hypertext">Anchor</fast-anchor>
     <br/>
     <fast-anchor appearance="hypertext">Anchor (no href)</fast-anchor>
-
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ut aliquam quas quod ipsam cupiditate, voluptate, corrupti <fast-anchor appearance="hypertext" href="#">doloremque totam</fast-anchor> dicta perspiciatis commodi consequatur reprehenderit laborum aliquid minima. Neque, recusandae. Adipisci.</p>
+    
     <h4>Lightweight</h4>
     <fast-anchor href="#" appearance="lightweight">Anchor</fast-anchor>
 
diff --git a/packages/web-components/fast-components-msft/src/styles/patterns/button.ts b/packages/web-components/fast-components-msft/src/styles/patterns/button.ts
index 89cc3f95cc9..5f6d801882b 100644
--- a/packages/web-components/fast-components-msft/src/styles/patterns/button.ts
+++ b/packages/web-components/fast-components-msft/src/styles/patterns/button.ts
@@ -1,5 +1,5 @@
 import { css } from "@microsoft/fast-element";
-import { display, focusVisible } from "@microsoft/fast-foundation";
+import { disabledCursor, display, focusVisible } from "@microsoft/fast-foundation";
 import { heightNumber } from "../size";
 import {
     accentFillActiveBehavior,
@@ -20,39 +20,47 @@ import {
     neutralForegroundRestBehavior,
 } from "../index";
 
+/**
+ * @internal
+ */
 export const BaseButtonStyles = css`
-    ${display("inline-block")} :host {
+    ${display("inline-flex")} :host {
         font-family: var(--body-font);
         outline: none;
+        font-size: var(--type-ramp-base-font-size);
+        line-height: var(--type-ramp-base-line-height);
+        height: calc(${heightNumber} * 1px);
+        min-width: calc(${heightNumber} * 1px);
+        background-color: ${neutralFillRestBehavior.var};
+        color: ${neutralForegroundRestBehavior.var};
+        border-radius: calc(var(--corner-radius) * 1px);
+        fill: currentColor;
+        cursor: pointer;
     }
 
     .control {
-        font-size: var(--type-ramp-base-font-size);
-        line-height: var(--type-ramp-base-line-height);
-        line-height: 1;
+        background: transparent;
+        flex-grow: 1;
         box-sizing: border-box;
         display: inline-flex;
         justify-content: center;
         align-items: center;
         padding: 0 calc((10 + (var(--design-unit) * 2 * var(--density))) * 1px);
-        height: calc(${heightNumber} * 1px);
-        min-width: calc(${heightNumber} * 1px);
         white-space: nowrap;
         outline: none;
         text-decoration: none;
-        cursor: pointer;
-        border-radius: calc(var(--corner-radius) * 1px);
-        background-color: ${neutralFillRestBehavior.var};
-        color: ${neutralForegroundRestBehavior.var};
-        fill: ${neutralForegroundRestBehavior.var};
         border: calc(var(--outline-width) * 1px) solid transparent;
+        color: inherit;
+        border-radius: inherit;
+        fill: inherit;
+        cursor: inherit;
     }
 
-    .control:hover {
+    :host(:hover) {
         background-color: ${neutralFillHoverBehavior.var};
     }
 
-    .control:active {
+    :host(:active) {
         background-color: ${neutralFillActiveBehavior.var};
     }
 
@@ -69,6 +77,8 @@ export const BaseButtonStyles = css`
 
     :host(.disabled) {
         opacity: var(--disabled-opacity);
+        background-color: ${neutralFillRestBehavior.var};
+        cursor: ${disabledCursor};
     }
 
     .start,
@@ -95,23 +105,30 @@ export const BaseButtonStyles = css`
     neutralFillActiveBehavior
 );
 
+/**
+ * @internal
+ */
 export const AccentButtonStyles = css`
-    :host(.accent) .control {
+    :host(.accent) {
         background: ${accentFillRestBehavior.var};
         color: ${accentForegroundCutRestBehavior.var};
     }
 
-    :host(.accent) .control:hover {
+    :host(.accent:hover) {
         background: ${accentFillHoverBehavior.var};
     }
 
-    :host(.accent) .control:active {
+    :host(.accent:active) .control:active {
         background: ${accentFillActiveBehavior.var}${accentFillActiveBehavior.var};
     }
 
     :host(.accent) .control:${focusVisible} {
         box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset ${neutralFocusInnerAccentBehavior.var};
     }
+
+    :host(.accent.disabled) {
+        background: ${accentFillRestBehavior.var};
+    }
 `.withBehaviors(
     accentFillRestBehavior,
     accentForegroundCutRestBehavior,
@@ -120,13 +137,22 @@ export const AccentButtonStyles = css`
     neutralFocusInnerAccentBehavior
 );
 
+/**
+ * @internal
+ */
 export const HypertextStyles = css`
+    :host(.hypertext) {
+        height: auto;
+        background: transparent;
+        vertical-align: bottom;
+    }
+
     :host(.hypertext) .control {
         padding: 0;
-        height: auto;
         border: none;
         box-shadow: none;
         border-radius: 0;
+        line-height: 1;
     }
     :host a.control:not(:link) {
         background-color: transparent;
@@ -154,22 +180,28 @@ export const HypertextStyles = css`
     neutralFocusBehavior
 );
 
+/**
+ * @internal
+ */
 export const LightweightButtonStyles = css`
+    :host(.lightweight) {
+        background: transparent;
+        color: ${accentForegroundRestBehavior.var};
+    }
+
     :host(.lightweight) .control {
         padding: 0;
         height: initial;
         border: none;
         box-shadow: none;
         border-radius: 0;
-        background: transparent;
-        color: ${accentForegroundRestBehavior.var};
     }
 
-    :host(.lightweight) .control:hover {
+    :host(.lightweight:hover) {
         color: ${accentForegroundHoverBehavior.var};
     }
 
-    :host(.lightweight) .control:active {
+    :host(.lightweight:active) {
         color: ${accentForegroundActiveBehavior.var};
     }
 
@@ -182,15 +214,15 @@ export const LightweightButtonStyles = css`
         display: block;
         height: calc(var(--outline-width) * 1px);
         position: absolute;
-        bottom: -3px;
+        top: calc(1em + 3px);
         width: 100%;
     }
 
-    :host(.lightweight) .control:hover .content::before {
+    :host(.lightweight:hover) .content::before {
         background: ${accentForegroundHoverBehavior.var};
     }
 
-    :host(.lightweight) .control:active .content::before {
+    :host(.lightweight:active) .content::before {
         background: ${accentForegroundActiveBehavior.var};
     }
 
@@ -198,6 +230,10 @@ export const LightweightButtonStyles = css`
         background: ${neutralForegroundRestBehavior.var};
         height: calc(var(--focus-outline-width) * 1px);
     }
+
+    :host(.lightweight.disabled) .content::before {
+        background: transparent;
+    }
 `.withBehaviors(
     accentForegroundRestBehavior,
     accentForegroundHoverBehavior,
@@ -206,24 +242,35 @@ export const LightweightButtonStyles = css`
     neutralForegroundRestBehavior
 );
 
+/**
+ * @internal
+ */
 export const OutlineButtonStyles = css`
-    :host(.outline) .control {
+    :host(.outline) {
         background: transparent;
         border-color: ${accentFillRestBehavior.var};
     }
 
-    :host(.outline) .control:hover {
+    :host(.outline:hover) {
         border-color: ${accentFillHoverBehavior.var};
     }
 
-    :host(.outline) .control:active {
+    :host(.outline:active) {
         border-color: ${accentFillActiveBehavior.var};
     }
 
+    :host(.outline) .control {
+        border-color: inherit;
+    }
+
     :host(.outline) .control:${focusVisible} {
         border: calc(var(--outline-width) * 1px) solid ${neutralFocusBehavior.var});
         box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) ${neutralFocusBehavior.var};
     }
+
+    :host(.outline.disabled) {
+        border-color: ${accentFillRestBehavior.var};
+    }
 `.withBehaviors(
     accentFillRestBehavior,
     accentFillHoverBehavior,
@@ -231,18 +278,25 @@ export const OutlineButtonStyles = css`
     neutralFocusBehavior
 );
 
+/**
+ * @internal
+ */
 export const StealthButtonStyles = css`
-    :host(.stealth) .control {
+    :host(.stealth) {
         background: ${neutralFillStealthRestBehavior.var};
     }
 
-    :host(.stealth) .control:hover {
+    :host(.stealth:hover) {
         background: ${neutralFillStealthHoverBehavior.var};
     }
 
-    :host(.stealth) .control:active {
+    :host(.stealth:active) {
         background: ${neutralFillStealthActiveBehavior.var};
     }
+
+    :host(.stealth.disabled) {
+        background: ${neutralFillStealthRestBehavior.var};
+    }
 `.withBehaviors(
     neutralFillStealthRestBehavior,
     neutralFillStealthHoverBehavior,
diff --git a/packages/web-components/fast-components-msft/temp/api-report.md b/packages/web-components/fast-components-msft/temp/api-report.md
index 616df1f4512..0683ce5294c 100644
--- a/packages/web-components/fast-components-msft/temp/api-report.md
+++ b/packages/web-components/fast-components-msft/temp/api-report.md
@@ -29,9 +29,85 @@ import { Tabs } from '@microsoft/fast-foundation';
 import { TextArea } from '@microsoft/fast-foundation';
 import { TextField } from '@microsoft/fast-foundation';
 
+// Warning: (ae-internal-missing-underscore) The name "AccentButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const AccentButtonStyles: import("@microsoft/fast-element").ElementStyles;
+
+// @public (undocumented)
+export const accentFillActiveBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentFillFocusBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentFillHoverBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentFillLargeActiveBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentFillLargeFocusBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentFillLargeHoverBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentFillLargeRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentFillLargeSelectedBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentFillRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentFillSelectedBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentForegroundActiveBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentForegroundCutRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentForegroundFocusBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentForegroundHoverBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentForegroundLargeActiveBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentForegroundLargeFocusBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentForegroundLargeHoverBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentForegroundLargeRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const accentForegroundRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public
+export const ambientShadow = "0 0 calc((var(--elevation) * 0.225px) + 2px) rgba(0, 0, 0, calc(.11 * (2 - var(--background-luminance, 1))))";
+
 // @public (undocumented)
 export type BadgeAppearance = "accent" | "lightweight" | "neutral" | string;
 
+// Warning: (ae-internal-missing-underscore) The name "BaseButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const BaseButtonStyles: import("@microsoft/fast-element").ElementStyles;
+
+// @public (undocumented)
+export const directionalShadow = "0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgba(0, 0, 0, calc(.13 * (2 - var(--background-luminance, 1))))";
+
+// @public (undocumented)
+export const elevation: string;
+
 // @public (undocumented)
 export class FASTAccordion extends Accordion {
 }
@@ -262,6 +338,155 @@ export class FASTTextArea extends TextArea {
 export class FASTTextField extends TextField {
 }
 
+// @public (undocumented)
+export const heightNumber = "(var(--base-height-multiplier) + var(--density)) * var(--design-unit)";
+
+// Warning: (ae-internal-missing-underscore) The name "HypertextStyles" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const HypertextStyles: import("@microsoft/fast-element").ElementStyles;
+
+// Warning: (ae-internal-missing-underscore) The name "LightweightButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const LightweightButtonStyles: import("@microsoft/fast-element").ElementStyles;
+
+// @public (undocumented)
+export const neutralDividerRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillActiveBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillCardRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillFocusBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillHoverBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillInputActiveBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillInputFocusBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillInputHoverBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillInputRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillSelectedBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillStealthActiveBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillStealthFocusBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillStealthHoverBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillStealthRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillStealthSelectedBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillToggleActiveBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillToggleFocusBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillToggleHoverBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFillToggleRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFocusBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralFocusInnerAccentBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralForegroundActiveBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralForegroundFocusBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralForegroundHintBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralForegroundHintLargeBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralForegroundHoverBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralForegroundRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralForegroundToggleBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralForegroundToggleLargeBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralLayerCardBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralLayerCardContainerBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralLayerFloatingBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralLayerL1AltBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralLayerL1Behavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralLayerL2Behavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralLayerL3Behavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralLayerL4Behavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralOutlineActiveBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralOutlineFocusBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralOutlineHoverBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// @public (undocumented)
+export const neutralOutlineRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior;
+
+// Warning: (ae-internal-missing-underscore) The name "OutlineButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const OutlineButtonStyles: import("@microsoft/fast-element").ElementStyles;
+
+// Warning: (ae-internal-missing-underscore) The name "StealthButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const StealthButtonStyles: import("@microsoft/fast-element").ElementStyles;
+
 
 // (No @packageDocumentation comment for this package)
 
diff --git a/packages/web-components/fast-components/src/anchor/fixtures/anchor.html b/packages/web-components/fast-components/src/anchor/fixtures/anchor.html
index ced49db9629..8fea4c7c7de 100644
--- a/packages/web-components/fast-components/src/anchor/fixtures/anchor.html
+++ b/packages/web-components/fast-components/src/anchor/fixtures/anchor.html
@@ -3,6 +3,10 @@ <h1>Anchor</h1>
 
     <h4>Default</h4>
     <fast-anchor href="#">Anchor</fast-anchor>
+
+    <h4>Inline</h4>
+    <fast-anchor href="#">Cancel</fast-anchor>
+    <fast-anchor href="#" appearance="accent">Submit</fast-anchor>
     
     <h5>With target</h5>
     <fast-anchor href="https://microsoft.com" target="_blank">Anchor</fast-anchor>
@@ -17,6 +21,7 @@ <h4>Hypertext</h4>
     <fast-anchor href="#" appearance="hypertext">Anchor</fast-anchor>
     <br/>
     <fast-anchor appearance="hypertext">Anchor (no href)</fast-anchor>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ut aliquam quas quod ipsam cupiditate, voluptate, corrupti <fast-anchor appearance="hypertext" href="#">doloremque totam</fast-anchor> dicta perspiciatis commodi consequatur reprehenderit laborum aliquid minima. Neque, recusandae. Adipisci.</p>
 
     <h4>Lightweight</h4>
     <fast-anchor href="#" appearance="lightweight">Anchor</fast-anchor>
diff --git a/packages/web-components/fast-components/src/button/fixtures/button.html b/packages/web-components/fast-components/src/button/fixtures/button.html
index 7fac31b19c1..604fd8ca431 100644
--- a/packages/web-components/fast-components/src/button/fixtures/button.html
+++ b/packages/web-components/fast-components/src/button/fixtures/button.html
@@ -3,6 +3,11 @@ <h1>Button</h1>
 
     <h4>Default</h4>
     <fast-button>Button</fast-button>
+
+    <h4>Inline</h4>
+    <fast-button>Cancel</fast-button>
+    <fast-button appearance="accent">Submit</fast-button>
+
     <h5>disabled</h5>
     <fast-button disabled>Button</fast-button>
     <h5>autofocus</h5>
diff --git a/packages/web-components/fast-components/src/styles/patterns/button.ts b/packages/web-components/fast-components/src/styles/patterns/button.ts
index 5851e145d06..3ff71bc12cd 100644
--- a/packages/web-components/fast-components/src/styles/patterns/button.ts
+++ b/packages/web-components/fast-components/src/styles/patterns/button.ts
@@ -1,5 +1,5 @@
 import { css } from "@microsoft/fast-element";
-import { display, focusVisible } from "@microsoft/fast-foundation";
+import { disabledCursor, display, focusVisible } from "@microsoft/fast-foundation";
 import { heightNumber } from "../size";
 import {
     accentFillActiveBehavior,
@@ -24,38 +24,43 @@ import {
  * @internal
  */
 export const BaseButtonStyles = css`
-    ${display("inline-block")} :host {
+    ${display("inline-flex")} :host {
         font-family: var(--body-font);
         outline: none;
+        font-size: var(--type-ramp-base-font-size);
+        line-height: var(--type-ramp-base-line-height);
+        height: calc(${heightNumber} * 1px);
+        min-width: calc(${heightNumber} * 1px);
+        background-color: ${neutralFillRestBehavior.var};
+        color: ${neutralForegroundRestBehavior.var};
+        border-radius: calc(var(--corner-radius) * 1px);
+        fill: currentColor;
+        cursor: pointer;
     }
 
     .control {
-        font-size: var(--type-ramp-base-font-size);
-        line-height: var(--type-ramp-base-line-height);
-        line-height: 1;
+        background: transparent;
+        flex-grow: 1;
         box-sizing: border-box;
         display: inline-flex;
         justify-content: center;
         align-items: center;
         padding: 0 calc((10 + (var(--design-unit) * 2 * var(--density))) * 1px);
-        height: calc(${heightNumber} * 1px);
-        min-width: calc(${heightNumber} * 1px);
         white-space: nowrap;
         outline: none;
         text-decoration: none;
-        cursor: pointer;
-        border-radius: calc(var(--corner-radius) * 1px);
-        background-color: ${neutralFillRestBehavior.var};
-        color: ${neutralForegroundRestBehavior.var};
-        fill: ${neutralForegroundRestBehavior.var};
         border: calc(var(--outline-width) * 1px) solid transparent;
+        color: inherit;
+        border-radius: inherit;
+        fill: inherit;
+        cursor: inherit;
     }
 
-    .control:hover {
+    :host(:hover) {
         background-color: ${neutralFillHoverBehavior.var};
     }
 
-    .control:active {
+    :host(:active) {
         background-color: ${neutralFillActiveBehavior.var};
     }
 
@@ -72,6 +77,8 @@ export const BaseButtonStyles = css`
 
     :host(.disabled) {
         opacity: var(--disabled-opacity);
+        background-color: ${neutralFillRestBehavior.var};
+        cursor: ${disabledCursor};
     }
 
     .start,
@@ -102,22 +109,26 @@ export const BaseButtonStyles = css`
  * @internal
  */
 export const AccentButtonStyles = css`
-    :host(.accent) .control {
+    :host(.accent) {
         background: ${accentFillRestBehavior.var};
         color: ${accentForegroundCutRestBehavior.var};
     }
 
-    :host(.accent) .control:hover {
+    :host(.accent:hover) {
         background: ${accentFillHoverBehavior.var};
     }
 
-    :host(.accent) .control:active {
+    :host(.accent:active) .control:active {
         background: ${accentFillActiveBehavior.var}${accentFillActiveBehavior.var};
     }
 
     :host(.accent) .control:${focusVisible} {
         box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset ${neutralFocusInnerAccentBehavior.var};
     }
+
+    :host(.accent.disabled) {
+        background: ${accentFillRestBehavior.var};
+    }
 `.withBehaviors(
     accentFillRestBehavior,
     accentForegroundCutRestBehavior,
@@ -130,12 +141,18 @@ export const AccentButtonStyles = css`
  * @internal
  */
 export const HypertextStyles = css`
+    :host(.hypertext) {
+        height: auto;
+        background: transparent;
+        vertical-align: bottom;
+    }
+
     :host(.hypertext) .control {
         padding: 0;
-        height: auto;
         border: none;
         box-shadow: none;
         border-radius: 0;
+        line-height: 1;
     }
     :host a.control:not(:link) {
         background-color: transparent;
@@ -167,21 +184,24 @@ export const HypertextStyles = css`
  * @internal
  */
 export const LightweightButtonStyles = css`
+    :host(.lightweight) {
+        background: transparent;
+        color: ${accentForegroundRestBehavior.var};
+    }
+
     :host(.lightweight) .control {
         padding: 0;
         height: initial;
         border: none;
         box-shadow: none;
         border-radius: 0;
-        background: transparent;
-        color: ${accentForegroundRestBehavior.var};
     }
 
-    :host(.lightweight) .control:hover {
+    :host(.lightweight:hover) {
         color: ${accentForegroundHoverBehavior.var};
     }
 
-    :host(.lightweight) .control:active {
+    :host(.lightweight:active) {
         color: ${accentForegroundActiveBehavior.var};
     }
 
@@ -194,15 +214,15 @@ export const LightweightButtonStyles = css`
         display: block;
         height: calc(var(--outline-width) * 1px);
         position: absolute;
-        bottom: -3px;
+        top: calc(1em + 4px);
         width: 100%;
     }
 
-    :host(.lightweight) .control:hover .content::before {
+    :host(.lightweight:hover) .content::before {
         background: ${accentForegroundHoverBehavior.var};
     }
 
-    :host(.lightweight) .control:active .content::before {
+    :host(.lightweight:active) .content::before {
         background: ${accentForegroundActiveBehavior.var};
     }
 
@@ -210,6 +230,10 @@ export const LightweightButtonStyles = css`
         background: ${neutralForegroundRestBehavior.var};
         height: calc(var(--focus-outline-width) * 1px);
     }
+
+    :host(.lightweight.disabled) .content::before {
+        background: transparent;
+    }
 `.withBehaviors(
     accentForegroundRestBehavior,
     accentForegroundHoverBehavior,
@@ -222,23 +246,31 @@ export const LightweightButtonStyles = css`
  * @internal
  */
 export const OutlineButtonStyles = css`
-    :host(.outline) .control {
+    :host(.outline) {
         background: transparent;
         border-color: ${accentFillRestBehavior.var};
     }
 
-    :host(.outline) .control:hover {
+    :host(.outline:hover) {
         border-color: ${accentFillHoverBehavior.var};
     }
 
-    :host(.outline) .control:active {
+    :host(.outline:active) {
         border-color: ${accentFillActiveBehavior.var};
     }
 
+    :host(.outline) .control {
+        border-color: inherit;
+    }
+
     :host(.outline) .control:${focusVisible} {
         border: calc(var(--outline-width) * 1px) solid ${neutralFocusBehavior.var});
         box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) ${neutralFocusBehavior.var};
     }
+
+    :host(.outline.disabled) {
+        border-color: ${accentFillRestBehavior.var};
+    }
 `.withBehaviors(
     accentFillRestBehavior,
     accentFillHoverBehavior,
@@ -250,17 +282,21 @@ export const OutlineButtonStyles = css`
  * @internal
  */
 export const StealthButtonStyles = css`
-    :host(.stealth) .control {
+    :host(.stealth) {
         background: ${neutralFillStealthRestBehavior.var};
     }
 
-    :host(.stealth) .control:hover {
+    :host(.stealth:hover) {
         background: ${neutralFillStealthHoverBehavior.var};
     }
 
-    :host(.stealth) .control:active {
+    :host(.stealth:active) {
         background: ${neutralFillStealthActiveBehavior.var};
     }
+
+    :host(.stealth.disabled) {
+        background: ${neutralFillStealthRestBehavior.var};
+    }
 `.withBehaviors(
     neutralFillStealthRestBehavior,
     neutralFillStealthHoverBehavior,
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index cd9c14ceb02..dfe5ab408b1 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -491,7 +491,7 @@ export function when<TSource = any, TReturn = any>(binding: Binding<TSource, TRe
 
 // Warnings were encountered during analysis:
 //
-// dist/dts/dom.d.ts:21:5 - (ae-forgotten-export) The symbol "TrustedTypesPolicy" needs to be exported by the entry point index.d.ts
+// dist/dts/dom.d.ts:25:5 - (ae-forgotten-export) The symbol "TrustedTypesPolicy" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)