diff --git a/core/src/components/tab-bar/readme.md b/core/src/components/tab-bar/readme.md
index eab6ad1e32..895090bf8b 100644
--- a/core/src/components/tab-bar/readme.md
+++ b/core/src/components/tab-bar/readme.md
@@ -36,6 +36,15 @@ In order to have a custom tab bar, it should be provided in user's markup as dir
 | `translucent` | `translucent`  | If `true`, the tab bar will be translucent.                                                                                                                                                                                                                            | `boolean`                                                                                  | `false`      |
 
 
+## CSS Custom Properties
+
+| Name           | Description               |
+| -------------- | ------------------------- |
+| `--background` | Background of the tab bar |
+| `--border`     | Border of the tab bar     |
+| `--color`      | Color of the tab bar      |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/core/src/components/tab-bar/tab-bar.scss b/core/src/components/tab-bar/tab-bar.scss
index 9be468c0f4..2d8551e48d 100644
--- a/core/src/components/tab-bar/tab-bar.scss
+++ b/core/src/components/tab-bar/tab-bar.scss
@@ -1,6 +1,12 @@
 @import "../../themes/ionic.globals";
 
 :host {
+  /**
+   * @prop --background: Background of the tab bar
+   * @prop --border: Border of the tab bar
+   * @prop --color: Color of the tab bar
+   */
+
   @include padding-horizontal(
     var(--ion-safe-area-left),
     var(--ion-safe-area-right)
diff --git a/core/src/components/tab-button/readme.md b/core/src/components/tab-button/readme.md
index d4eb87a562..8fb9ad3261 100644
--- a/core/src/components/tab-button/readme.md
+++ b/core/src/components/tab-button/readme.md
@@ -20,6 +20,20 @@ See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs.
 | `tab`      | `tab`      | A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.                                                                                                                              | `string`                                                                                                | `undefined` |
 
 
+## 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         |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/core/src/components/tab-button/tab-button.scss b/core/src/components/tab-button/tab-button.scss
index 5fce5acd79..aa9cccb50a 100644
--- a/core/src/components/tab-button/tab-button.scss
+++ b/core/src/components/tab-button/tab-button.scss
@@ -1,6 +1,16 @@
 @import "../../themes/ionic.globals";
 
 :host {
+  /**
+   * @prop --background: Background of the tab button
+   * @prop --background-selected: Background of the selected 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
+   */
   --badge-end: 4%;
 
   flex: 1;