diff --git a/core/api.txt b/core/api.txt
index 2c9d5da752..b859faee3a 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1040,7 +1040,7 @@ ion-tab-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-star
 ion-tab-button,prop,mode,"ios" | "md",undefined,false
 ion-tab-button,prop,tab,string,undefined,false
 ion-tab-button,css-prop,--background
-ion-tab-button,css-prop,--background-selected
+ion-tab-button,css-prop,--background-focused
 ion-tab-button,css-prop,--color
 ion-tab-button,css-prop,--color-selected
 ion-tab-button,css-prop,--padding-bottom
diff --git a/core/src/components/tab-bar/tab-bar.ios.scss b/core/src/components/tab-bar/tab-bar.ios.scss
index 227667e8c4..884d793699 100644
--- a/core/src/components/tab-bar/tab-bar.ios.scss
+++ b/core/src/components/tab-bar/tab-bar.ios.scss
@@ -1,5 +1,6 @@
 @import "./tab-bar";
 @import "../../themes/ionic.globals.ios";
+@import "../tab-button/tab-button.ios.vars";
 
 // iOS Tabs
 // --------------------------------------------------
@@ -7,7 +8,10 @@
 :host {
   // default color / background
   --background: #{$tabbar-ios-background};
+  --background-focused: #{$tabbar-ios-background-focused};
   --border: #{$hairlines-width solid $tabbar-ios-border-color};
+  --color: #{$tab-button-ios-text-color};
+  --color-selected: #{$tabbar-ios-color-activated};
 
   height: 50px;
 }
@@ -15,7 +19,7 @@
 // iOS Translucent Tab bar
 // --------------------------------------------------
 
-:host(.tabbar-translucent) {
+:host(.tab-bar-translucent) {
   background-color: #{current-color(base, .8)};
   backdrop-filter: saturate(210%) blur(20px);
 }
diff --git a/core/src/components/tab-bar/tab-bar.md.scss b/core/src/components/tab-bar/tab-bar.md.scss
index 95833e78f8..2366f9380d 100644
--- a/core/src/components/tab-bar/tab-bar.md.scss
+++ b/core/src/components/tab-bar/tab-bar.md.scss
@@ -1,10 +1,14 @@
 @import "./tab-bar";
 @import "../../themes/ionic.globals.md";
+@import "../tab-button/tab-button.md.vars";
 
 :host {
   // default color / background
   --background: #{$tabbar-md-background};
+  --background-focused: #{$tabbar-md-background-focused};
   --border: #{1px solid $tabbar-md-border-color};
+  --color: #{$tab-button-md-text-color};
+  --color-selected: #{$tabbar-md-color-activated};
 
   height: 56px;
 }
diff --git a/core/src/components/tab-bar/tab-bar.scss b/core/src/components/tab-bar/tab-bar.scss
index 4131147271..ed8ef76d45 100644
--- a/core/src/components/tab-bar/tab-bar.scss
+++ b/core/src/components/tab-bar/tab-bar.scss
@@ -33,15 +33,18 @@
   box-sizing: content-box !important;
 }
 
-:host(.ion-color) {
+:host(.ion-color),
+:host(.ion-color) ::slotted(ion-tab-button) {
   background: #{current-color(base)};
+  color: #{current-color(contrast, .7)};
 }
 
 :host(.ion-color) ::slotted(ion-tab-button) {
   --background-focused: #{current-color(shade)};
-  --color-selected: #{current-color(contrast)};;
+}
 
-  color: #{current-color(contrast, .7)};
+:host(.ion-color) ::slotted(.tab-selected) {
+  color: #{current-color(contrast)};;
 }
 
 :host([slot="top"]) {
@@ -51,7 +54,7 @@
   border-bottom: var(--border);
 }
 
-:host(.tabbar-hidden) {
+:host(.tab-bar-hidden) {
   /* stylelint-disable-next-line declaration-no-important */
   display: none !important;
 }
diff --git a/core/src/components/tab-bar/tab-bar.tsx b/core/src/components/tab-bar/tab-bar.tsx
index 07afcfed45..6924f263e5 100644
--- a/core/src/components/tab-bar/tab-bar.tsx
+++ b/core/src/components/tab-bar/tab-bar.tsx
@@ -74,8 +74,8 @@ export class TabBar implements ComponentInterface {
       'aria-hidden': keyboardVisible ? 'true' : null,
       class: {
         ...createColorClasses(color),
-        'tabbar-translucent': translucent,
-        'tabbar-hidden': keyboardVisible,
+        'tab-bar-translucent': translucent,
+        'tab-bar-hidden': keyboardVisible,
       }
     };
   }
diff --git a/core/src/components/tab-bar/test/custom/e2e.ts b/core/src/components/tab-bar/test/custom/e2e.ts
new file mode 100644
index 0000000000..6ca6a6f4aa
--- /dev/null
+++ b/core/src/components/tab-bar/test/custom/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('tab-bar: custom', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/tab-bar/test/custom?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/tab-bar/test/custom/index.html b/core/src/components/tab-bar/test/custom/index.html
new file mode 100644
index 0000000000..7539ec12a4
--- /dev/null
+++ b/core/src/components/tab-bar/test/custom/index.html
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Tab Bar - Custom</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="../../../../../dist/ionic.js"></script>
+  <link rel="stylesheet" href="../../../../../css/ionic.bundle.css">
+  <link rel="stylesheet" href="../../../../../scripts/testing/styles.css">
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <!-- Default -->
+      <ion-tab-bar selected-tab="1">
+        <ion-tab-button tab="1">
+          <ion-icon name="clock"></ion-icon>
+          <ion-label>Recents</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="2">
+          <ion-icon name="star"></ion-icon>
+          <ion-label>Favorites</ion-label>
+          <ion-badge>6</ion-badge>
+        </ion-tab-button>
+
+        <ion-tab-button tab="3">
+          <ion-icon name="cog"></ion-icon>
+          <ion-label>Settings</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+
+      <!-- Custom Class -->
+      <ion-tab-bar selected-tab="11" class="custom-tab-bar-color">
+        <ion-tab-button tab="11">
+          <ion-icon name="clock"></ion-icon>
+          <ion-label>Recents</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="22">
+          <ion-icon name="star"></ion-icon>
+          <ion-label>Favorites</ion-label>
+          <ion-badge>6</ion-badge>
+        </ion-tab-button>
+
+        <ion-tab-button tab="33">
+          <ion-icon name="cog"></ion-icon>
+          <ion-label>Settings</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+
+      <!-- Color & Custom Class -->
+      <ion-tab-bar selected-tab="111" color="danger" class="custom-tab-bar-color">
+        <ion-tab-button tab="111">
+          <ion-icon name="clock"></ion-icon>
+          <ion-label>Recents</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="222">
+          <ion-icon name="star"></ion-icon>
+          <ion-label>Favorites</ion-label>
+          <ion-badge>6</ion-badge>
+        </ion-tab-button>
+
+        <ion-tab-button tab="333">
+          <ion-icon name="cog"></ion-icon>
+          <ion-label>Settings</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+
+      <!-- Custom Background Buttons -->
+      <ion-tab-bar selected-tab="1111" class="custom-tab-button-bar">
+        <ion-tab-button tab="1111" class="custom-tab-button-background-red">
+          <ion-icon name="clock"></ion-icon>
+          <ion-label>Recents</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="2222" class="custom-tab-button-background-yellow">
+          <ion-icon name="star"></ion-icon>
+          <ion-label>Favorites</ion-label>
+          <ion-badge>6</ion-badge>
+        </ion-tab-button>
+
+        <ion-tab-button tab="3333" class="custom-tab-button-background-green">
+          <ion-icon name="cog"></ion-icon>
+          <ion-label>Settings</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+
+      <!-- Custom Color Buttons -->
+      <ion-tab-bar selected-tab="1111">
+        <ion-tab-button tab="1111" class="custom-tab-button-color-red">
+          <ion-icon name="clock"></ion-icon>
+          <ion-label>Recents</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="2222" class="custom-tab-button-color-yellow">
+          <ion-icon name="star"></ion-icon>
+          <ion-label>Favorites</ion-label>
+          <ion-badge>6</ion-badge>
+        </ion-tab-button>
+
+        <ion-tab-button tab="3333" class="custom-tab-button-color-green">
+          <ion-icon name="cog"></ion-icon>
+          <ion-label>Settings</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+
+      <!-- Custom All -->
+      <ion-tab-bar selected-tab="11111" class="custom-all">
+        <ion-tab-button tab="11111">
+          <ion-icon name="clock"></ion-icon>
+          <ion-label>Recents</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="22222">
+          <ion-icon name="star" class="custom-icon"></ion-icon>
+        </ion-tab-button>
+
+        <ion-tab-button tab="33333">
+          <ion-icon name="cog"></ion-icon>
+          <ion-label>Settings</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+    </ion-content>
+  </ion-app>
+
+  <style>
+    .custom-tab-bar-color {
+      --background: #7044ff;
+      --color: rgb(255, 0, 234, .6);
+      --color-selected: #ff00ea;
+    }
+
+    .custom-tab-bar-color ion-badge {
+      background: rgba(255, 255, 255, 0.8);
+      color: rgba(0, 0, 0, .5);
+    }
+
+    .custom-tab-button-bar {
+      --background: #178fb8;
+      --color: rgba(255, 255, 255, .6);
+      --color-selected: #ffffff;
+    }
+
+    .custom-tab-button-background-red {
+      --background: #a32b2b;
+    }
+
+    .custom-tab-button-background-yellow {
+      --background: #b7b915;
+    }
+
+    .custom-tab-button-background-green {
+      --background: #5a9b2e;
+    }
+
+    .custom-tab-button-color-red {
+      --color: rgba(163, 43, 43, .6);
+      --color-selected: #a32b2b;
+    }
+
+    .custom-tab-button-color-yellow {
+      --color: rgba(183, 185, 21, .6);
+      --color-selected: #b7b915;
+    }
+
+    .custom-tab-button-color-green {
+      --color: rgb(90, 155, 46, .6);
+      --color-selected: #5a9b2e;
+    }
+
+    .custom-all {
+      margin-top: 30px;
+      margin-bottom: 30px;
+      contain: none;
+
+      --background: #f6f6f6;
+      --color-selected: #1b8472;
+
+      --border: none;
+    }
+
+    .custom-all ion-tab-button:nth-child(2) {
+      --background: #1b8472;
+      --color: rgba(255, 255, 255, .6);
+      --color-selected: #ffffff;
+
+      border-radius: 50%;
+      max-width: 80px;
+      height: 80px;
+    }
+
+    .custom-icon {
+      font-size: 50px;
+    }
+  </style>
+</body>
+
+</html>
diff --git a/core/src/components/tab-bar/test/scenarios/index.html b/core/src/components/tab-bar/test/scenarios/index.html
index 813a547b31..10e2915b9b 100644
--- a/core/src/components/tab-bar/test/scenarios/index.html
+++ b/core/src/components/tab-bar/test/scenarios/index.html
@@ -193,7 +193,7 @@
     </ion-tab-button>
 
     <ion-tab-button tab="2" class="main-tab">
-      <ion-icon src="/src/components/tab-bar/test/scenarios/camera.svg"></ion-icon>
+      <ion-icon class="main-tab-icon" src="/src/components/tab-bar/test/scenarios/camera.svg"></ion-icon>
     </ion-tab-button>
 
     <ion-tab-button tab="3">
@@ -235,7 +235,10 @@
       height: 80px;
       background: #3880ff;
       color: white;
-      font-size: 16px;
+    }
+
+    .main-tab-icon {
+      font-size: 36px;
     }
 
     .custom-tabbar-color {
diff --git a/core/src/components/tab-button/readme.md b/core/src/components/tab-button/readme.md
index 9a3a9a6995..c9988bf7dc 100644
--- a/core/src/components/tab-button/readme.md
+++ b/core/src/components/tab-button/readme.md
@@ -71,17 +71,17 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
 
 ## CSS Custom Properties
 
-| Name                    | Description                           |
-| ----------------------- | ------------------------------------- |
-| `--background`          | Background of the tab button          |
-| `--background-selected` | Background of the selected tab button |
-| `--color`               | Color of the tab button               |
-| `--color-selected`      | Color of the selected tab button      |
-| `--padding-bottom`      | Bottom padding of the tab button      |
-| `--padding-end`         | End padding of the tab button         |
-| `--padding-start`       | Start padding of the tab button       |
-| `--padding-top`         | Top padding of the tab button         |
-| `--ripple-color`        | Color of the button ripple effect     |
+| Name                   | Description                          |
+| ---------------------- | ------------------------------------ |
+| `--background`         | Background of the tab button         |
+| `--background-focused` | Background of the focused tab button |
+| `--color`              | Color of the tab button              |
+| `--color-selected`     | Color of the selected tab button     |
+| `--padding-bottom`     | Bottom padding of the tab button     |
+| `--padding-end`        | End padding of the tab button        |
+| `--padding-start`      | Start padding of the tab button      |
+| `--padding-top`        | Top padding of the tab button        |
+| `--ripple-color`       | Color of the button ripple effect    |
 
 
 ----------------------------------------------
diff --git a/core/src/components/tab-button/tab-button.ios.scss b/core/src/components/tab-button/tab-button.ios.scss
index b617df9ae0..851c1d976f 100644
--- a/core/src/components/tab-button/tab-button.ios.scss
+++ b/core/src/components/tab-button/tab-button.ios.scss
@@ -6,10 +6,6 @@
   --padding-end: #{$tab-button-ios-padding-end};
   --padding-bottom: #{$tab-button-ios-padding-bottom};
   --padding-start: #{$tab-button-ios-padding-start};
-  --color: #{$tab-button-ios-text-color};
-  --color-selected: #{$tabbar-ios-color-activated};
-  --background: transparent;
-  --background-focused: #{$tabbar-ios-background-focused};
 
   max-width: $tab-button-ios-max-width;
 
diff --git a/core/src/components/tab-button/tab-button.md.scss b/core/src/components/tab-button/tab-button.md.scss
index dfc6175581..e420321b4b 100644
--- a/core/src/components/tab-button/tab-button.md.scss
+++ b/core/src/components/tab-button/tab-button.md.scss
@@ -9,10 +9,6 @@
   --padding-end: #{$tab-button-md-padding-end};
   --padding-bottom: #{$tab-button-md-padding-bottom};
   --padding-start: #{$tab-button-md-padding-start};
-  --color: #{$tab-button-md-text-color};
-  --color-selected: #{$tabbar-md-color-activated};
-  --background: transparent;
-  --background-focused: #{$tabbar-md-background-focused};
 
   max-width: 168px;
 
diff --git a/core/src/components/tab-button/tab-button.scss b/core/src/components/tab-button/tab-button.scss
index 8ba3246a13..19eab948a5 100644
--- a/core/src/components/tab-button/tab-button.scss
+++ b/core/src/components/tab-button/tab-button.scss
@@ -3,13 +3,16 @@
 :host {
   /**
    * @prop --background: Background of the tab button
-   * @prop --background-selected: Background of the selected tab button
+   * @prop --background-focused: Background of the focused tab button
+   *
    * @prop --color: Color of the tab button
    * @prop --color-selected: Color of the selected tab button
+   *
    * @prop --padding-top: Top padding of the tab button
    * @prop --padding-end: End padding of the tab button
    * @prop --padding-bottom: Bottom padding of the tab button
    * @prop --padding-start: Start padding of the tab button
+   *
    * @prop --ripple-color: Color of the button ripple effect
    */
   --ripple-color: var(--color-selected);
@@ -22,6 +25,7 @@
 
   height: 100%;
 
+  background: var(--background);
   color: var(--color);
 }
 
@@ -47,7 +51,7 @@ a {
 
   outline: none;
 
-  background: var(--background);
+  background: transparent;
 
   text-decoration: none;