diff --git a/src/devtools/views/Profiler/RecordToggle.css b/src/devtools/views/Profiler/RecordToggle.css
index 7dc0c6e365..467bca27e3 100644
--- a/src/devtools/views/Profiler/RecordToggle.css
+++ b/src/devtools/views/Profiler/RecordToggle.css
@@ -23,3 +23,16 @@
 .InactiveRecordToggle:active {
   color: var(--color-record-hover);
 }
+
+.DisabledRecordToggle {
+  color: var(--color-button-disabled);
+}
+.DisabledRecordToggle:hover {
+  color: var(--color-button-disabled);
+}
+.DisabledRecordToggle:focus {
+  color: var(--color-button-disabled);
+}
+.DisabledRecordToggle:active {
+  color: var(--color-button-disabled);
+}
diff --git a/src/devtools/views/Profiler/RecordToggle.js b/src/devtools/views/Profiler/RecordToggle.js
index 94074002ca..a3d494c716 100644
--- a/src/devtools/views/Profiler/RecordToggle.js
+++ b/src/devtools/views/Profiler/RecordToggle.js
@@ -16,11 +16,16 @@ export default function RecordToggle({ disabled }: Props) {
     ProfilerContext
   );
 
+  let className = styles.InactiveRecordToggle;
+  if (disabled) {
+    className = styles.DisabledRecordToggle;
+  } else if (isProfiling) {
+    className = styles.ActiveRecordToggle;
+  }
+
   return (
     <Button
-      className={
-        isProfiling ? styles.ActiveRecordToggle : styles.InactiveRecordToggle
-      }
+      className={className}
       disabled={disabled}
       onClick={isProfiling ? stopProfiling : startProfiling}
       title={isProfiling ? 'Stop profiling' : 'Start profiling'}