diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index c7ab6a81b6..819d1a4558 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -161,6 +161,154 @@ exports[`Storyshots Buttons|Button Colors 1`] = `
 </div>
 `;
 
+exports[`Storyshots Buttons|Button Disabled 1`] = `
+<div>
+  <div
+    className="sc-htoDjs bIDNS"
+  >
+    <button
+      className="button is-primary"
+      disabled={true}
+      onClick={[Function]}
+      type="button"
+    >
+      primary
+       
+    </button>
+  </div>
+  <div
+    className="sc-htoDjs bIDNS"
+  >
+    <button
+      className="button is-link"
+      disabled={true}
+      onClick={[Function]}
+      type="button"
+    >
+      link
+       
+    </button>
+  </div>
+  <div
+    className="sc-htoDjs bIDNS"
+  >
+    <button
+      className="button is-info"
+      disabled={true}
+      onClick={[Function]}
+      type="button"
+    >
+      info
+       
+    </button>
+  </div>
+  <div
+    className="sc-htoDjs bIDNS"
+  >
+    <button
+      className="button is-success"
+      disabled={true}
+      onClick={[Function]}
+      type="button"
+    >
+      success
+       
+    </button>
+  </div>
+  <div
+    className="sc-htoDjs bIDNS"
+  >
+    <button
+      className="button is-warning"
+      disabled={true}
+      onClick={[Function]}
+      type="button"
+    >
+      warning
+       
+    </button>
+  </div>
+  <div
+    className="sc-htoDjs bIDNS"
+  >
+    <button
+      className="button is-danger"
+      disabled={true}
+      onClick={[Function]}
+      type="button"
+    >
+      danger
+       
+    </button>
+  </div>
+  <div
+    className="sc-htoDjs bIDNS"
+  >
+    <button
+      className="button is-white"
+      disabled={true}
+      onClick={[Function]}
+      type="button"
+    >
+      white
+       
+    </button>
+  </div>
+  <div
+    className="sc-htoDjs bIDNS"
+  >
+    <button
+      className="button is-light"
+      disabled={true}
+      onClick={[Function]}
+      type="button"
+    >
+      light
+       
+    </button>
+  </div>
+  <div
+    className="sc-htoDjs bIDNS"
+  >
+    <button
+      className="button is-dark"
+      disabled={true}
+      onClick={[Function]}
+      type="button"
+    >
+      dark
+       
+    </button>
+  </div>
+  <div
+    className="sc-htoDjs bIDNS"
+  >
+    <button
+      className="button is-black"
+      disabled={true}
+      onClick={[Function]}
+      type="button"
+    >
+      black
+       
+    </button>
+  </div>
+  <div
+    className="sc-htoDjs bIDNS"
+  >
+    <button
+      className="button is-text"
+      disabled={true}
+      onClick={[Function]}
+      type="button"
+    >
+      text
+       
+    </button>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Buttons|Button Loading 1`] = `
 <div
   className="sc-htoDjs bIDNS"
diff --git a/scm-ui/ui-components/src/buttons/index.stories.tsx b/scm-ui/ui-components/src/buttons/index.stories.tsx
index a238f25689..cf33753eb2 100644
--- a/scm-ui/ui-components/src/buttons/index.stories.tsx
+++ b/scm-ui/ui-components/src/buttons/index.stories.tsx
@@ -34,6 +34,15 @@ storiesOf("Buttons|Button", module)
         Loading Button
       </Button>
     </Spacing>
+  ))
+  .add("Disabled", () => (
+    <div>
+      {colors.map(color => (
+        <Spacing key={color}>
+          <Button color={color} label={color} disabled={true} />
+        </Spacing>
+      ))}
+    </div>
   ));
 
 const buttonStory = (name: string, storyFn: () => ReactElement) => {
diff --git a/scm-ui/ui-styles/src/scm.scss b/scm-ui/ui-styles/src/scm.scss
index bcb1fd4aa4..adb3c0b774 100644
--- a/scm-ui/ui-styles/src/scm.scss
+++ b/scm-ui/ui-styles/src/scm.scss
@@ -303,6 +303,10 @@ $danger-25: scale-color($danger, $lightness: 75%);
     }
   }
 
+  &.is-warning {
+    color: #88550D;
+  }
+
   &.is-primary:hover,
   &.is-primary.is-hovered {
     background-color: scale-color($primary, $lightness: -10%);
@@ -371,6 +375,7 @@ $danger-25: scale-color($danger, $lightness: 75%);
 
   &.is-warning[disabled] {
     background-color: scale-color($warning, $lightness: 75%);
+    color: #e1d4c2;
   }
 
   &.is-danger:hover,