diff --git a/utils/styleguide/CodeTabButton/index.js b/utils/styleguide/CodeTabButton/index.js
new file mode 100644
index 00000000000..faaef4f3c78
--- /dev/null
+++ b/utils/styleguide/CodeTabButton/index.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import TabButton from 'rsg-components/TabButton';
+
+const CodeTabButton = props => <TabButton {...props}>Edit Code</TabButton>;
+
+export default CodeTabButton;
diff --git a/utils/styleguide/styleguide.base.config.js b/utils/styleguide/styleguide.base.config.js
index 06c167728bf..19bdc656c24 100644
--- a/utils/styleguide/styleguide.base.config.js
+++ b/utils/styleguide/styleguide.base.config.js
@@ -125,7 +125,8 @@ const defaultStyleguideConfig = {
     TableOfContentsRenderer: path.resolve(__dirname, 'TableOfContentsRenderer'),
     LogoRenderer: path.resolve(__dirname, 'LogoRenderer'),
     TableRenderer: path.resolve(__dirname, 'TableRenderer'),
-    ArgumentsRenderer: path.resolve(__dirname, 'ArgumentsRenderer')
+    ArgumentsRenderer: path.resolve(__dirname, 'ArgumentsRenderer'),
+    'slots/CodeTabButton': path.resolve(__dirname, 'CodeTabButton')
   },
   webpackConfig: {
     devtool: 'eval-source-map',