diff --git a/packages/altair-electron/src/app/actions.ts b/packages/altair-electron/src/app/actions.ts
index 2e1bf7c04a..976d44f794 100644
--- a/packages/altair-electron/src/app/actions.ts
+++ b/packages/altair-electron/src/app/actions.ts
@@ -40,6 +40,10 @@ export class ActionManager {
     this.windowInstance.webContents.send('show-docs', true);
   }
 
+  hideDocs() {
+    this.windowInstance.webContents.send('show-docs', false);
+  }
+
   showSettings() {
     this.windowInstance.webContents.send('show-settings', true);
   }
diff --git a/packages/altair-electron/src/app/touchbar.ts b/packages/altair-electron/src/app/touchbar.ts
index 864c75bb03..6933ea755f 100644
--- a/packages/altair-electron/src/app/touchbar.ts
+++ b/packages/altair-electron/src/app/touchbar.ts
@@ -1,10 +1,10 @@
-import { TouchBar } from 'electron';
+import { BrowserWindow, TouchBar } from 'electron';
 import { ActionManager } from './actions';
 
 const { TouchBarButton, TouchBarSpacer } = TouchBar;
 
 export class TouchbarManager {
-  constructor(private actionManager: ActionManager) {}
+  constructor(private actionManager: ActionManager, private windowInstance: BrowserWindow) {}
 
   createTouchBar() {
     const sendRequestButton = new TouchBarButton({
@@ -20,9 +20,16 @@ export class TouchbarManager {
 
     const showDocsButton = new TouchBarButton({
       label: 'Show Docs',
+      enabled: !this.windowInstance.webContents.showDocs,
       click: () => this.actionManager.showDocs(),
     });
 
+    const hideDocsButton = new TouchBarButton({
+      label: 'Hide Docs',
+      enabled: this.windowInstance.webContents.showDocs,
+      click: () => this.actionManager.hideDocs(),
+    });
+
     const spacer = new TouchBarSpacer({
       size: 'flexible',
     });
@@ -34,6 +41,7 @@ export class TouchbarManager {
         spacer,
         reloadDocsButton,
         showDocsButton,
+        hideDocsButton,
       ],
     });