diff --git a/packages/components/src/tab-panel/README.md b/packages/components/src/tab-panel/README.md
index 89c6b09572250..def626516b3a3 100644
--- a/packages/components/src/tab-panel/README.md
+++ b/packages/components/src/tab-panel/README.md
@@ -114,15 +114,15 @@ The function called when a tab has been selected. It is passed the `tabName` as
 
 #### tabs
 
-A list of tabs where each tab is defined by an object with the following fields:
+An array of objects containing the following properties:
 
-1. name: String. Defines the key for the tab
-2. title: String. Defines the translated text for the tab
-3. className: String. Defines the class to put on the tab.
+- `name`: `(string)` Defines the key for the tab.
+- `title`:`(string)` Defines the translated text for the tab.
+- `className`:`(string)` Optional. Defines the class to put on the tab.
 
-Other fields may be added to the object and accessed from the child function if desired.
+>> **Note:** Other fields may be added to the object and accessed from the child function if desired.
 
-- Type: Array
+- Type: `Array`
 - Required: Yes
 
 #### activeClass
diff --git a/packages/components/src/tab-panel/index.js b/packages/components/src/tab-panel/index.js
index 5558272f2ffc4..71f4683bcbef8 100644
--- a/packages/components/src/tab-panel/index.js
+++ b/packages/components/src/tab-panel/index.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { partial, noop, find } from 'lodash';
 
 /**
@@ -74,7 +75,7 @@ class TabPanel extends Component {
 					className="components-tab-panel__tabs"
 				>
 					{ tabs.map( ( tab ) => (
-						<TabButton className={ `${ tab.className } ${ tab.name === selected ? activeClass : '' }` }
+						<TabButton className={ classnames( tab.className, { [ activeClass ]: tab.name === selected } ) }
 							tabId={ instanceId + '-' + tab.name }
 							aria-controls={ instanceId + '-' + tab.name + '-view' }
 							selected={ tab.name === selected }