diff --git a/change/@fluentui-react-button-2020-11-04-12-17-01-buttonSass.json b/change/@fluentui-react-button-2020-11-04-12-17-01-buttonSass.json
new file mode 100644
index 0000000000000..8abaa97a278e9
--- /dev/null
+++ b/change/@fluentui-react-button-2020-11-04-12-17-01-buttonSass.json
@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Button: Removing unused scss files.",
+  "packageName": "@fluentui/react-button",
+  "email": "humbertomakotomorimoto@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2020-11-04T20:17:01.167Z"
+}
diff --git a/packages/react-button/src/components/Button/Button.scss b/packages/react-button/src/components/Button/Button.scss
deleted file mode 100644
index eb1d2b46c543b..0000000000000
--- a/packages/react-button/src/components/Button/Button.scss
+++ /dev/null
@@ -1,214 +0,0 @@
-@import '~@fluentui/common-styles/src/focusBorder';
-
-/**
-  * Slot definitions
-  *
-  * Slot definitions must align to the names of the slots themselves. They should:
-  *
-  * 1. Contain the actual css property definitions (E.g. background-color: {value})
-  * 2. Property definitions should map to tokens using the format: {component}-{property}
-  * 3. Avoid hard coding values unless there are absolutely no use cases to change
-  *    the property value.
-  * 4. Order hardcoded css values first, tokens based second. This way we can identify
-  *    what is hardcoded easily.
- **/
-
-.root {
-  cursor: pointer;
-  align-items: center;
-  border-style: solid;
-  display: inline-flex;
-  justify-content: center;
-  outline: none;
-  position: relative;
-  user-select: none;
-  box-sizing: border-box;
-  vertical-align: middle;
-  text-decoration: none;
-
-  background: var(--button-background, white);
-  color: var(--button-contentColor, #2c2621);
-
-  border-color: var(--button-borderColor);
-  border-radius: var(--button-borderRadius);
-  border-width: var(--button-borderWidth);
-  box-shadow: var(--button-boxShadow);
-
-  width: var(--button-width);
-  max-width: var(--button-maxWidth);
-  height: var(--button-height);
-  min-height: var(--button-minHeight);
-
-  cursor: pointer;
-  padding: var(--button-padding);
-  transition: var(--button-transition);
-  white-space: var(--button-whiteSpace, nowrap);
-
-  font-family: var(--button-fontFamily);
-  font-size: var(--button-fontSize);
-  font-weight: var(--button-fontWeight);
-
-  @include focus-border(
-    $padding: -1px,
-    $color: var(--button-focusColor),
-    $thickness: var(--button-focusWidth, 2px),
-    $radius: var(--button-borderRadius)
-  );
-  @include focus-box-shadow($hOffset: 0, $vOffset: 0, $blur: 0, $thickness: 1px, $color: var(--button-focusInnerColor));
-
-  /**
-  * Modifiers
-  *
-  * Modifiers must align to the props on the component. They should:
-  *
-  * 1. Redefine the values for {component}-{property} tokens.
-  * 2. Map property definitions to variables using the format: {component}-{property}
-  * 3. Avoid defining styles directly.
- **/
-  &._primary {
-    --button-background: var(--color-brand-background);
-    --button-borderColor: var(--color-brand-borderColor);
-    --button-contentColor: var(--color-brand-contentColor);
-    --button-iconColor: var(--color-brand-iconColor);
-
-    --button-hovered-background: var(--color-brand-hovered-background);
-    --button-hovered-borderColor: var(--color-brand-hovered-borderColor);
-    --button-hovered-contentColor: var(--color-brand-hovered-contentColor);
-    --button-hovered-iconColor: var(--color-brand-hovered-iconColor);
-
-    --button-focused-background: var(--color-brand-focused-background);
-    --button-focused-borderColor: var(--color-brand-focused-borderColor);
-    --button-focused-contentColor: var(--color-brand-focused-contentColor);
-    --button-focused-iconColor: var(--color-brand-focused-iconColor);
-
-    --button-pressed-background: var(--color-brand-pressed-background);
-    --button-pressed-borderColor: var(--color-brand-pressed-borderColor);
-    --button-pressed-contentColor: var(--color-brand-pressed-contentColor);
-    --button-pressed-iconColor: var(--color-brand-pressed-iconColor);
-
-    --button-disabled-background: var(--color-brand-disabled-background);
-    --button-disabled-borderColor: var(--color-brand-disabled-borderColor);
-    --button-disabled-contentColor: var(--color-brand-disabled-contentColor);
-    --button-disabled-iconColor: var(--color-brand-disabled-iconColor);
-  }
-
-  &._ghost {
-    --button-background: var(--ghost-background);
-    --button-borderColor: var(--ghost-borderColor);
-    --button-contentColor: var(--ghost-contentColor);
-    --button-iconColor: var(--ghost-iconColor);
-
-    --button-disabled-background: var(--ghost-disabled-background);
-    --button-disabled-borderColor: var(--ghost-disabled-borderColor);
-    --button-disabled-contentColor: var(--ghost-disabled-contentColor);
-    --button-disabled-iconColor: var(--ghost-disabled-iconColor);
-
-    --button-focused-background: var(--ghost-focused-background);
-    --button-focused-borderColor: var(--ghost-focused-borderColor);
-    --button-focused-contentColor: var(--ghost-focused-contentColor);
-    --button-focused-iconColor: var(--ghost-focused-iconColor);
-
-    --button-hovered-background: var(--ghost-hovered-background);
-    --button-hovered-borderColor: var(--ghost-hovered-borderColor);
-    --button-hovered-contentColor: var(--ghost-hovered-contentColor);
-    --button-hovered-iconColor: var(--ghost-hovered-iconColor);
-
-    --button-pressed-background: var(--ghost-pressed-background);
-    --button-pressed-borderColor: var(--ghost-pressed-borderColor);
-    --button-pressed-contentColor: var(--ghost-pressed-contentColor);
-    --button-pressed-iconColor: var(--ghost-pressed-iconColor);
-  }
-
-  &._iconOnly {
-    --button-width: var(--button-height, var(--button-minHeight));
-    --button-padding: 0;
-  }
-
-  &._circular {
-    --button-borderRadius: 50000px;
-  }
-
-  &._block {
-    --button-width: 100%;
-  }
-
-  // TODO: confirm if we should support size prop.
-  &._size_smallest {
-    --button-minHeight: var(--button-size-smallest);
-  }
-
-  &._size_smaller {
-    --button-minHeight: var(--button-size-smaller);
-  }
-
-  &._size_small {
-    --button-minHeight: var(--button-size-small);
-  }
-
-  &._size_large {
-    --button-minHeight: var(--button-size-large);
-  }
-
-  &._size_larger {
-    --button-minHeight: var(--button-size-larger);
-  }
-
-  &._size_largest {
-    --button-minHeight: var(--button-size-largest);
-  }
-
-  &._disabled {
-    pointer-events: none;
-    opacity: var(--button-disabled-opacity);
-    background-color: var(--button-disabled-background);
-    color: var(--button-disabled-contentColor);
-    border-color: var(--button-disabled-borderColor);
-    box-shadow: var(--button-disabled-boxShadow);
-  }
-}
-
-.icon {
-  color: var(--button-iconColor);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--button-iconSize);
-  height: var(--button-iconSize);
-  font-size: var(--button-iconSize, inherit);
-  font-weight: normal;
-
-  ._disabled & {
-    color: var(--button-disabled-iconColor);
-  }
-}
-
-/* selectors */
-
-.root > *:not(:first-child) {
-  margin-left: var(--button-contentGap);
-}
-
-.root:hover {
-  background: var(--button-hovered-background, var(--button-background));
-  color: var(--button-hovered-contentColor, var(--button-contentColor));
-  border-color: var(--button-hovered-borderColor, var(--button-borderColor));
-  box-shadow: var(--button-hovered-boxShadow, var(--button-boxShadow));
-
-  .icon {
-    color: var(--button-hovered-iconColor, var(--button-iconColor));
-  }
-}
-
-.root:active {
-  background: var(--button-pressed-background, var(--button-hovered-background));
-  color: var(--button-pressed-contentColor, var(--button-hovered-contentColor, var(--button-contentColor)));
-  border-color: var(--button-pressed-borderColor, var(--button-hovered-borderColor, var(--button-borderColor)));
-  box-shadow: var(--button-pressed-boxShadow, var(--button-hovered-boxShadow, var(--button-boxShadow)));
-
-  transform: var(--button-pressed-transform);
-  transition: var(--button-pressed-transition);
-
-  .icon {
-    color: var(--button-pressed-iconColor, var(--button-iconColor));
-  }
-}
diff --git a/packages/react-button/src/components/CompoundButton/CompoundButton.scss b/packages/react-button/src/components/CompoundButton/CompoundButton.scss
deleted file mode 100644
index b72d38bab94c6..0000000000000
--- a/packages/react-button/src/components/CompoundButton/CompoundButton.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-.root {
-  --button-height: auto;
-  --button-maxWidth: 280px;
-  --button-minHeight: 72px;
-  --button-padding: 16px 12px;
-
-  &._iconOnly {
-    --button-minHeight: var(--button-size-regular);
-    --button-padding: 0;
-    --button-width: var(--button-minHeight);
-  }
-
-  &._ghost {
-    --button-secondaryContentColor: var(--ghost-secondaryContentColor);
-    --button-focused-secondaryContentColor: var(--ghost-focused-secondaryContentColor);
-    --button-hovered-secondaryContentColor: var(--ghost-hovered-secondaryContentColor);
-    --button-pressed-secondaryContentColor: var(--ghost-pressed-secondaryContentColor);
-  }
-
-  &._primary {
-    --button-secondaryContentColor: var(--color-brand-secondaryContentColor);
-    --button-focused-secondaryContentColor: var(--color-brand-focused-secondaryContentColor);
-    --button-hovered-secondaryContentColor: var(--color-brand-hovered-secondaryContentColor);
-    --button-pressed-secondaryContentColor: var(--color-brand-pressed-secondaryContentColor);
-  }
-
-  &._disabled {
-    .secondaryContent {
-      color: var(--button-disabled-secondaryContentColor, var(--button-secondaryContentColor));
-    }
-  }
-
-  &:hover {
-    .secondaryContent {
-      color: var(--button-hovered-secondaryContentColor, var(--button-secondaryContentColor));
-    }
-  }
-
-  &:active {
-    .secondaryContent {
-      color: var(--button-pressed-secondaryContentColor, var(--button-secondaryContentColor));
-    }
-  }
-}
-
-.contentContainer {
-  display: flex;
-  flex-direction: column;
-  text-align: left;
-}
-
-.secondaryContent {
-  color: var(--button-secondaryContentColor);
-  font-size: var(--button-secondaryContentFontSize);
-  line-height: 100%;
-}
diff --git a/packages/react-button/src/components/MenuButton/MenuButton.scss b/packages/react-button/src/components/MenuButton/MenuButton.scss
deleted file mode 100644
index 2036c436c850f..0000000000000
--- a/packages/react-button/src/components/MenuButton/MenuButton.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@import '../Button/Button.scss';
-
-/*
- * Have the layer that creates the menu not take out any extra space inside of the button.
- * We need to specify `.root >` to avoid specificity problems.
- */
-.root > .menuIcon + * {
-  margin-left: 0;
-}
-
-.root {
-  &._ghost {
-    --button-menuIconColor: var(--ghost-menuIconColor);
-
-    &._expanded {
-      --button-contentColor: var(--ghost-expanded-contentColor);
-    }
-  }
-}
-
-.menuIcon {
-  color: var(--button-menuIconColor);
-
-  ._disabled & {
-    color: var(--button-disabled-menuIconColor);
-  }
-}
-
-.root:hover {
-  .menuIcon {
-    color: var(--button-hovered-menuIconColor, var(--button-menuIconColor));
-  }
-}
-
-.root:active {
-  .menuIcon {
-    color: var(--button-hovered-menuIconColor, var(--button-menuIconColor));
-  }
-}
diff --git a/packages/react-button/src/components/SplitButton/SplitButton.scss b/packages/react-button/src/components/SplitButton/SplitButton.scss
deleted file mode 100644
index b61bcd4a2cbf4..0000000000000
--- a/packages/react-button/src/components/SplitButton/SplitButton.scss
+++ /dev/null
@@ -1,159 +0,0 @@
-@import '~@fluentui/common-styles/src/focusBorder';
-
-.root {
-  width: auto;
-  padding: 0;
-
-  > *:not(:first-child) {
-    margin-left: 0;
-  }
-
-  // TODO: confirm if we should support size prop.
-  &._size_smallest {
-    --button-dividerLength: var(--button-size-smallest);
-  }
-
-  &._size_smaller {
-    --button-dividerLength: var(--button-size-smaller);
-  }
-
-  &._size_small {
-    --button-dividerLength: var(--button-size-small);
-  }
-
-  &._size_large {
-    --button-dividerLength: var(--button-size-large);
-  }
-
-  &._size_larger {
-    --button-dividerLength: var(--button-size-larger);
-  }
-
-  &._size_largest {
-    --button-dividerLength: var(--button-size-largest);
-  }
-}
-
-.button,
-.menuButton {
-  align-items: center;
-  background: inherit;
-  border: none;
-  box-shadow: none;
-  color: inherit;
-  cursor: pointer;
-  display: flex;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  height: var(--button-height);
-  justify-content: center;
-  min-height: var(--button-minHeight);
-
-  @include focus-border($thickness: 0);
-}
-
-.button {
-  > *:not(:first-child) {
-    margin-left: var(--button-contentGap);
-  }
-
-  padding: var(--button-padding);
-
-  ._circular & {
-    border-top-left-radius: var(--button-borderRadius);
-    border-bottom-left-radius: var(--button-borderRadius);
-  }
-
-  ._block & {
-    flex-grow: 1;
-    justify-content: flex-end;
-  }
-
-  ._iconOnly & {
-    --button-padding: 0;
-    --button-width: var(--button-height, var(--button-minHeight));
-
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
-    width: var(--button-width);
-  }
-}
-
-.menuButton {
-  --button-padding: 0;
-  --button-width: var(--button-height, var(--button-minHeight));
-
-  width: var(--button-width);
-
-  ._circular & {
-    border-top-right-radius: var(--button-borderRadius);
-    border-bottom-right-radius: var(--button-borderRadius);
-  }
-}
-
-.divider {
-  border-left: var(--button-dividerThickness) solid var(--button-dividerColor);
-  height: var(--button-dividerLength);
-  width: 0px;
-
-  ._primary & {
-    --button-dividerColor: var(--color-brand-dividerColor);
-  }
-
-  ._disabled & {
-    --button-dividerColor: var(--color-brand-disabled-dividerColor);
-  }
-}
-
-/* selectors */
-
-.root:hover {
-  background: var(--button-background);
-  color: var(--button-contentColor);
-  border-color: var(--button-borderColor);
-  box-shadow: var(--button-boxShadow);
-
-  .icon {
-    color: var(--button-hovered-contentColor);
-  }
-}
-
-.root:active {
-  background: var(--button-background);
-  color: var(--button-contentColor);
-  border-color: var(--button-borderColor);
-  box-shadow: var(--button-boxShadow);
-
-  transform: var(--button-pressed-transform);
-  transition: var(--button-pressed-transition);
-
-  .icon {
-    color: var(--button-contentColor);
-  }
-}
-
-.button:hover,
-.menuButton:hover {
-  background: var(--button-hovered-background, var(--button-background));
-  color: var(--button-hovered-contentColor, var(--button-contentColor));
-  border-color: var(--button-hovered-borderColor, var(--button-borderColor));
-  box-shadow: var(--button-hovered-boxShadow, var(--button-boxShadow));
-
-  .icon {
-    color: var(--button-hovered-iconColor, var(--button-hovered-contentColor));
-  }
-}
-
-.button:active,
-.menuButton:active {
-  background: var(--button-pressed-background, var(--button-hovered-background));
-  color: var(--button-pressed-contentColor, var(--button-hovered-contentColor, var(--button-contentColor)));
-  border-color: var(--button-pressed-borderColor, var(--button-hovered-borderColor, var(--button-borderColor)));
-  box-shadow: var(--button-pressed-boxShadow, var(--button-hovered-boxShadow, var(--button-boxShadow)));
-
-  .icon {
-    color: var(--button-pressed-iconColor, var(--button-pressed-contentColor));
-  }
-}
diff --git a/packages/react-button/src/components/ToggleButton/ToggleButton.scss b/packages/react-button/src/components/ToggleButton/ToggleButton.scss
deleted file mode 100644
index 3a22eb8d0fd07..0000000000000
--- a/packages/react-button/src/components/ToggleButton/ToggleButton.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Slot definitions
- *
- * Slot definitions must align to the names of the slots themselves. They should:
- *
- * 1. Contain the actual css property definitions (E.g. background-color: {value})
- * 2. Property definitions should map to tokens using the format: {component}-{property}
- * 3. Avoid hard coding values unless there are absolutely no use cases to change
- *    the property value.
- * 4. Order hardcoded css values first, tokens based second. This way we can identify
- *    what is hardcoded easily.
- */
-.root {
-  /**
-   * Modifiers
-   *
-   * Modifiers must align to the props on the component. They should:
-   *
-   * 1. Redefine the values for {component}-{property} tokens.
-   * 2. Map property definitions to variables using the format: {component}-{property}
-   * 3. Avoid defining styles directly.
-   */
-  &._checked {
-    --button-background: var(--button-checked-background);
-    --button-contentColor: var(--button-checked-contentColor);
-
-    --button-hovered-background: var(--button-checkedHovered-background);
-    --button-hovered-contentColor: var(--button-checkedHovered-contentColor);
-
-    &._primary {
-      --button-background: var(--color-brand-checked-background);
-      --button-contentColor: var(--color-brand-checked-contentColor);
-
-      --button-hovered-background: var(--color-brand-checkedHovered-background);
-      --button-hovered-contentColor: var(--color-brand-checkedHovered-contentColor);
-    }
-
-    &._ghost {
-      --button-background: var(--ghost-checked-background);
-      --button-contentColor: var(--ghost-checked-contentColor);
-
-      --button-hovered-background: var(--ghost-checkedHovered-background);
-      --button-hovered-contentColor: var(--ghost-checkedHovered-contentColor);
-    }
-  }
-}