diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx
index a0b23c0aa..9afe73023 100644
--- a/src/core/client/ui/components/Tabs/Tab.tsx
+++ b/src/core/client/ui/components/Tabs/Tab.tsx
@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React from "react";
+import React, { ReactNode } from "react";
 import { withStyles } from "talk-ui/hocs";
 import * as styles from "./Tab.css";
 
@@ -19,11 +19,11 @@ export interface TabProps {
   /**
    * Active status
    */
-  active: boolean;
+  active?: boolean;
   /**
    * Color style variant
    */
-  color: "primary" | "secondary";
+  color?: "primary" | "secondary";
   /**
    * Action taken on tab click
    */
diff --git a/src/core/client/ui/components/Tabs/TabBar.spec.tsx b/src/core/client/ui/components/Tabs/TabBar.spec.tsx
new file mode 100644
index 000000000..ef12f60d3
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/TabBar.spec.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import Tab from "./Tab";
+import TabBar from "./TabBar";
+
+it("renders correctly", () => {
+  const renderer = TestRenderer.create(
+    <TabBar activeTab="one">
+      <Tab tabId="one">One</Tab>
+      <Tab tabId="two">Two</Tab>
+      <Tab tabId="three">Three</Tab>
+    </TabBar>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/Tabs/TabBar.tsx b/src/core/client/ui/components/Tabs/TabBar.tsx
index f614cce4f..88c77b95b 100644
--- a/src/core/client/ui/components/Tabs/TabBar.tsx
+++ b/src/core/client/ui/components/Tabs/TabBar.tsx
@@ -15,7 +15,7 @@ export interface TabBarProps {
   /**
    * Color style variant
    */
-  color: "primary" | "secondary";
+  color?: "primary" | "secondary";
   /**
    * Active tab id/name
    */