From 94159291b27ddf1a859c8f3f87a0d6e54a8b5f13 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Thu, 23 Jan 2020 16:57:47 -0500
Subject: [PATCH] feat(components): improve button states and add new css
 properties (#19440)

Before users had to know the exact opacity that the MD/iOS spec called for in order to change the hover or focused background color. This allows them to change the background without having to know the opacity.

- changes apply to Action Sheet (Buttons), Back Button, Button, FAB Button, Item, Menu Button, Segment Button, Tab Button
- greatly reduces the requirement by users to set the background hover, focused states for dark modes and custom themes, also eliminates the need to know what the hover opacity is for each based on the spec
- updates the MD dark theme per their spec
- adds a component guide for internal use changing Ionic components

references #18279 fixes #20213 fixes #19965

BREAKING CHANGE:

*Activated Class*

The `activated` class that is automatically added to buttons on press has been renamed to `ion-activated`. This will be more consistent with our `ion-focused` class we add and also will reduce conflicts with user's CSS.

*CSS Variables*

The `--background-hover`, `--background-focused` and `--background-activated` CSS variables on components that render native buttons will now have an opacity automatically set. If you are setting any of these like the following:

```
--background-hover: rgba(44, 44, 44, 0.08);
```

You will likely not see a hover state anymore. It should be updated to only set the desired color:

```
--background-hover: rgba(44, 44, 44);
```

If the opacity desired is something other than what the spec asks for, use:

```
--background-hover: rgba(44, 44, 44);
--background-hover-opacity: 1;
```
---
 .github/COMPONENT-GUIDE.md                    | 443 ++++++++++++++++++
 BREAKING.md                                   | 234 ++++++++-
 core/api.txt                                  |  37 +-
 .../action-sheet/action-sheet.ios.scss        |  58 ++-
 .../action-sheet/action-sheet.ios.vars.scss   |   2 +-
 .../action-sheet/action-sheet.md.scss         |  18 +-
 .../action-sheet/action-sheet.md.vars.scss    |   7 -
 .../components/action-sheet/action-sheet.scss | 100 +++-
 .../components/action-sheet/action-sheet.tsx  |   4 +-
 core/src/components/action-sheet/readme.md    |  38 +-
 .../action-sheet/test/basic/index.html        |  14 +-
 .../action-sheet/test/translucent/index.html  |   4 +-
 core/src/components/alert/alert.ios.scss      |   2 +-
 .../back-button/back-button.ios.scss          |  14 +-
 .../back-button/back-button.md.scss           |  14 +-
 .../components/back-button/back-button.scss   |  70 ++-
 .../components/back-button/back-button.tsx    |   3 +-
 core/src/components/back-button/readme.md     |  66 +--
 .../back-button/test/basic/index.html         |  65 ++-
 .../back-button/test/standalone/index.html    |  30 +-
 core/src/components/button/button.ios.scss    |  96 ++--
 core/src/components/button/button.md.scss     |  58 ++-
 core/src/components/button/button.scss        | 129 ++---
 core/src/components/button/button.tsx         |   6 +-
 core/src/components/button/readme.md          |  47 +-
 .../components/button/test/anchor/index.html  |  20 +-
 .../components/button/test/basic/index.html   |  20 +-
 .../components/button/test/clear/index.html   |  40 +-
 .../components/button/test/outline/index.html |  40 +-
 .../button/test/standalone/index.html         |  10 +-
 core/src/components/button/test/states/e2e.ts |  10 +
 .../components/button/test/states/index.html  | 115 +++++
 .../components/button/test/toolbar/index.html |  18 +-
 core/src/components/buttons/buttons.ios.scss  |  30 +-
 core/src/components/buttons/buttons.md.scss   |  23 +-
 core/src/components/card/card.ios.scss        |   2 +-
 core/src/components/card/readme.md            |  24 +-
 .../src/components/card/test/basic/index.html |   8 +-
 .../card/test/translucent/index.html          |   2 +-
 core/src/components/card/usage/angular.md     |   8 +-
 core/src/components/card/usage/javascript.md  |   8 +-
 core/src/components/card/usage/react.md       |   8 +-
 core/src/components/card/usage/vue.md         |   8 +-
 core/src/components/chip/chip.scss            |   6 +-
 .../src/components/chip/test/basic/index.html | 146 +++---
 core/src/components/chip/test/states/e2e.ts   |  10 +
 .../components/chip/test/states/index.html    | 285 +++++++++++
 .../components/fab-button/fab-button.ios.scss |  38 +-
 .../components/fab-button/fab-button.md.scss  |  44 +-
 .../fab-button/fab-button.md.vars.scss        |   2 +-
 .../src/components/fab-button/fab-button.scss |  74 +--
 core/src/components/fab-button/readme.md      |  45 +-
 .../fab-button/test/standalone/index.html     |  34 +-
 core/src/components/fab/test/states/e2e.ts    |  10 +
 .../src/components/fab/test/states/index.html | 201 ++++++++
 .../item-option/item-option.ios.scss          |   4 +-
 .../item-sliding/test/basic/index.html        |   2 +-
 core/src/components/item/item.ios.scss        |  34 +-
 core/src/components/item/item.md.scss         |  30 +-
 core/src/components/item/item.scss            |  69 ++-
 core/src/components/item/readme.md            |  73 +--
 .../components/item/test/buttons/index.html   |  14 +-
 .../components/item/test/colors/index.html    |   4 +-
 .../item/test/standalone/index.html           |   2 +-
 core/src/components/item/test/states/e2e.ts   |  10 +
 .../components/item/test/states/index.html    | 103 ++++
 .../menu-button/menu-button.ios.scss          |  22 +-
 .../menu-button/menu-button.md.scss           |  28 +-
 .../components/menu-button/menu-button.scss   |  62 ++-
 .../components/menu-button/menu-button.tsx    |  14 +-
 core/src/components/menu-button/readme.md     |  28 +-
 .../menu-button/test/basic/index.html         |  17 +-
 core/src/components/picker/picker.ios.scss    |   2 +-
 core/src/components/picker/picker.md.scss     |   2 +-
 core/src/components/radio/radio.ios.scss      |   1 +
 .../components/searchbar/searchbar.md.scss    |   6 +-
 core/src/components/segment-button/readme.md  |  58 +--
 .../segment-button/segment-button.ios.scss    |  90 +++-
 .../segment-button.ios.vars.scss              |  12 +-
 .../segment-button/segment-button.md.scss     |  84 +++-
 .../segment-button.md.vars.scss               |   9 +-
 .../segment-button/segment-button.scss        |  62 ++-
 .../segment-button/segment-button.tsx         |   7 +-
 core/src/components/segment/segment.ios.scss  |  27 --
 core/src/components/segment/segment.md.scss   |  67 ---
 .../components/segment/segment.md.vars.scss   |   3 -
 core/src/components/segment/segment.scss      |  25 -
 core/src/components/segment/segment.tsx       |  15 +-
 .../components/segment/test/basic/index.html  |   4 +-
 .../src/components/segment/test/colors/e2e.ts |   8 +-
 .../components/segment/test/colors/index.html | 267 ++++++-----
 .../segment/test/toolbar/index.html           |   2 +-
 core/src/components/tab-bar/tab-bar.ios.scss  |   2 +-
 core/src/components/tab-bar/tab-bar.md.scss   |   2 +-
 .../components/tab-bar/test/basic/index.html  | 288 ++++++------
 .../tab-bar/test/scenarios/index.html         | 333 ++++++-------
 core/src/components/tab-button/readme.md      |  24 +-
 .../tab-button/tab-button.ios.vars.scss       |   4 +-
 .../tab-button/tab-button.md.vars.scss        |   4 +-
 .../src/components/tab-button/tab-button.scss |  41 +-
 core/src/components/tab-button/tab-button.tsx |   6 +-
 core/src/components/toast/toast.ios.scss      |   2 +-
 .../components/toolbar/test/colors/index.html |  64 +++
 .../toolbar/test/scenarios/index.html         |  18 +-
 .../components/toolbar/toolbar.md.vars.scss   |   3 -
 core/src/themes/ionic.mixins.scss             |  10 +
 core/src/themes/ionic.theme.default.ios.scss  |   6 +-
 core/src/themes/ionic.theme.default.md.scss   |   6 +-
 .../themes/test/css-variables/css/dark.css    |   1 +
 .../themes/test/css-variables/css/oceanic.css |   3 +-
 .../themes/test/css-variables/css/toolbar.css |  26 +
 .../themes/test/css-variables/css/vibrant.css |  16 -
 core/src/themes/test/css-variables/index.html | 152 +++---
 core/src/utils/tap-click.ts                   |   2 +-
 114 files changed, 3641 insertions(+), 1487 deletions(-)
 create mode 100644 .github/COMPONENT-GUIDE.md
 create mode 100644 core/src/components/button/test/states/e2e.ts
 create mode 100644 core/src/components/button/test/states/index.html
 create mode 100644 core/src/components/chip/test/states/e2e.ts
 create mode 100644 core/src/components/chip/test/states/index.html
 create mode 100644 core/src/components/fab/test/states/e2e.ts
 create mode 100644 core/src/components/fab/test/states/index.html
 create mode 100644 core/src/components/item/test/states/e2e.ts
 create mode 100644 core/src/components/item/test/states/index.html
 create mode 100644 core/src/themes/test/css-variables/css/toolbar.css

diff --git a/.github/COMPONENT-GUIDE.md b/.github/COMPONENT-GUIDE.md
new file mode 100644
index 0000000000..7446518da8
--- /dev/null
+++ b/.github/COMPONENT-GUIDE.md
@@ -0,0 +1,443 @@
+# Ionic Component Implementation Guide
+
+- [Button States](#button-states)
+  * [Component Structure](#component-structure)
+  * [Activated](#activated)
+  * [Disabled](#disabled)
+  * [Focused](#focused)
+  * [Hover](#hover)
+  * [Ripple Effect](#ripple-effect)
+  * [Example Components](#example-components)
+  * [References](#references)
+- [Rendering Anchor or Button](#rendering-anchor-or-button)
+  * [Example Components](#example-components-1)
+  * [Component Structure](#component-structure-1)
+- [Converting Scoped to Shadow](#converting-scoped-to-shadow)
+
+## Button States
+
+Any component that renders a button should have the following states: [`activated`](#activated), [`disabled`](#disabled), [`focused`](#focused), [`hover`](#hover). It should also have a [Ripple Effect](#ripple-effect) component added for Material Design.
+
+### Component Structure
+
+#### JavaScript
+
+A component that renders a native button should use the following structure:
+
+```jsx
+<Host>
+  <button class="button-native">
+    <span class="button-inner">
+      <slot></slot>
+    </span>
+  </button>
+</Host>
+```
+
+Any other attributes and classes that are included are irrelevant to the button states, but it's important that this structure is followed and the classes above exist. In some cases they may be named something else that makes more sense, such as in item.
+
+
+#### CSS
+
+A mixin called `button-state()` has been added to make it easier to setup the states in each component.
+
+```scss
+@mixin button-state() {
+  @include position(0, 0, 0, 0);
+
+  position: absolute;
+
+  content: "";
+
+  opacity: 0;
+}
+```
+
+The following styles should be set for the CSS to work properly. Note that the `button-state()` mixin is included in the `::after` pseudo element of the native button.
+
+```scss
+.button-native {
+  /**
+   * All other CSS in this selector is irrelevant to button states
+   * but the following are required styles
+   */
+
+  position: relative;
+
+  overflow: hidden;
+}
+
+.button-native::after {
+  @include button-state();
+}
+
+.button-inner {
+  /**
+   * All other CSS in this selector is irrelevant to button states
+   * but the following are required styles
+   */
+
+  position: relative;
+
+  z-index: 1;
+}
+```
+
+
+### Activated
+
+The activated state should be enabled for elements with actions on "press". It usually changes the opacity or background of an element.
+
+> Make sure the component has the correct [component structure](#component-structure) before continuing.
+
+#### JavaScript
+
+The `ion-activatable` class needs to be set on an element that can be activated:
+
+```jsx
+render() {
+  return (
+    <Host class='ion-activatable'>
+      <slot></slot>
+    </Host>
+  );
+}
+```
+
+Once that is done, the element will get the `ion-activated` class added on press.
+
+In addition to setting that class, `ion-activatable-instant` can be set in order to have an instant press with no delay:
+
+```jsx
+<Host class='ion-activatable ion-activatable-instant'>
+```
+
+#### CSS
+
+```css
+ /**
+   * @prop --color-activated: Color of the button when pressed
+   * @prop --background-activated: Background of the button when pressed
+   * @prop --background-activated-opacity: Opacity of the background when pressed
+   */
+```
+
+Style the `ion-activated` class based on the spec for that element:
+
+```scss
+:host(.ion-activated) .button-native {
+  color: var(--color-activated);
+
+  &::after {
+    background: var(--background-activated);
+
+    opacity: var(--background-activated-opacity);
+  }
+}
+```
+
+> Order is important! Activated should be before the focused & hover states.
+
+
+#### User Customization
+
+Setting the activated state on the `::after` pseudo-element allows the user to customize the activated state without knowing what the default opacity is set at. A user can customize in the following ways to have a solid red background on press, or they can leave out `--background-activated-opacity` and the button will use the default activated opacity to match the spec.
+
+```css
+ion-button {
+  --background-activated: red;
+  --background-activated-opacity: 1;
+}
+```
+
+
+### Disabled
+
+The disabled state should be set via prop on all components that render a native button. Setting a disabled state will change the opacity or color of the button and remove click events from firing.
+
+#### JavaScript
+
+The `disabled` property should be set on the component:
+
+```jsx
+/**
+  * If `true`, the user cannot interact with the button.
+  */
+@Prop({ reflectToAttr: true }) disabled = false;
+```
+
+Then, the render function should add the [`aria-disabled`](https://www.w3.org/WAI/PF/aria/states_and_properties#aria-disabled) role to the host, a class that is the element tag name followed by `disabled`, and pass the `disabled` attribute to the native button:
+
+```jsx
+render() {
+  const { disabled } = this;
+
+  return (
+    <Host
+      aria-disabled={disabled ? 'true' : null}
+      class={{
+        'button-disabled': disabled
+      }}
+    >
+      <button disabled={disabled}>
+        <slot></slot>
+      </button>
+    </Host>
+  );
+}
+```
+
+> Note: if the class being added was for `ion-back-button` it would be `back-button-disabled`.
+
+#### CSS
+
+The following CSS _at the bare minimum_ should be added for the disabled class, but it should be styled to match the spec:
+
+```css
+:host(.button-disabled) {
+  cursor: default;
+  opacity: .5;
+  pointer-events: none;
+}
+```
+
+#### User Customization
+
+TODO
+
+### Focused
+
+The focused state should be enabled for elements with actions when tabbed to via the keyboard. This will only work inside of an `ion-app`. It usually changes the opacity or background of an element.
+
+> Make sure the component has the correct [component structure](#component-structure) before continuing.
+
+#### JavaScript
+
+The `ion-focusable` class needs to be set on an element that can be focused:
+
+```jsx
+render() {
+  return (
+    <Host class='ion-focusable'>
+      <slot></slot>
+    </Host>
+  );
+}
+```
+
+Once that is done, the element will get the `ion-focused` class added when the element is tabbed to.
+
+#### CSS
+
+Components should be written to include the following focused variables for styling:
+
+```css
+ /**
+   * @prop --color-focused: Color of the button when tabbed to with the keyboard
+   * @prop --background-focused: Background of the button when tabbed to with the keyboard
+   * @prop --background-focused-opacity: Opacity of the background when tabbed to with the keyboard
+   */
+```
+
+Style the `ion-focused` class based on the spec for that element:
+
+```scss
+:host(.ion-focused) .button-native {
+  color: var(--color-focused);
+
+  &::after {
+    background: var(--background-focused);
+
+    opacity: var(--background-focused-opacity);
+  }
+}
+```
+
+> Order is important! Focused should be after the activated and before the hover state.
+
+
+#### User Customization
+
+Setting the focused state on the `::after` pseudo-element allows the user to customize the focused state without knowing what the default opacity is set at. A user can customize in the following ways to have a solid red background on focus, or they can leave out `--background-focused-opacity` and the button will use the default focus opacity to match the spec.
+
+```css
+ion-button {
+  --background-focused: red;
+  --background-focused-opacity: 1;
+}
+```
+
+
+### Hover
+
+The [hover state](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) happens when a user moves their cursor on top of an element without pressing on it. It should not happen on mobile, only on desktop devices that support hover.
+
+> Make sure the component has the correct [component structure](#component-structure) before continuing.
+
+#### CSS
+
+Components should be written to include the following hover variables for styling:
+
+```css
+ /**
+   * @prop --color-hover: Color of the button on hover
+   * @prop --background-hover: Background of the button on hover
+   * @prop --background-hover-opacity: Opacity of the background on hover
+   */
+```
+
+Style the `:hover` based on the spec for that element:
+
+```scss
+@media (any-hover: hover) {
+  :host(:hover) .button-native {
+    color: var(--color-hover);
+
+    &::after {
+      background: var(--background-hover);
+
+      opacity: var(--background-hover-opacity);
+    }
+  }
+}
+```
+
+> Order is important! Hover should be after the activated and focused states.
+
+
+#### User Customization
+
+Setting the hover state on the `::after` pseudo-element allows the user to customize the hover state without knowing what the default opacity is set at. A user can customize in the following ways to have a solid red background on hover, or they can leave out `--background-hover-opacity` and the button will use the default hover opacity to match the spec.
+
+```css
+ion-button {
+  --background-hover: red;
+  --background-hover-opacity: 1;
+}
+```
+
+
+### Ripple Effect
+
+The ripple effect should be added to elements for Material Design. It *requires* the `ion-activatable` class to be set on the parent element to work, and relative positioning on the parent.
+
+```jsx
+ render() {
+  const mode = getIonMode(this);
+
+return (
+  <Host
+    class={{
+      'ion-activatable': true,
+    }}
+  >
+    <button>
+      <slot></slot>
+      {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+    </button>
+  </Host>
+);
+```
+
+The ripple effect can also accept a different `type`. By default it is `"bounded"` which will expand the ripple effect from the click position outwards. To add a ripple effect that always starts in the center of the element and expands in a circle, set the type to `"unbounded"`. An unbounded ripple will exceed the container, so add `overflow: hidden` to the parent to prevent this.
+
+Make sure to style the ripple effect for that component to accept a color:
+
+```css
+ion-ripple-effect {
+  color: var(--ripple-color);
+}
+```
+
+
+### Example Components
+
+- [ion-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/button)
+- [ion-back-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/back-button)
+- [ion-menu-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/menu-button)
+
+### References
+
+- [Material Design States](https://material.io/design/interaction/states.html)
+- [iOS Buttons](https://developer.apple.com/design/human-interface-guidelines/ios/controls/buttons/)
+
+
+## Rendering Anchor or Button
+
+Certain components can render an `<a>` or a `<button>` depending on the presence of an `href` attribute.
+
+### Example Components
+
+- [ion-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/button)
+- [ion-card](https://github.com/ionic-team/ionic/tree/master/core/src/components/card)
+- [ion-fab-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/fab-button)
+- [ion-item-option](https://github.com/ionic-team/ionic/tree/master/core/src/components/item-option)
+- [ion-item](https://github.com/ionic-team/ionic/tree/master/core/src/components/item)
+
+### Component Structure
+
+#### JavaScript
+
+In order to implement a component with a dynamic tag type, set the property that it uses to switch between them, we use `href`:
+
+```jsx
+/**
+ * Contains a URL or a URL fragment that the hyperlink points to.
+ * If this property is set, an anchor tag will be rendered.
+ */
+@Prop() href: string | undefined;
+```
+
+Then use that in order to render the tag:
+
+```jsx
+render() {
+  const TagType = href === undefined ? 'button' : 'a' as any;
+
+  return (
+    <Host>
+      <TagType>
+        <slot></slot>
+      </TagType>
+    </Host>
+  );
+}
+```
+
+If the component can render an `<a>`, `<button>` or a `<div>` add in more properties such as a `button` attribute in order to check if it should render a button.
+
+## Converting Scoped to Shadow
+
+### CSS
+
+There will be some CSS issues when converting to shadow. Below are some of the differences.
+
+**Targeting host + slotted child**
+
+```css
+/* IN SCOPED */
+:host(.ion-color)::slotted(ion-segment-button)
+
+/* IN SHADOW*/
+:host(.ion-color) ::slotted(ion-segment-button)
+```
+
+**Targeting host-context + host (with a :not)**
+
+```css
+/* IN SCOPED */
+:host-context(ion-toolbar.ion-color):not(.ion-color) {
+
+/* IN SHADOW */
+:host-context(ion-toolbar.ion-color):host(:not(.ion-color))  {
+```
+
+**Targeting host-context + host (with a :not) > slotted child**
+
+```css
+/* IN SCOPED */
+:host-context(ion-toolbar:not(.ion-color)):not(.ion-color)::slotted(ion-segment-button) {
+
+/* IN SHADOW*/
+:host-context(ion-toolbar:not(.ion-color)):host(:not(.ion-color)) ::slotted(ion-segment-button) {
+```
diff --git a/BREAKING.md b/BREAKING.md
index 6592ab43ab..d85d57e4d1 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -14,16 +14,21 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 - [CSS](#css)
   * [CSS Utilities](#css-utilities)
   * [Display Classes](#display-classes)
-  * [Activated, Focused, Hover States](#activated--focused--hover-states)
+  * [Activated, Focused, Hover States](#activated-focused-hover-states)
   * [Distributed Sass](#distributed-sass)
 - [Components](#components)
+  * [Action Sheet](#action-sheet)
   * [Anchor](#anchor)
   * [Back Button](#back-button)
+  * [Button](#button)
   * [Card](#card)
   * [Controllers](#controllers)
+  * [FAB Button](#fab-button)
+  * [Item](#item)
   * [Header / Footer](#header---footer)
   * [List Header](#list-header)
   * [Menu](#menu)
+  * [Menu Button](#menu-button)
   * [Nav Link](#nav-link)
   * [Radio](#radio)
   * [Searchbar](#searchbar)
@@ -33,6 +38,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   * [Skeleton Text](#skeleton-text)
   * [Split Pane](#split-pane)
   * [Toast](#toast)
+  * [Tabs](#tabs)
 - [Colors](#colors)
 - [Events](#events)
 - [Mode](#mode)
@@ -43,7 +49,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 
 #### CSS Utilities
 
-We originally added CSS utility attributes for styling components because it was a quick and easy way to wrap text or add padding to an element. Once we added support for multiple frameworks as part of our "Ionic for everyone" approach, we quickly determined there were problems with using CSS attributes with frameworks that use JSX and Typescript. In order to solve this we added CSS classes. Rather than support CSS attributes in certain frameworks and classes in others, we decided to remove the CSS attributes and support what works in all of them, classes, for consistency. In addition to this, changing to classes prefixed with `ion` avoids conflict with native attributes & user's CSS. In the latest version of Ionic 4, there are deprecation warnings printed in the console to show what the new classes are, and the documentation has been updated since support for classes was added to remove all references to attributes: https://ionicframework.com/docs/layout/css-utilities.
+We originally added CSS utility attributes for styling components because it was a quick and easy way to wrap text or add padding to an element. Once we added support for multiple frameworks as part of our "Ionic for everyone" approach, we quickly determined there were problems with using CSS attributes with frameworks that use JSX and Typescript. In order to solve this we added CSS classes. Rather than support CSS attributes in certain frameworks and classes in others, we decided to remove the CSS attributes and support what works in all of them, classes, for consistency. In addition to this, changing to classes prefixed with `ion` avoids conflict with native attributes and user's CSS. In the latest version of Ionic 4, there are deprecation warnings printed in the console to show what the new classes are, and the documentation has been updated since support for classes was added to remove all references to attributes: https://ionicframework.com/docs/layout/css-utilities.
 
 Some examples of what's changed are below. *This is not all-inclusive, see the documentation linked above for all of the available CSS utility classes.*
 
@@ -98,9 +104,101 @@ See the [CSS Utilities responsive display documentation](https://ionicframework.
 
 #### Activated, Focused, Hover States
 
-The `.activated` class that gets added has been renamed to `.ion-activated` for consistency with how we add focused to elements and to avoid conflicts in users' CSS.
+The `.activated` class that is automatically added to clickable components has been renamed to `.ion-activated`.
+
+The way the CSS variables are used for targeting the activated, focused and hover backgrounds have been updated on the following components:
+
+- Action Sheet
+- Back Button
+- Button
+- FAB Button
+- Item
+- Menu Button
+- Segment Button
+
+Previously, in order to update any of the background colors for the states you would have to know what the opacity was set to. Using the Material Design spec as an example, it would require you to know that the hover state uses a white overlay with an opacity of `.08`. This means that if we had the following set by default:
+
+```css
+--background-hover: rgba(255, 255, 255, 0.08);
+```
+
+If you wanted to change the hover overlay to use black but still match the spec, you'd have to set it to:
+
+```css
+--background-hover: rgba(0, 0, 0, 0.08);
+```
+
+The new way adds the following variables:
+
+```css
+--background-activated-opacity
+--background-focused-opacity
+--background-hover-opacity
+```
+
+It also updates the Action Sheet component so that the variables will be prefixed with `button`. See the [Action Sheet](#action-sheet) section in this document for all of the variable names.
+
+This allows you to still have control over the opacity if desired, but when updating the state, you only have to set the main variables: `--background-activated`, `--background-focused`, `--background-hover` and the button will still match the spec. This is most important when changing the global theme, as updating the toolbar color will automatically update the hover states for all of the buttons in a toolbar, regardless of their fill and without having to know what each opacity is.
+
+As a result of these changes, the following global CSS variables will not change the opacity and as such should be treated the same as the `--background-{STATE}` variables:
+
+```css
+--ion-item-background-activated
+--ion-item-background-focused
+--ion-item-background-hover
+```
+
+##### Examples
+
+```css
+/* Setting the button background to solid red */
+ion-button {
+  --background-hover: red;
+  --background-hover-opacity: 1;
+}
+
+/* Setting the action sheet button background on hover to an opaque green */
+ion-action-sheet {
+  --button-background-hover: green;
+  --button-background-hover-opacity: 0.5;
+}
+
+/* Setting the fab button background to use the text color with the default opacity on md */
+.md ion-fab-button {
+  --color: #222;
+  --background-hover: #222;
+}
+
+/* Setting the theme background for items to use #000 (black) with the default theme opacity */
+:root {
+  /* is used in item as rgba(0, 0, 0, var(--background-activated-opacity)); */
+  --ion-item-background-activated: #000;
+
+  /* is used in item as rgba(0, 0, 0, var(--background-focused-opacity)); */
+  --ion-item-background-focused: #000;
+
+  /* is used in item as rgba(0, 0, 0, var(--background-hover-opacity)); */
+  --ion-item-background-hover: #000;
+}
+```
+
+##### Global CSS Properties
+
+Some variables were renamed, removed or added. See the chart below for the changes.
+
+| Old variable                            | Status  | New variable                              |
+| ----------------------------------------| --------|-------------------------------------------|
+| `--ion-toolbar-color-unchecked`         | renamed | `--ion-toolbar-segment-color`             |
+| `--ion-toolbar-color-checked`           | renamed | `--ion-toolbar-segment-color-checked`     |
+| `--ion-toolbar-background-unchecked`    | renamed | `--ion-toolbar-segment-background`        |
+| `--ion-toolbar-background-checked`      | renamed | `--ion-toolbar-segment-background-checked`|
+| `--ion-tab-bar-color-activated`         | renamed | `--ion-tab-bar-color-selected`            |
+|                                         | added   | `--ion-toolbar-segment-indicator-color`   |
+| `--ion-toolbar-color-activated`         | removed |                                           |
+| `--ion-item-background-activated`       | removed |                                           |
+| `--ion-item-background-focused`         | removed |                                           |
+| `--ion-item-background-hover`           | removed |                                           |
 
-<!-- TODO mention some of the changes to the hover values: https://github.com/ionic-team/ionic/pull/19440 -->
 
 #### Distributed Sass
 
@@ -109,20 +207,50 @@ The `scss` files have been removed from `dist/`. CSS variables should be used to
 
 ### Components
 
+#### Action Sheet
+
+The following CSS variables have been renamed or added:
+
+| Old                      | New                                        |
+|--------------------------| -------------------------------------------|
+|                          | `--button-background`                      |
+| `--background-activated` | `--button-background-activated`            |
+|                          | `--button-background-activated-opacity`    |
+| `--background-selected`  | `--button-background-selected`             |
+|                          | `--button-background-focused`              |
+|                          | `--button-background-focused-opacity`      |
+|                          | `--button-background-hover`                |
+|                          | `--button-background-hover-opacity`        |
+|                          | `--button-background-selected`             |
+|                          | `--button-background-selected-opacity`     |
+|                          | `--button-color`                           |
+|                          | `--button-color-activated`                 |
+|                          | `--button-color-focused`                   |
+|                          | `--button-color-hover`                     |
+|                          | `--button-color-selected`                  |
+
+See the [Action Sheet CSS Custom Properties](https://ionicframework.com/docs/api/action-sheet#css-custom-properties) documentation for descriptions.
+
+
 #### Anchor
 
 The `ion-anchor` component has been renamed to `ion-router-link` as this is a better description of which component it should be used with. This component should still only be used in vanilla and Stencil JavaScript projects. Angular projects should use an `<a>` and `routerLink` with the Angular router. See the [documentation for router-link](https://ionicframework.com/docs/api/router-link) for more information.
 
 #### Back Button
 
-Converted `ion-back-button` to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
+- Converted `ion-back-button` to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
+- [Focused, Hover States](#activated-focused-hover-states) have been updated.
+
+#### Button
+
+- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated.
 
 #### Card
 
 Converted `ion-card` to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
 
 
-### Controllers
+#### Controllers
 
 The controller components (`ion-action-sheet-controller`, `ion-alert-controller`, `ion-loading-controller`, `ion-menu-controller`, `ion-modal-controller`, `ion-picker-controller`, `ion-popover-controller`, `ion-toast-controller`) have been removed from Ionic core as elements. They should be imported from `@ionic/core` instead. This will not affect projects that use Angular or React. Below is an example of the loading controller change in a JavaScript project, but this change applies to all controller elements.
 
@@ -163,6 +291,15 @@ becomes
 </script>
 ```
 
+#### FAB Button
+
+- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated.
+
+
+#### Item
+
+- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated.
+
 
 #### Header / Footer
 
@@ -192,6 +329,12 @@ The list header has been redesigned to match the latest iOS spec. This may break
   ```
 - The presentation type in `ios` now defaults to `"overlay"`.
 
+
+#### Menu Button
+
+- [Focused, Hover States](#activated-focused-hover-states) have been updated.
+
+
 #### Nav Link
 
 The `ion-nav-push`, `ion-nav-back`, and `ion-nav-set-root` components have been removed in favor of using `ion-nav-link` with a `router-direction` property which accepts `”root”`, `“forward”`, and `“back”`. This reduces the need for maintaining multiple components when they all do the same thing with different transition directions. See the [documentation for nav-link](https://ionicframework.com/docs/api/nav-link) for more information.
@@ -254,7 +397,78 @@ The `inputmode` property for `ion-searchbar` now defaults to `undefined`. To get
 
 #### Segment
 
-<!-- TODO https://gist.github.com/brandyscarney/e6cfe43c359bb2c932e12f8d615e1669 -->
+Segment was completely revamped to use the new iOS design including an all new gesture that applies for both Material Design and iOS. Due to these changes, some breaking changes were inevitably introduced in order to support the new design.
+
+##### Button States
+
+- The activated styles and custom CSS properties have been removed. These are no longer being used in the latest spec as the indicator and ripple are used to show activation. Properties removed:
+  ```
+  --color-activated
+  --background-activated
+  ```
+- The [Focused & Hover States](#activated-focused-hover-states) have been updated.
+
+##### Indicator Color
+
+- `--indicator-color` now applies to the checked segment button (for both `ios` and `md`)
+- `--indicator-color-checked` has been removed
+- The Material Design spec does not include an indicator color on non-checked buttons: https://material.io/components/tabs/
+- In order to style the Segment to match the old spec, please use custom CSS. For example, to update Material Design to include a bottom line all of the time:
+  ```css
+  .md ion-segment::after {
+      position: absolute;
+      bottom: 0;
+      height: 2px;
+      width: 100%;
+      content: '';
+      background: rgba(0,0,0,0.5);
+      z-index: -1;
+  }
+  ```
+
+##### Background & Color
+
+A `--background` variable has been added to style the `ion-segment` component. As a result of this, the following background variables for a child segment button must now be set on the `ion-segment-button`:
+
+```
+--background: Background of the segment button
+--background-checked: Background of the checked segment button
+--background-disabled: Background of the disabled segment button
+--background-hover: Background of the segment button on hover
+```
+
+> Note: iOS no longer checks the button background, so setting the `--background-checked` variable may have an undesired outcome. Instead, Segment uses an indicator to slide between the buttons, showing which one is checked. See the previous section on the indicator color variables.
+
+The above variables *will not* be inherited in the button if set on the `ion-segment`. In addition to this, all color variables should also be set on the button for consistency:
+
+```
+--color: Color of the segment button
+--color-checked: Color of the checked segment button
+--color-disabled: Color of the disabled segment button
+--color-hover: Color of the segment button on hover
+```
+
+###### Removed variables
+
+The following variables were removed due to the current spec no longer using them.
+
+- `--color-checked-disabled`
+- `--background-disabled`
+- `--color-disabled`
+- `--background-activated`
+- `--color-activated`
+
+##### Global CSS Properties
+
+Some variables were renamed or added. See the chart below for the new names.
+
+| Old variable                            | Status  | New variable                              |
+| ----------------------------------------| --------|-------------------------------------------|
+| `--ion-toolbar-color-unchecked`         | renamed | `--ion-toolbar-segment-color`             |
+| `--ion-toolbar-color-checked`           | renamed | `--ion-toolbar-segment-color-checked`     |
+| `--ion-toolbar-background-unchecked`    | renamed | `--ion-toolbar-segment-background`        |
+| `--ion-toolbar-background-checked`      | renamed | `--ion-toolbar-segment-background-checked`|
+|                                         | added   | `--ion-toolbar-segment-indicator-color`   |
 
 
 #### Segment Button
@@ -329,6 +543,10 @@ The `width` property has been removed in favor of using CSS styling.
   </ion-split-pane>
   ```
 
+#### Tabs
+
+- [Focused State](#activated-focused-hover-states) have been updated.
+
 #### Toast
 
 The close button properties (`showCloseButton` and `closeButtonText`) have been removed. Use the `buttons` array instead with `role: 'cancel'`. See the [usage documentation](https://ionicframework.com/docs/api/toast#usage) for more information.
@@ -382,7 +600,7 @@ dark:            #222428
 
 `primary`, `light` and `dark` have not changed. The contrast color for `warning` has been updated to `#000`.
 
-This will only be a breaking change in your app if you are not using one of our starters & not overriding the defaults. If you are overriding the defaults already these will need to be manually updated if desired.
+This will only be a breaking change in your app if you are not using one of our starters and not overriding the defaults. If you are overriding the defaults already these will need to be manually updated if desired.
 
 
 ### Events
diff --git a/core/api.txt b/core/api.txt
index 2ddead4c86..6469dd119b 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -21,8 +21,20 @@ ion-action-sheet,event,ionActionSheetWillDismiss,OverlayEventDetail<any>,true
 ion-action-sheet,event,ionActionSheetWillPresent,void,true
 ion-action-sheet,css-prop,--backdrop-opacity
 ion-action-sheet,css-prop,--background
-ion-action-sheet,css-prop,--background-activated
-ion-action-sheet,css-prop,--background-selected
+ion-action-sheet,css-prop,--button-background
+ion-action-sheet,css-prop,--button-background-activated
+ion-action-sheet,css-prop,--button-background-activated-opacity
+ion-action-sheet,css-prop,--button-background-focused
+ion-action-sheet,css-prop,--button-background-focused-opacity
+ion-action-sheet,css-prop,--button-background-hover
+ion-action-sheet,css-prop,--button-background-hover-opacity
+ion-action-sheet,css-prop,--button-background-selected
+ion-action-sheet,css-prop,--button-background-selected-opacity
+ion-action-sheet,css-prop,--button-color
+ion-action-sheet,css-prop,--button-color-activated
+ion-action-sheet,css-prop,--button-color-focused
+ion-action-sheet,css-prop,--button-color-hover
+ion-action-sheet,css-prop,--button-color-selected
 ion-action-sheet,css-prop,--color
 ion-action-sheet,css-prop,--height
 ion-action-sheet,css-prop,--max-height
@@ -77,7 +89,9 @@ ion-back-button,prop,text,null | string | undefined,undefined,false,false
 ion-back-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-back-button,css-prop,--background
 ion-back-button,css-prop,--background-focused
+ion-back-button,css-prop,--background-focused-opacity
 ion-back-button,css-prop,--background-hover
+ion-back-button,css-prop,--background-hover-opacity
 ion-back-button,css-prop,--border-radius
 ion-back-button,css-prop,--color
 ion-back-button,css-prop,--color-focused
@@ -142,8 +156,11 @@ ion-button,event,ionBlur,void,true
 ion-button,event,ionFocus,void,true
 ion-button,css-prop,--background
 ion-button,css-prop,--background-activated
+ion-button,css-prop,--background-activated-opacity
 ion-button,css-prop,--background-focused
+ion-button,css-prop,--background-focused-opacity
 ion-button,css-prop,--background-hover
+ion-button,css-prop,--background-hover-opacity
 ion-button,css-prop,--border-color
 ion-button,css-prop,--border-radius
 ion-button,css-prop,--border-style
@@ -344,8 +361,11 @@ ion-fab-button,event,ionBlur,void,true
 ion-fab-button,event,ionFocus,void,true
 ion-fab-button,css-prop,--background
 ion-fab-button,css-prop,--background-activated
+ion-fab-button,css-prop,--background-activated-opacity
 ion-fab-button,css-prop,--background-focused
+ion-fab-button,css-prop,--background-focused-opacity
 ion-fab-button,css-prop,--background-hover
+ion-fab-button,css-prop,--background-hover-opacity
 ion-fab-button,css-prop,--border-color
 ion-fab-button,css-prop,--border-radius
 ion-fab-button,css-prop,--border-style
@@ -469,8 +489,11 @@ ion-item,prop,target,string | undefined,undefined,false,false
 ion-item,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-item,css-prop,--background
 ion-item,css-prop,--background-activated
+ion-item,css-prop,--background-activated-opacity
 ion-item,css-prop,--background-focused
+ion-item,css-prop,--background-focused-opacity
 ion-item,css-prop,--background-hover
+ion-item,css-prop,--background-hover-opacity
 ion-item,css-prop,--border-color
 ion-item,css-prop,--border-radius
 ion-item,css-prop,--border-style
@@ -632,7 +655,9 @@ ion-menu-button,prop,menu,string | undefined,undefined,false,false
 ion-menu-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-menu-button,css-prop,--background
 ion-menu-button,css-prop,--background-focused
+ion-menu-button,css-prop,--background-focused-opacity
 ion-menu-button,css-prop,--background-hover
+ion-menu-button,css-prop,--background-hover-opacity
 ion-menu-button,css-prop,--border-radius
 ion-menu-button,css-prop,--color
 ion-menu-button,css-prop,--color-focused
@@ -957,15 +982,17 @@ ion-segment-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-segment-button,prop,value,string,'ion-sb-' + (ids++),false,false
 ion-segment-button,css-prop,--background
 ion-segment-button,css-prop,--background-checked
-ion-segment-button,css-prop,--background-disabled
+ion-segment-button,css-prop,--background-focused
+ion-segment-button,css-prop,--background-focused-opacity
 ion-segment-button,css-prop,--background-hover
+ion-segment-button,css-prop,--background-hover-opacity
 ion-segment-button,css-prop,--border-color
 ion-segment-button,css-prop,--border-radius
 ion-segment-button,css-prop,--border-style
 ion-segment-button,css-prop,--border-width
 ion-segment-button,css-prop,--color
 ion-segment-button,css-prop,--color-checked
-ion-segment-button,css-prop,--color-disabled
+ion-segment-button,css-prop,--color-focused
 ion-segment-button,css-prop,--color-hover
 ion-segment-button,css-prop,--indicator-box-shadow
 ion-segment-button,css-prop,--indicator-color
@@ -1106,7 +1133,9 @@ ion-tab-button,prop,tab,string | undefined,undefined,false,false
 ion-tab-button,prop,target,string | undefined,undefined,false,false
 ion-tab-button,css-prop,--background
 ion-tab-button,css-prop,--background-focused
+ion-tab-button,css-prop,--background-focused-opacity
 ion-tab-button,css-prop,--color
+ion-tab-button,css-prop,--color-focused
 ion-tab-button,css-prop,--color-selected
 ion-tab-button,css-prop,--padding-bottom
 ion-tab-button,css-prop,--padding-end
diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss
index 0d6d04f41a..cf627110f1 100644
--- a/core/src/components/action-sheet/action-sheet.ios.scss
+++ b/core/src/components/action-sheet/action-sheet.ios.scss
@@ -6,9 +6,18 @@
 
 :host {
   --background: #{$action-sheet-ios-background-color};
-  --background-selected: #{$action-sheet-ios-button-background-selected};
-  --background-activated: #{$action-sheet-ios-button-background-activated};
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
+  --button-background: #{$action-sheet-ios-button-background};
+  --button-background-activated: #{$text-color};
+  --button-background-activated-opacity: .08;
+  --button-background-hover: currentColor;
+  --button-background-hover-opacity: .04;
+  --button-background-focused: currentColor;
+  --button-background-focused-opacity: .12;
+  --button-background-selected: #{$action-sheet-ios-button-background-selected};
+  --button-background-selected-opacity: 1;
+  --button-color: #{$action-sheet-ios-button-text-color};
+  --color: #{$action-sheet-ios-title-color};
 
   text-align: $action-sheet-ios-text-align;
 }
@@ -67,13 +76,13 @@
     backdrop-filter: $action-sheet-ios-button-translucent-filter;
   }
 
-  :host(.action-sheet-translucent) .action-sheet-button.activated {
+  :host(.action-sheet-translucent) .action-sheet-button.ion-activated {
     background-color: $action-sheet-ios-translucent-background-color-activated;
     background-image: none;
   }
 
   :host(.action-sheet-translucent) .action-sheet-cancel {
-    background: var(--background-selected);
+    background: var(--button-background-selected);
   }
 }
 
@@ -82,16 +91,8 @@
 // Border is made with a linear gradient in order
 // to get the proper color and iOS blur effect
 
-.action-sheet-title,
-.action-sheet-button {
-  background-color: transparent;
-  background-image: linear-gradient(0deg, $action-sheet-ios-button-border-color, $action-sheet-ios-button-border-color 50%, transparent 50%);
-  background-repeat: no-repeat;
-
-  /* stylelint-disable-next-line all */
-  background-position: bottom;
-
-  background-size: 100% 1px;
+.action-sheet-title {
+  background: $action-sheet-ios-button-background;
 }
 
 
@@ -124,8 +125,6 @@
 
   height: $action-sheet-ios-button-height;
 
-  color: var(--color, $action-sheet-ios-button-text-color);
-
   font-size: $action-sheet-ios-button-font-size;
 
   contain: strict;
@@ -142,17 +141,30 @@
 }
 
 .action-sheet-selected {
-  background: var(--background-selected);
-
   font-weight: bold;
 }
 
-.action-sheet-destructive {
+.action-sheet-cancel {
+  font-weight: $action-sheet-ios-button-cancel-font-weight;
+
+  &::after {
+    background: var(--button-background-selected);
+
+    opacity: var(--button-background-selected-opacity);
+  }
+}
+
+// iOS Action Sheet Button: Destructive
+// ---------------------------------------------------
+
+.action-sheet-destructive,
+.action-sheet-destructive.ion-activated,
+.action-sheet-destructive.ion-focused {
   color: $action-sheet-ios-button-destructive-text-color;
 }
 
-.action-sheet-cancel {
-  background: var(--background-selected);
-
-  font-weight: $action-sheet-ios-button-cancel-font-weight;
+@media (any-hover: hover) {
+  .action-sheet-destructive:hover {
+    color: $action-sheet-ios-button-destructive-text-color;
+  }
 }
diff --git a/core/src/components/action-sheet/action-sheet.ios.vars.scss b/core/src/components/action-sheet/action-sheet.ios.vars.scss
index 6c5a13182c..ab81b8f009 100644
--- a/core/src/components/action-sheet/action-sheet.ios.vars.scss
+++ b/core/src/components/action-sheet/action-sheet.ios.vars.scss
@@ -127,7 +127,7 @@ $action-sheet-ios-button-border-color-alpha:                      .08 !default;
 $action-sheet-ios-button-border-color:                            rgba($text-color-rgb, $action-sheet-ios-button-border-color-alpha) !default;
 
 /// @prop - Background color of the action sheet button
-$action-sheet-ios-button-background:                              transparent !default;
+$action-sheet-ios-button-background:                              linear-gradient(0deg, $action-sheet-ios-button-border-color, $action-sheet-ios-button-border-color 50%, transparent 50%) bottom / 100% 1px no-repeat transparent !default;
 
 /// @prop - Background color alpha of the activated action sheet button
 $action-sheet-ios-button-background-alpha-activated:              .08 !default;
diff --git a/core/src/components/action-sheet/action-sheet.md.scss b/core/src/components/action-sheet/action-sheet.md.scss
index f080453ea9..b077be46c6 100644
--- a/core/src/components/action-sheet/action-sheet.md.scss
+++ b/core/src/components/action-sheet/action-sheet.md.scss
@@ -6,9 +6,18 @@
 
 :host {
   --background: #{$action-sheet-md-background-color};
-  --background-selected: #{var(--background, $action-sheet-md-button-background-selected)};
-  --background-activated: var(--background);
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
+  --button-background: transparent;
+  --button-background-selected: currentColor;
+  --button-background-selected-opacity: 0;
+  --button-background-activated: transparent;
+  --button-background-activated-opacity: 0;
+  --button-background-hover: currentColor;
+  --button-background-hover-opacity: .04;
+  --button-background-focused: currentColor;
+  --button-background-focused-opacity: .12;
+  --button-color: #{var(--color, $action-sheet-md-button-text-color)};
+  --color: #{$action-sheet-md-button-text-color};
 }
 
 .action-sheet-title {
@@ -52,9 +61,6 @@
 
   height: $action-sheet-md-button-height;
 
-  background: transparent;
-  color: var(--color, $action-sheet-md-button-text-color);
-
   font-size: $action-sheet-md-button-font-size;
 
   text-align: $action-sheet-md-text-align;
@@ -67,7 +73,7 @@
   @include padding(null, null, 4px, null);
   @include margin($action-sheet-md-icon-margin-top, $action-sheet-md-icon-margin-end, $action-sheet-md-icon-margin-bottom, $action-sheet-md-icon-margin-start);
 
-  color: var(--color, $action-sheet-md-icon-color);
+  color: #{$action-sheet-md-icon-color};
 
   font-size: $action-sheet-md-icon-font-size;
 }
diff --git a/core/src/components/action-sheet/action-sheet.md.vars.scss b/core/src/components/action-sheet/action-sheet.md.vars.scss
index 43e3b257be..0dc27f6e77 100644
--- a/core/src/components/action-sheet/action-sheet.md.vars.scss
+++ b/core/src/components/action-sheet/action-sheet.md.vars.scss
@@ -87,13 +87,6 @@ $action-sheet-md-button-padding-start:                  $action-sheet-md-button-
 /// @prop - Background color of the action sheet button
 $action-sheet-md-button-background:                     transparent !default;
 
-/// @prop - Background color of the action sheet activated button
-$action-sheet-md-button-background-activated:           $background-color-step-50 !default;
-
-/// @prop - Background color of the selected action sheet button
-$action-sheet-md-button-background-selected:            null !default;
-
-
 // Action Sheet Icon
 // --------------------------------------------------
 
diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index c1f2d8faf0..227a182c92 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -6,9 +6,6 @@
 :host {
   /**
    * @prop --background: Background of the action sheet group
-   * @prop --background-activated: Background of the action sheet button when pressed
-   * @prop --background-selected: Background of the selected action sheet button
-   *
    * @prop --color: Color of the action sheet text
    *
    * @prop --min-width: Minimum width of the action sheet
@@ -20,8 +17,28 @@
    * @prop --max-height: Maximum height of the action sheet
    *
    * @prop --backdrop-opacity: Opacity of the backdrop
+   *
+   * @prop --button-background: Background of the action sheet button
+   * @prop --button-background-activated: Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple.
+   * @prop --button-background-activated-opacity: Opacity of the action sheet button background when pressed
+   * @prop --button-background-hover: Background of the action sheet button on hover
+   * @prop --button-background-hover-opacity: Opacity of the action sheet button background on hover
+   * @prop --button-background-focused: Background of the action sheet button when tabbed to
+   * @prop --button-background-focused-opacity: Opacity of the action sheet button background when tabbed to
+   * @prop --button-background-selected: Background of the selected action sheet button
+   * @prop --button-background-selected-opacity: Opacity of the selected action sheet button background
+   *
+   * @prop --button-color: Color of the action sheet button
+   * @prop --button-color-activated: Color of the action sheet button when pressed
+   * @prop --button-color-hover: Color of the action sheet button on hover
+   * @prop --button-color-focused: Color of the action sheet button when tabbed to
+   * @prop --button-color-selected: Color of the selected action sheet button
    */
   --color: initial;
+  --button-color-activated: var(--button-color);
+  --button-color-focused: var(--button-color);
+  --button-color-hover: var(--button-color);
+  --button-color-selected: var(--button-color);
   --min-width: auto;
   --width: #{$action-sheet-width};
   --max-width: #{$action-sheet-max-width};
@@ -68,6 +85,7 @@
 
 .action-sheet-button {
   display: block;
+  position: relative;
 
   width: 100%;
 
@@ -75,16 +93,19 @@
 
   outline: none;
 
-  font-family: inherit;
-}
+  background: var(--button-background);
+  color: var(--button-color);
 
-.action-sheet-button.activated {
-  background: var(--background-activated);
+  font-family: inherit;
+
+  overflow: hidden;
 }
 
 .action-sheet-button-inner {
   display: flex;
 
+  position: relative;
+
   flex-flow: row nowrap;
   flex-shrink: 0;
   align-items: center;
@@ -92,6 +113,8 @@
 
   width: 100%;
   height: 100%;
+
+  z-index: 1;
 }
 
 .action-sheet-container {
@@ -124,6 +147,67 @@
   overflow: hidden;
 }
 
+
+// Action Sheet: States
+// --------------------------------------------------
+
+.action-sheet-button::after {
+  @include button-state();
+}
+
+
+// Action Sheet: Selected
+// --------------------------------------------------
+
 .action-sheet-selected {
-  background: var(--background-selected);
+  color: var(--button-color-selected);
+
+  &::after {
+    background: var(--button-background-selected);
+
+    opacity: var(--button-background-selected-opacity);
+  }
+}
+
+
+// Action Sheet: Activated
+// --------------------------------------------------
+
+.action-sheet-button.ion-activated {
+  color: var(--button-color-activated);
+
+  &::after {
+    background: var(--button-background-activated);
+
+    opacity: var(--button-background-activated-opacity);
+  }
+}
+
+
+// Action Sheet: Focused
+// --------------------------------------------------
+
+.action-sheet-button.ion-focused {
+  color: var(--button-color-focused);
+
+  &::after {
+    background: var(--button-background-focused);
+
+    opacity: var(--button-background-focused-opacity);
+  }
+}
+
+// Action Sheet: Hover
+// --------------------------------------------------
+
+@media (any-hover: hover) {
+  .action-sheet-button:hover {
+    color: var(--button-color-hover);
+
+    &::after {
+      background: var(--button-background-hover);
+
+      opacity: var(--button-background-hover-opacity);
+    }
+  }
 }
\ No newline at end of file
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index d2365739e7..8e9fbc8ac4 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -226,7 +226,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                 </div>
               }
               {buttons.map(b =>
-                <button type="button" ion-activatable class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
+                <button type="button" class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
                   <span class="action-sheet-button-inner">
                     {b.icon && <ion-icon icon={b.icon} lazy={false} class="action-sheet-icon" />}
                     {b.text}
@@ -252,6 +252,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                       />}
                     {cancelButton.text}
                   </span>
+                  {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
                 </button>
               </div>
             }
@@ -266,6 +267,7 @@ const buttonClass = (button: ActionSheetButton): CssClassMap => {
   return {
     'action-sheet-button': true,
     'ion-activatable': true,
+    'ion-focusable': true,
     [`action-sheet-${button.role}`]: button.role !== undefined,
     ...getClassMap(button.cssClass),
   };
diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md
index fcfb07a4e4..a62765d076 100644
--- a/core/src/components/action-sheet/readme.md
+++ b/core/src/components/action-sheet/readme.md
@@ -319,19 +319,31 @@ Type: `Promise<void>`
 
 ## CSS Custom Properties
 
-| Name                     | Description                                        |
-| ------------------------ | -------------------------------------------------- |
-| `--backdrop-opacity`     | Opacity of the backdrop                            |
-| `--background`           | Background of the action sheet group               |
-| `--background-activated` | Background of the action sheet button when pressed |
-| `--background-selected`  | Background of the selected action sheet button     |
-| `--color`                | Color of the action sheet text                     |
-| `--height`               | height of the action sheet                         |
-| `--max-height`           | Maximum height of the action sheet                 |
-| `--max-width`            | Maximum width of the action sheet                  |
-| `--min-height`           | Minimum height of the action sheet                 |
-| `--min-width`            | Minimum width of the action sheet                  |
-| `--width`                | Width of the action sheet                          |
+| Name                                    | Description                                                                                                            |
+| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| `--backdrop-opacity`                    | Opacity of the backdrop                                                                                                |
+| `--background`                          | Background of the action sheet group                                                                                   |
+| `--button-background`                   | Background of the action sheet button                                                                                  |
+| `--button-background-activated`         | Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple. |
+| `--button-background-activated-opacity` | Opacity of the action sheet button background when pressed                                                             |
+| `--button-background-focused`           | Background of the action sheet button when tabbed to                                                                   |
+| `--button-background-focused-opacity`   | Opacity of the action sheet button background when tabbed to                                                           |
+| `--button-background-hover`             | Background of the action sheet button on hover                                                                         |
+| `--button-background-hover-opacity`     | Opacity of the action sheet button background on hover                                                                 |
+| `--button-background-selected`          | Background of the selected action sheet button                                                                         |
+| `--button-background-selected-opacity`  | Opacity of the selected action sheet button background                                                                 |
+| `--button-color`                        | Color of the action sheet button                                                                                       |
+| `--button-color-activated`              | Color of the action sheet button when pressed                                                                          |
+| `--button-color-focused`                | Color of the action sheet button when tabbed to                                                                        |
+| `--button-color-hover`                  | Color of the action sheet button on hover                                                                              |
+| `--button-color-selected`               | Color of the selected action sheet button                                                                              |
+| `--color`                               | Color of the action sheet text                                                                                         |
+| `--height`                              | height of the action sheet                                                                                             |
+| `--max-height`                          | Maximum height of the action sheet                                                                                     |
+| `--max-width`                           | Maximum width of the action sheet                                                                                      |
+| `--min-height`                          | Minimum height of the action sheet                                                                                     |
+| `--min-width`                           | Minimum width of the action sheet                                                                                      |
+| `--width`                               | Width of the action sheet                                                                                              |
 
 
 ## Dependencies
diff --git a/core/src/components/action-sheet/test/basic/index.html b/core/src/components/action-sheet/test/basic/index.html
index 7771929482..6acfed47ea 100644
--- a/core/src/components/action-sheet/test/basic/index.html
+++ b/core/src/components/action-sheet/test/basic/index.html
@@ -40,10 +40,10 @@
   <style>
     .my-color-class {
       --background: #292929;
-      --background-selected: #222222;
+      --button-background-selected: #222222;
 
       --color: #dfdfdf;
-      ;
+      --button-color: #dfdfdf;
     }
 
     .my-custom-class {
@@ -65,7 +65,7 @@
       const actionSheet = await actionSheetController.create(opts);
       await actionSheet.present();
     }
-    
+
     async function presentBasic() {
       const mode = Ionic.mode;
       await openActionSheet({
@@ -80,7 +80,7 @@
         }, {
           text: 'Share',
           icon: 'share',
-          cssClass: 'activated',
+          cssClass: 'ion-activated',
           handler: () => {
             console.log('Share clicked');
           }
@@ -152,7 +152,7 @@
       });
     }
 
-    async function presentWithCssClass(classList) {      
+    async function presentWithCssClass(classList) {
       await openActionSheet({
         header: "Custom Css Class",
         cssClass: classList ? classList : "my-color-class my-custom-class",
@@ -160,7 +160,7 @@
           {
             text: 'Add to Favorites',
             icon: 'star',
-            cssClass: 'my-custom-button customClass activated',
+            cssClass: 'my-custom-button customClass ion-activated',
             handler: () => {
               console.log('Add to Favorites clicked');
             }
@@ -272,7 +272,7 @@
             }
           }, {
             text: 'Copy Text',
-            cssClass: 'activated',
+            cssClass: 'ion-activated',
             handler: () => {
               console.log('Copy Text clicked');
             }
diff --git a/core/src/components/action-sheet/test/translucent/index.html b/core/src/components/action-sheet/test/translucent/index.html
index a7f3d4221d..0bc70b62ba 100644
--- a/core/src/components/action-sheet/test/translucent/index.html
+++ b/core/src/components/action-sheet/test/translucent/index.html
@@ -149,7 +149,7 @@
             }
           }, {
             text: 'Copy Text',
-            cssClass: 'activated',
+            cssClass: 'ion-activated',
             handler: () => {
               console.log('Copy Text clicked');
             }
@@ -185,7 +185,7 @@
             }
           }, {
             text: 'Edit Title',
-            cssClass: 'activated',
+            cssClass: 'ion-activated',
             handler: () => {
               console.log('Edit Title clicked');
             }
diff --git a/core/src/components/alert/alert.ios.scss b/core/src/components/alert/alert.ios.scss
index bcf7426693..5f8756b149 100644
--- a/core/src/components/alert/alert.ios.scss
+++ b/core/src/components/alert/alert.ios.scss
@@ -298,6 +298,6 @@
   font-weight: $alert-ios-button-main-font-weight;
 }
 
-.alert-button.activated {
+.alert-button.ion-activated {
   background-color: $alert-ios-button-background-color-activated;
 }
diff --git a/core/src/components/back-button/back-button.ios.scss b/core/src/components/back-button/back-button.ios.scss
index 7825878814..02cdd8248a 100644
--- a/core/src/components/back-button/back-button.ios.scss
+++ b/core/src/components/back-button/back-button.ios.scss
@@ -5,7 +5,10 @@
 // --------------------------------------------------
 
 :host {
-  --background-focused: #{ion-color(primary, base, .1)};
+  --background-hover: transparent;
+  --background-hover-opacity: 1;
+  --background-focused: currentColor;
+  --background-focused-opacity: .1;
   --border-radius: 4px;
   --color: #{$back-button-ios-color};
   --icon-margin-end: -5px;
@@ -26,21 +29,20 @@
 // Back Button States
 // --------------------------------------------------
 
-:host(.activated) .button-native {
+:host(.ion-activated) .button-native {
   opacity: .4;
 }
 
 @media (any-hover: hover) {
   :host(:hover) {
-    --opacity: .6;
+    opacity: .6;
   }
 }
 
 
-
 // Back Button Color: Focused
 // --------------------------------------------------
 
-:host(.ion-color.ion-focused) .button-native {
-  background: #{current-color(base, .1)};
+:host(.ion-color.ion-focused) .button-native::after {
+  background: #{current-color(base)};
 }
diff --git a/core/src/components/back-button/back-button.md.scss b/core/src/components/back-button/back-button.md.scss
index 47bf84cb5e..847ec61a76 100644
--- a/core/src/components/back-button/back-button.md.scss
+++ b/core/src/components/back-button/back-button.md.scss
@@ -6,8 +6,10 @@
 
 :host {
   --border-radius: 4px;
-  --background-focused: rgba(66, 66, 66, 0.24);
-  --background-hover: rgba(66, 66, 66, 0.08);
+  --background-focused: currentColor;
+  --background-focused-opacity: .12;
+  --background-hover: currentColor;
+  --background-hover-opacity: 0.04;
   --color: #{$back-button-md-color};
   --icon-margin-end: 0;
   --icon-margin-start: 0;
@@ -50,8 +52,8 @@ ion-icon {
 // --------------------------------------------------
 
 @media (any-hover: hover) {
-  :host(.ion-color:hover) .button-native {
-    background: #{current-color(base, .08)};
+  :host(.ion-color:hover) .button-native::after {
+    background: #{current-color(base)};
   }
 }
 
@@ -59,6 +61,6 @@ ion-icon {
 // Back Button Color: Focused
 // --------------------------------------------------
 
-:host(.ion-color.ion-focused) .button-native {
-  background: #{current-color(base, .24)};
+:host(.ion-color.ion-focused) .button-native::after {
+  background: #{current-color(base)};
 }
diff --git a/core/src/components/back-button/back-button.scss b/core/src/components/back-button/back-button.scss
index 1d76ae2858..f98045c9cf 100644
--- a/core/src/components/back-button/back-button.scss
+++ b/core/src/components/back-button/back-button.scss
@@ -7,11 +7,13 @@
  /**
    * @prop --background: Background of the button
    * @prop --background-focused: Background of the button when focused with the tab key
-   * @prop --background-hover: Background of the button when hover
+   * @prop --background-focused-opacity: Opacity of the button background when focused with the tab key
+   * @prop --background-hover: Background of the button on hover
+   * @prop --background-hover-opacity: Opacity of the background on hover
    *
    * @prop --color: Text color of the button
    * @prop --color-focused: Text color of the button when focused with the tab key
-   * @prop --color-hover: Text color of the button when hover
+   * @prop --color-hover: Text color of the button on hover
    *
    * @prop --min-width: Minimum width of the button
    * @prop --min-height: Minimum height of the button
@@ -48,8 +50,8 @@
    * @prop --icon-font-weight: Font weight of the button icon
    */
   --background: transparent;
-  --color-focused: var(--color);
-  --color-hover: var(--color);
+  --color-focused: currentColor;
+  --color-hover: currentColor;
   --icon-margin-top: 0;
   --icon-margin-bottom: 0;
   --icon-padding-top: 0;
@@ -143,6 +145,8 @@
   cursor: pointer;
 
   opacity: var(--opacity);
+
+  overflow: hidden;
   user-select: none;
   z-index: 0;
   appearance: none;
@@ -150,6 +154,7 @@
 
 .button-inner {
   display: flex;
+  position: relative;
 
   flex-flow: row nowrap;
   flex-shrink: 0;
@@ -158,6 +163,8 @@
 
   width: 100%;
   height: 100%;
+
+  z-index: 1;
 }
 
 
@@ -177,22 +184,45 @@ ion-icon {
 }
 
 
-// Back Button: Hover
-// --------------------------------------------------
-
-@media (any-hover: hover) {
-  :host(:hover) .button-native {
-    background: var(--background-hover);
-    color: var(--color-hover);
-  }
-}
-
 // Back Button: Focused
 // --------------------------------------------------
 
 :host(.ion-focused) .button-native {
-  background: var(--background-focused);
   color: var(--color-focused);
+
+  &::after {
+    background: var(--background-focused);
+
+    opacity: var(--background-focused-opacity);
+  }
+}
+
+
+// Back Button: Hover
+// --------------------------------------------------
+
+.button-native::after {
+  @include button-state();
+}
+
+@media (any-hover: hover) {
+  :host(:hover) .button-native {
+    color: var(--color-hover);
+
+    &::after {
+      background: var(--background-hover);
+
+      opacity: var(--background-hover-opacity);
+    }
+  }
+}
+
+
+// Back Button Color: Focused
+// --------------------------------------------------
+
+:host(.ion-color.ion-focused) .button-native {
+  color: #{current-color(base)};
 }
 
 
@@ -206,17 +236,9 @@ ion-icon {
 }
 
 
-// Back Button Color: Focused
-// --------------------------------------------------
-
-:host(.ion-color.ion-focused) .button-native {
-  color: #{current-color(base)};
-}
-
-
 // Back Button in Toolbar: Global Theming
 // --------------------------------------------------
 
-:host-context(ion-toolbar:not(.ion-color)):not(.ion-color) {
+:host(.in-toolbar) {
   color: #{var(--ion-toolbar-color, var(--color))};
 }
\ No newline at end of file
diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
index 26217c9d2b..7e4fc8a4d8 100644
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -4,7 +4,7 @@ import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import { Color } from '../../interface';
 import { ButtonInterface } from '../../utils/element-interface';
-import { createColorClasses, openURL } from '../../utils/theme';
+import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -113,6 +113,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
           'button': true, // ion-buttons target .button
           'back-button-disabled': disabled,
           'back-button-has-icon-only': hasIconOnly,
+          'in-toolbar': hostContext('ion-toolbar', this.el),
           'ion-activatable': true,
           'ion-focusable': true,
           'show-back-button': showBackButton
diff --git a/core/src/components/back-button/readme.md b/core/src/components/back-button/readme.md
index ec5729bc18..5395f63507 100644
--- a/core/src/components/back-button/readme.md
+++ b/core/src/components/back-button/readme.md
@@ -245,38 +245,40 @@ export const BackButtonExample: React.FC = () => (
 
 ## CSS Custom Properties
 
-| Name                    | Description                                                                                                    |
-| ----------------------- | -------------------------------------------------------------------------------------------------------------- |
-| `--background`          | Background of the button                                                                                       |
-| `--background-focused`  | Background of the button when focused with the tab key                                                         |
-| `--background-hover`    | Background of the button when hover                                                                            |
-| `--border-radius`       | Border radius of the button                                                                                    |
-| `--color`               | Text color of the button                                                                                       |
-| `--color-focused`       | Text color of the button when focused with the tab key                                                         |
-| `--color-hover`         | Text color of the button when hover                                                                            |
-| `--icon-font-size`      | Font size of the button icon                                                                                   |
-| `--icon-font-weight`    | Font weight of the button icon                                                                                 |
-| `--icon-margin-bottom`  | Bottom margin of the button icon                                                                               |
-| `--icon-margin-end`     | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon   |
-| `--icon-margin-start`   | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon   |
-| `--icon-margin-top`     | Top margin of the button icon                                                                                  |
-| `--icon-padding-bottom` | Bottom padding of the button icon                                                                              |
-| `--icon-padding-end`    | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon |
-| `--icon-padding-start`  | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon |
-| `--icon-padding-top`    | Top padding of the button icon                                                                                 |
-| `--margin-bottom`       | Bottom margin of the button                                                                                    |
-| `--margin-end`          | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button        |
-| `--margin-start`        | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button        |
-| `--margin-top`          | Top margin of the button                                                                                       |
-| `--min-height`          | Minimum height of the button                                                                                   |
-| `--min-width`           | Minimum width of the button                                                                                    |
-| `--opacity`             | Opacity of the button                                                                                          |
-| `--padding-bottom`      | Bottom padding of the button                                                                                   |
-| `--padding-end`         | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button      |
-| `--padding-start`       | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button      |
-| `--padding-top`         | Top padding of the button                                                                                      |
-| `--ripple-color`        | Color of the button ripple effect                                                                              |
-| `--transition`          | Transition of the button                                                                                       |
+| Name                           | Description                                                                                                    |
+| ------------------------------ | -------------------------------------------------------------------------------------------------------------- |
+| `--background`                 | Background of the button                                                                                       |
+| `--background-focused`         | Background of the button when focused with the tab key                                                         |
+| `--background-focused-opacity` | Opacity of the button background when focused with the tab key                                                 |
+| `--background-hover`           | Background of the button on hover                                                                              |
+| `--background-hover-opacity`   | Opacity of the background on hover                                                                             |
+| `--border-radius`              | Border radius of the button                                                                                    |
+| `--color`                      | Text color of the button                                                                                       |
+| `--color-focused`              | Text color of the button when focused with the tab key                                                         |
+| `--color-hover`                | Text color of the button on hover                                                                              |
+| `--icon-font-size`             | Font size of the button icon                                                                                   |
+| `--icon-font-weight`           | Font weight of the button icon                                                                                 |
+| `--icon-margin-bottom`         | Bottom margin of the button icon                                                                               |
+| `--icon-margin-end`            | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon   |
+| `--icon-margin-start`          | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon   |
+| `--icon-margin-top`            | Top margin of the button icon                                                                                  |
+| `--icon-padding-bottom`        | Bottom padding of the button icon                                                                              |
+| `--icon-padding-end`           | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon |
+| `--icon-padding-start`         | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon |
+| `--icon-padding-top`           | Top padding of the button icon                                                                                 |
+| `--margin-bottom`              | Bottom margin of the button                                                                                    |
+| `--margin-end`                 | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button        |
+| `--margin-start`               | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button        |
+| `--margin-top`                 | Top margin of the button                                                                                       |
+| `--min-height`                 | Minimum height of the button                                                                                   |
+| `--min-width`                  | Minimum width of the button                                                                                    |
+| `--opacity`                    | Opacity of the button                                                                                          |
+| `--padding-bottom`             | Bottom padding of the button                                                                                   |
+| `--padding-end`                | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button      |
+| `--padding-start`              | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button      |
+| `--padding-top`                | Top padding of the button                                                                                      |
+| `--ripple-color`               | Color of the button ripple effect                                                                              |
+| `--transition`                 | Transition of the button                                                                                       |
 
 
 ## Dependencies
diff --git a/core/src/components/back-button/test/basic/index.html b/core/src/components/back-button/test/basic/index.html
index 2571da8c31..6e66686966 100644
--- a/core/src/components/back-button/test/basic/index.html
+++ b/core/src/components/back-button/test/basic/index.html
@@ -10,7 +10,8 @@
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../scripts/testing/scripts.js"></script>
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+</head>
 
 <body>
   <ion-app>
@@ -75,19 +76,63 @@
       <p>
         <ion-back-button class="custom"></ion-back-button>
         <ion-back-button color="secondary" class="custom"></ion-back-button>
-      </p>
-
-      <p>
         <ion-back-button class="custom ion-focused"></ion-back-button>
         <ion-back-button color="secondary" class="custom ion-focused"></ion-back-button>
       </p>
+
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+          <ion-back-button class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Default</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="primary">
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+          <ion-back-button class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Primary</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="light">
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+          <ion-back-button class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Light</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="success">
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+          <ion-back-button class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Success</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar class="themed">
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+          <ion-back-button class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Themed</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="dark">
+        <ion-buttons slot="start">
+          <ion-back-button class="ion-hide"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Hidden</ion-title>
+      </ion-toolbar>
     </ion-content>
   </ion-app>
 
   <script>
     var buttons = document.querySelectorAll('ion-back-button');
 
-    for(var i = 0; i < buttons.length; i++) {
+    for (var i = 0; i < buttons.length; i++) {
       buttons[i].addEventListener('click', (event) => onClick(event));
     }
 
@@ -113,7 +158,9 @@
     .wide {
       --background: #d1f3ff;
       --background-hover: #add8e6;
+      --background-hover-opacity: 1;
       --background-focused: #84c5db;
+      --background-focused-opacity: 1;
 
       height: 50px;
       width: 150px;
@@ -140,6 +187,14 @@
       --padding-end: 10px;
     }
 
+    .custom:hover {
+      opacity: 1;
+    }
+
+    .themed {
+      --ion-toolbar-background: #222;
+      --ion-toolbar-color: #ddd;
+    }
   </style>
 </body>
 
diff --git a/core/src/components/back-button/test/standalone/index.html b/core/src/components/back-button/test/standalone/index.html
index ecf7402b08..8514a537e2 100644
--- a/core/src/components/back-button/test/standalone/index.html
+++ b/core/src/components/back-button/test/standalone/index.html
@@ -34,15 +34,15 @@
     <ion-back-button color="dark"></ion-back-button>
   </p>
   <p>
-    <ion-back-button color="primary" class="activated"></ion-back-button>
-    <ion-back-button color="secondary" class="activated"></ion-back-button>
-    <ion-back-button color="tertiary" class="activated"></ion-back-button>
-    <ion-back-button color="success" class="activated"></ion-back-button>
-    <ion-back-button color="warning" class="activated"></ion-back-button>
-    <ion-back-button color="danger" class="activated"></ion-back-button>
-    <ion-back-button color="light" class="activated"></ion-back-button>
-    <ion-back-button color="medium" class="activated"></ion-back-button>
-    <ion-back-button color="dark" class="activated"></ion-back-button>
+    <ion-back-button color="primary" class="ion-activated"></ion-back-button>
+    <ion-back-button color="secondary" class="ion-activated"></ion-back-button>
+    <ion-back-button color="tertiary" class="ion-activated"></ion-back-button>
+    <ion-back-button color="success" class="ion-activated"></ion-back-button>
+    <ion-back-button color="warning" class="ion-activated"></ion-back-button>
+    <ion-back-button color="danger" class="ion-activated"></ion-back-button>
+    <ion-back-button color="light" class="ion-activated"></ion-back-button>
+    <ion-back-button color="medium" class="ion-activated"></ion-back-button>
+    <ion-back-button color="dark" class="ion-activated"></ion-back-button>
   </p>
 
   <h3>Custom</h3>
@@ -54,13 +54,13 @@
 
   <!-- Custom Colors -->
   <ion-back-button class="custom"></ion-back-button>
-  <ion-back-button class="custom activated"></ion-back-button>
+  <ion-back-button class="custom ion-activated"></ion-back-button>
   <ion-back-button color="secondary" class="custom"></ion-back-button>
 
   <ion-toolbar>
     <ion-buttons slot="start">
       <ion-back-button></ion-back-button>
-      <ion-back-button class="activated"></ion-back-button>
+      <ion-back-button class="ion-activated"></ion-back-button>
     </ion-buttons>
     <ion-title>Default</ion-title>
   </ion-toolbar>
@@ -68,7 +68,7 @@
   <ion-toolbar>
     <ion-buttons slot="start">
       <ion-back-button class="custom"></ion-back-button>
-      <ion-back-button class="custom activated"></ion-back-button>
+      <ion-back-button class="custom ion-activated"></ion-back-button>
     </ion-buttons>
     <ion-title>Custom</ion-title>
   </ion-toolbar>
@@ -76,7 +76,7 @@
   <ion-toolbar>
     <ion-buttons slot="start">
       <ion-back-button color="secondary"></ion-back-button>
-      <ion-back-button color="secondary" class="activated"></ion-back-button>
+      <ion-back-button color="secondary" class="ion-activated"></ion-back-button>
     </ion-buttons>
     <ion-title>Secondary</ion-title>
   </ion-toolbar>
@@ -84,7 +84,7 @@
   <ion-toolbar color="danger">
     <ion-buttons slot="start">
       <ion-back-button></ion-back-button>
-      <ion-back-button class="activated"></ion-back-button>
+      <ion-back-button class="ion-activated"></ion-back-button>
     </ion-buttons>
     <ion-title>Danger</ion-title>
   </ion-toolbar>
@@ -92,7 +92,7 @@
   <ion-toolbar color="dark">
     <ion-buttons slot="start">
       <ion-back-button text="Back" icon=""></ion-back-button>
-      <ion-back-button text="Back" icon="" class="activated"></ion-back-button>
+      <ion-back-button text="Back" icon="" class="ion-activated"></ion-back-button>
     </ion-buttons>
     <ion-title>Dark</ion-title>
   </ion-toolbar>
diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss
index 2c507bd643..66c06a92f3 100644
--- a/core/src/components/button/button.ios.scss
+++ b/core/src/components/button/button.ios.scss
@@ -23,20 +23,19 @@
   letter-spacing: #{$button-ios-letter-spacing};
 }
 
+
 // iOS Solid Button
 // --------------------------------------------------
 
 :host(.button-solid) {
   --background-activated: #{ion-color(primary, shade)};
+  --background-focused: #{ion-color(primary, shade)};
+  --background-hover: #{ion-color(primary, tint)};
+  --background-activated-opacity: 1;
+  --background-focused-opacity: 1;
+  --background-hover-opacity: 1;
 }
 
-:host(.button-solid.activated) {
-  --opacity: #{$button-ios-opacity-activated};
-}
-
-:host(.button-solid.activated.ion-color) .button-native {
-  background: current-color(shade);
-}
 
 // iOS Outline Button
 // --------------------------------------------------
@@ -46,28 +45,21 @@
   --border-width: #{$button-ios-outline-border-width};
   --border-style: #{$button-ios-outline-border-style};
   --background-activated: #{ion-color(primary, base)};
-  --background-focused: #{ion-color(primary, base, .1)};
+  --background-focused: #{ion-color(primary, base)};
+  --background-hover: transparent;
+  --background-focused-opacity: .1;
   --color-activated: #{ion-color(primary, contrast)};
 }
 
-:host(.button-outline.activated.ion-color) .button-native {
-  background: current-color(base);
-  color: current-color(contrast);
-}
-
 
 // iOS Clear Button
 // --------------------------------------------------
 
-:host(.button-clear.activated) {
-  --opacity: #{$button-ios-clear-opacity-activated};
-}
-
 :host(.button-clear) {
   --background-activated: transparent;
-  --background-focused: #{ion-color(primary, base, .1)};
-  --color-activated: #{ion-color(primary, base)};
-  --color-focused: #{ion-color(primary, base)};
+  --background-focused: #{ion-color(primary, base)};
+  --background-hover: transparent;
+  --background-focused-opacity: .1;
 
   font-size: #{$button-ios-clear-font-size};
   font-weight: #{$button-ios-clear-font-weight};
@@ -124,29 +116,63 @@
 }
 
 
-// iOS Button Focus
+// iOS Button Activated
+// --------------------------------------------------
+
+:host(.button-clear.ion-activated) {
+  opacity: #{$button-ios-clear-opacity-activated};
+}
+
+:host(.button-outline.ion-activated.ion-color) .button-native {
+  color: current-color(contrast);
+
+  &::after {
+    background: current-color(base);
+  }
+}
+
+:host(.button-solid.ion-color.ion-activated) .button-native::after {
+  background: #{current-color(shade)};
+}
+
+// iOS Button Focused
+// --------------------------------------------------
+
+:host(.button-outline.ion-focused.ion-color) .button-native,
+:host(.button-clear.ion-focused.ion-color) .button-native {
+  color: current-color(base);
+
+  &::after {
+    background: current-color(base);
+  }
+}
+
+:host(.button-solid.ion-color.ion-focused) .button-native::after {
+  background: #{current-color(shade)};
+}
+
+// iOS Button Hover
 // --------------------------------------------------
 
 @media (any-hover: hover) {
-  :host(.button-solid:hover) {
-    --opacity: #{$button-ios-opacity-hover};
-  }
-
+  // Clear and outline buttons use opacity so set
+  // background to transparent
   :host(.button-clear:hover),
   :host(.button-outline:hover) {
-    --opacity: #{$button-ios-clear-opacity-hover};
+    opacity: #{$button-ios-clear-opacity-hover};
   }
 
-  // Since iOS changes the opacity on hover,
-  // we want to keep the background if focused
-  // or activated
-  :host(.ion-focused:hover) {
-    --background-hover: var(--background-focused);
-    --color-hover: var(--color-focused);
+  :host(.button-clear.ion-color:hover) .button-native,
+  :host(.button-outline.ion-color:hover) .button-native {
+    color: #{current-color(base)};
+
+    &::after {
+      background: transparent;
+    }
   }
 
-  :host(.activated:hover) {
-    --background-hover: var(--background-activated);
-    --color-hover: var(--color-activated);
+  // Solid buttons use the tint background
+  :host(.button-solid.ion-color:hover) .button-native::after {
+    background: #{current-color(tint)};
   }
 }
diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss
index 8639261787..4a1ca0a211 100644
--- a/core/src/components/button/button.md.scss
+++ b/core/src/components/button/button.md.scss
@@ -30,11 +30,16 @@
 // --------------------------------------------------
 
 :host(.button-solid) {
-  --background-activated: var(--background);
+  --background-activated: transparent;
+  --background-hover: #{ion-color(primary, contrast)};
+  --background-focused: #{ion-color(primary, contrast)};
+  --background-activated-opacity: 0;
+  --background-focused-opacity: .24;
+  --background-hover-opacity: .08;
   --box-shadow: #{$button-md-box-shadow};
 }
 
-:host(.button-solid.activated) {
+:host(.button-solid.ion-activated) {
   --box-shadow: #{$button-md-box-shadow-activated};
 }
 
@@ -46,12 +51,14 @@
   --border-style: solid;
   --box-shadow: none;
   --background-activated: transparent;
-  --background-focused: #{ion-color(primary, base, .1)};
-  --background-hover: #{ion-color(primary, base, .04)};
-  --color-activated: #{ion-color(primary, base)};
+  --background-focused: #{ion-color(primary, base)};
+  --background-hover: #{ion-color(primary, base)};
+  --background-activated-opacity: 0;
+  --background-focused-opacity: .12;
+  --background-hover-opacity: .04;
 }
 
-:host(.button-outline.activated.ion-color) .button-native {
+:host(.button-outline.ion-activated.ion-color) .button-native {
   background: transparent;
 }
 
@@ -61,10 +68,11 @@
 
 :host(.button-clear) {
   --background-activated: transparent;
-  --background-focused: #{ion-color(primary, base, .1)};
-  --background-hover: #{ion-color(primary, base, .04)};
-  --color-activated: #{ion-color(primary, base)};
-  --color-focused: #{ion-color(primary, base)};
+  --background-focused: #{ion-color(primary, base)};
+  --background-hover: #{ion-color(primary, base)};
+  --background-activated-opacity: 0;
+  --background-focused-opacity: .12;
+  --background-hover-opacity: .04;
 }
 
 
@@ -121,13 +129,33 @@
 // Material Design Button: Hover
 // --------------------------------------------------
 
+:host(.button-solid.ion-color.ion-activated) .button-native::after,
+:host(.button-solid.ion-color.ion-focused) .button-native::after {
+  background: #{current-color(contrast)};
+
+  opacity: .24;
+}
+
+:host(.button-clear.ion-color.ion-activated) .button-native::after,
+:host(.button-clear.ion-color.ion-focused) .button-native::after,
+:host(.button-outline.ion-color.ion-activated) .button-native::after,
+:host(.button-outline.ion-color.ion-focused) .button-native::after {
+  background: #{current-color(base)};
+
+  opacity: .12;
+}
+
 @media (any-hover: hover) {
-  :host(.button-solid.ion-color:hover) .button-native {
-    background: #{current-color(tint)};
+  :host(.button-solid.ion-color:hover) .button-native::after {
+    background: #{current-color(contrast)};
+
+    opacity: .08;
   }
 
-  :host(.button-clear.ion-color:hover) .button-native,
-  :host(.button-outline.ion-color:hover) .button-native {
-    background: #{current-color(base, .04)};
+  :host(.button-clear.ion-color:hover) .button-native::after,
+  :host(.button-outline.ion-color:hover) .button-native::after {
+    background: #{current-color(base)};
+
+    opacity: .04;
   }
 }
diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss
index 63111d87f8..cc3f5d3f5c 100644
--- a/core/src/components/button/button.scss
+++ b/core/src/components/button/button.scss
@@ -6,9 +6,12 @@
 :host {
   /**
    * @prop --background: Background of the button
-   * @prop --background-activated: Background of the button when pressed
+   * @prop --background-activated: Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.
+   * @prop --background-activated-opacity: Opacity of the button when pressed
    * @prop --background-focused: Background of the button when focused with the tab key
+   * @prop --background-focused-opacity: Opacity of the button when focused with the tab key
    * @prop --background-hover: Background of the button on hover
+   * @prop --background-hover-opacity: Opacity of the background on hover
    *
    * @prop --color: Text color of the button
    * @prop --color-activated: Text color of the button when pressed
@@ -37,7 +40,9 @@
   --border-width: initial;
   --border-color: initial;
   --border-style: initial;
-  --color-hover: initial;
+  --color-activated: var(--color);
+  --color-focused: var(--color);
+  --color-hover: var(--color);
   --box-shadow: none;
 
   display: inline-block;
@@ -63,12 +68,8 @@
 }
 
 :host(.button-disabled) {
-  --opacity: .5;
-  pointer-events: none;
-}
-
-:host(.button-disabled) .button-native {
   cursor: default;
+  opacity: .5;
   pointer-events: none;
 }
 
@@ -78,22 +79,7 @@
 // Default Solid Color
 :host(.button-solid) {
   --background: #{ion-color(primary, base)};
-  --background-focused: #{ion-color(primary, shade)};
-  --background-hover: #{ion-color(primary, tint)};
   --color: #{ion-color(primary, contrast)};
-  --color-activated: #{ion-color(primary, contrast)};
-  --color-focused: #{ion-color(primary, contrast)};
-}
-
-// Solid Button with Color
-:host(.button-solid.ion-color) .button-native {
-  background: current-color(base);
-  color: current-color(contrast);
-}
-
-// Focused/Activated Solid Button with Color
-:host(.button-solid.ion-color.ion-focused) .button-native {
-  background: #{current-color(shade)};
 }
 
 
@@ -105,20 +91,6 @@
   --border-color: #{ion-color(primary, base)};
   --background: transparent;
   --color: #{ion-color(primary, base)};
-  --color-focused: #{ion-color(primary, base)};
-}
-
-// Outline Button with Color
-:host(.button-outline.ion-color) .button-native {
-  border-color: current-color(base);
-
-  background: transparent;
-  color: current-color(base);
-}
-
-:host(.button-outline.ion-focused.ion-color) .button-native {
-  background: current-color(base, .1);
-  color: current-color(base);
 }
 
 
@@ -132,23 +104,6 @@
   --color: #{ion-color(primary, base)};
 }
 
-// Clear Button with Color
-:host(.button-clear.ion-color) .button-native {
-  background: transparent;
-  color: current-color(base);
-}
-
-// Focused Clear Button with Color
-:host(.button-clear.ion-focused.ion-color) .button-native {
-  background: current-color(base, .1);
-  color: current-color(base);
-}
-
-// Activated Clear Button with Color
-:host(.button-clear.activated.ion-color) .button-native {
-  background: transparent;
-}
-
 
 // Block Button
 // --------------------------------------------------
@@ -229,6 +184,8 @@
   opacity: var(--opacity);
   overflow: var(--overflow);
 
+  overflow: hidden;
+
   z-index: 0;
   box-sizing: border-box;
   appearance: none;
@@ -240,6 +197,7 @@
 
 .button-inner {
   display: flex;
+  position: relative;
 
   flex-flow: row nowrap;
   flex-shrink: 0;
@@ -248,6 +206,8 @@
 
   width: 100%;
   height: 100%;
+
+  z-index: 1;
 }
 
 
@@ -279,22 +239,69 @@ ion-ripple-effect {
   color: var(--ripple-color);
 }
 
-// Button: Hover
+
+// Button: States
 // --------------------------------------------------
 
-:host(.ion-focused) .button-native {
-  background: var(--background-focused);
-  color: var(--color-focused);
+.button-native::after {
+  @include button-state();
 }
 
-:host(.activated) .button-native {
-  background: var(--background-activated);
+// Button Activated
+:host(.ion-activated) {
   color: var(--color-activated);
 }
 
+:host(.ion-activated) .button-native::after {
+  background: var(--background-activated);
+
+  opacity: var(--background-activated-opacity);
+}
+
+// Button Focused
+:host(.ion-focused) {
+  color: var(--color-focused);
+}
+
+:host(.ion-focused) .button-native::after {
+  background: var(--background-focused);
+
+  opacity: var(--background-focused-opacity);
+}
+
+// Button Hover
 @media (any-hover: hover) {
-  :host(:hover) .button-native {
-    background: var(--background-hover);
+  :host(:hover) {
     color: var(--color-hover);
   }
+
+  :host(:hover) .button-native::after {
+    background: var(--background-hover);
+
+    opacity: var(--background-hover-opacity);
+  }
+}
+
+
+// Button Colors
+// --------------------------------------------------
+
+// Solid Button with Color
+:host(.button-solid.ion-color) .button-native {
+  background: current-color(base);
+  color: current-color(contrast);
+}
+
+// Outline Button with Color
+:host(.button-outline.ion-color) .button-native {
+  border-color: current-color(base);
+
+  background: transparent;
+  color: current-color(base);
+}
+
+// Clear Button with Color
+:host(.button-clear.ion-color) .button-native {
+  background: transparent;
+  color: current-color(base);
 }
diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
index 140b6b4e39..51b8414437 100644
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -13,6 +13,9 @@ import { createColorClasses, openURL } from '../../utils/theme';
  * @slot icon-only - Should be used on an icon in a button that has no text.
  * @slot start - Content is placed to the left of the button text in LTR, and to the right in RTL.
  * @slot end - Content is placed to the right of the button text in LTR, and to the left in RTL.
+ *
+ * @part button - The native button or anchor tag that is rendered.
+ * @part button-inner - The span inside of the native button or anchor.
  */
 @Component({
   tag: 'ion-button',
@@ -218,8 +221,9 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
           disabled={disabled}
           onFocus={this.onFocus}
           onBlur={this.onBlur}
+          part="button"
         >
-          <span class="button-inner">
+          <span class="button-inner" part="button-inner">
             <slot name="icon-only"></slot>
             <slot name="start"></slot>
             <slot></slot>
diff --git a/core/src/components/button/readme.md b/core/src/components/button/readme.md
index a5171eeb97..7c1cef346e 100644
--- a/core/src/components/button/readme.md
+++ b/core/src/components/button/readme.md
@@ -252,28 +252,31 @@ export const ButtonExample: React.FC = () => (
 
 ## CSS Custom Properties
 
-| Name                     | Description                                                                                               |
-| ------------------------ | --------------------------------------------------------------------------------------------------------- |
-| `--background`           | Background of the button                                                                                  |
-| `--background-activated` | Background of the button when pressed                                                                     |
-| `--background-focused`   | Background of the button when focused with the tab key                                                    |
-| `--background-hover`     | Background of the button on hover                                                                         |
-| `--border-color`         | Border color of the button                                                                                |
-| `--border-radius`        | Border radius of the button                                                                               |
-| `--border-style`         | Border style of the button                                                                                |
-| `--border-width`         | Border width of the button                                                                                |
-| `--box-shadow`           | Box shadow of the button                                                                                  |
-| `--color`                | Text color of the button                                                                                  |
-| `--color-activated`      | Text color of the button when pressed                                                                     |
-| `--color-focused`        | Text color of the button when focused with the tab key                                                    |
-| `--color-hover`          | Text color of the button when hover                                                                       |
-| `--opacity`              | Opacity of the button                                                                                     |
-| `--padding-bottom`       | Bottom padding of the button                                                                              |
-| `--padding-end`          | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
-| `--padding-start`        | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
-| `--padding-top`          | Top padding of the button                                                                                 |
-| `--ripple-color`         | Color of the button ripple effect                                                                         |
-| `--transition`           | Transition of the button                                                                                  |
+| Name                             | Description                                                                                               |
+| -------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `--background`                   | Background of the button                                                                                  |
+| `--background-activated`         | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple. |
+| `--background-activated-opacity` | Opacity of the button when pressed                                                                        |
+| `--background-focused`           | Background of the button when focused with the tab key                                                    |
+| `--background-focused-opacity`   | Opacity of the button when focused with the tab key                                                       |
+| `--background-hover`             | Background of the button on hover                                                                         |
+| `--background-hover-opacity`     | Opacity of the background on hover                                                                        |
+| `--border-color`                 | Border color of the button                                                                                |
+| `--border-radius`                | Border radius of the button                                                                               |
+| `--border-style`                 | Border style of the button                                                                                |
+| `--border-width`                 | Border width of the button                                                                                |
+| `--box-shadow`                   | Box shadow of the button                                                                                  |
+| `--color`                        | Text color of the button                                                                                  |
+| `--color-activated`              | Text color of the button when pressed                                                                     |
+| `--color-focused`                | Text color of the button when focused with the tab key                                                    |
+| `--color-hover`                  | Text color of the button when hover                                                                       |
+| `--opacity`                      | Opacity of the button                                                                                     |
+| `--padding-bottom`               | Bottom padding of the button                                                                              |
+| `--padding-end`                  | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
+| `--padding-start`                | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
+| `--padding-top`                  | Top padding of the button                                                                                 |
+| `--ripple-color`                 | Color of the button ripple effect                                                                         |
+| `--transition`                   | Transition of the button                                                                                  |
 
 
 ## Dependencies
diff --git a/core/src/components/button/test/anchor/index.html b/core/src/components/button/test/anchor/index.html
index d073133707..56adf28a40 100644
--- a/core/src/components/button/test/anchor/index.html
+++ b/core/src/components/button/test/anchor/index.html
@@ -23,43 +23,43 @@
     <ion-content class="ion-padding" id="content" no-bounce>
       <p>
         <ion-button href="#">Default</ion-button>
-        <ion-button href="#" class="activated">Default.activated</ion-button>
+        <ion-button href="#" class="ion-activated">Default.activated</ion-button>
       </p>
       <p>
         <ion-button href="#" color="primary">Primary</ion-button>
-        <ion-button href="#" class="activated" color="primary">Primary.activated</ion-button>
+        <ion-button href="#" class="ion-activated" color="primary">Primary.activated</ion-button>
       </p>
       <p>
         <ion-button href="#" color="secondary">Secondary</ion-button>
-        <ion-button href="#" class="activated" color="secondary">Secondary.activated</ion-button>
+        <ion-button href="#" class="ion-activated" color="secondary">Secondary.activated</ion-button>
       </p>
       <p>
         <ion-button href="#" color="tertiary">Tertiary</ion-button>
-        <ion-button href="#" class="activated" color="tertiary">Tertiary.activated</ion-button>
+        <ion-button href="#" class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
       </p>
       <p>
         <ion-button href="#" color="success">Success</ion-button>
-        <ion-button href="#" class="activated" color="success">Success.activated</ion-button>
+        <ion-button href="#" class="ion-activated" color="success">Success.activated</ion-button>
       </p>
       <p>
         <ion-button href="#" color="warning">Warning</ion-button>
-        <ion-button href="#" class="activated" color="warning">Warning.activated</ion-button>
+        <ion-button href="#" class="ion-activated" color="warning">Warning.activated</ion-button>
       </p>
       <p>
         <ion-button href="#" color="danger">Danger</ion-button>
-        <ion-button href="#" class="activated" color="danger">Danger.activated</ion-button>
+        <ion-button href="#" class="ion-activated" color="danger">Danger.activated</ion-button>
       </p>
       <p>
         <ion-button href="#" color="light">Light</ion-button>
-        <ion-button href="#" class="activated" color="light">Light.activated</ion-button>
+        <ion-button href="#" class="ion-activated" color="light">Light.activated</ion-button>
       </p>
       <p>
         <ion-button href="#" color="medium">Medium</ion-button>
-        <ion-button href="#" class="activated" color="medium">Medium.activated</ion-button>
+        <ion-button href="#" class="ion-activated" color="medium">Medium.activated</ion-button>
       </p>
       <p>
         <ion-button href="#" color="dark">Dark</ion-button>
-        <ion-button href="#" class="activated" color="dark">Dark.activated</ion-button>
+        <ion-button href="#" class="ion-activated" color="dark">Dark.activated</ion-button>
       </p>
       <p>
         <ion-button href="#" disabled>Disabled</ion-button>
diff --git a/core/src/components/button/test/basic/index.html b/core/src/components/button/test/basic/index.html
index 453beff75c..8101cfb3c4 100644
--- a/core/src/components/button/test/basic/index.html
+++ b/core/src/components/button/test/basic/index.html
@@ -24,61 +24,61 @@
       <p>
         <ion-button>Default</ion-button>
         <ion-button class="ion-focused">Default.focused</ion-button>
-        <ion-button class="activated">Default.activated</ion-button>
+        <ion-button class="ion-activated">Default.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="primary">Primary</ion-button>
         <ion-button class="ion-focused" color="primary">Primary.focused</ion-button>
-        <ion-button class="activated" color="primary">Primary.activated</ion-button>
+        <ion-button class="ion-activated" color="primary">Primary.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="secondary">Secondary</ion-button>
         <ion-button class="ion-focused" color="secondary">Secondary.focused</ion-button>
-        <ion-button class="activated" color="secondary">Secondary.activated</ion-button>
+        <ion-button class="ion-activated" color="secondary">Secondary.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="tertiary">Tertiary</ion-button>
         <ion-button class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
-        <ion-button class="activated" color="tertiary">Tertiary.activated</ion-button>
+        <ion-button class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="success">Success</ion-button>
         <ion-button class="ion-focused" color="success">Success.focused</ion-button>
-        <ion-button class="activated" color="success">Success.activated</ion-button>
+        <ion-button class="ion-activated" color="success">Success.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="warning">Warning</ion-button>
         <ion-button class="ion-focused" color="warning">Warning.focused</ion-button>
-        <ion-button class="activated" color="warning">Warning.activated</ion-button>
+        <ion-button class="ion-activated" color="warning">Warning.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="danger">Danger</ion-button>
         <ion-button class="ion-focused" color="danger">Danger.focused</ion-button>
-        <ion-button class="activated" color="danger">Danger.activated</ion-button>
+        <ion-button class="ion-activated" color="danger">Danger.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="light">Light</ion-button>
         <ion-button class="ion-focused" color="light">Light.focused</ion-button>
-        <ion-button class="activated" color="light">Light.activated</ion-button>
+        <ion-button class="ion-activated" color="light">Light.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="medium">Medium</ion-button>
         <ion-button class="ion-focused" color="medium">Medium.focused</ion-button>
-        <ion-button class="activated" color="medium">Medium.activated</ion-button>
+        <ion-button class="ion-activated" color="medium">Medium.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="dark">Dark</ion-button>
         <ion-button class="ion-focused" color="dark">Dark.focused</ion-button>
-        <ion-button class="activated" color="dark">Dark.activated</ion-button>
+        <ion-button class="ion-activated" color="dark">Dark.activated</ion-button>
       </p>
 
       <p>
diff --git a/core/src/components/button/test/clear/index.html b/core/src/components/button/test/clear/index.html
index b8c3119cab..d116a981d1 100644
--- a/core/src/components/button/test/clear/index.html
+++ b/core/src/components/button/test/clear/index.html
@@ -23,72 +23,72 @@
     <ion-content class="ion-padding" id="content" no-bounce>
       <p>
         <ion-button fill="clear">Default</ion-button>
-        <ion-button fill="clear" class="activated">Default.activated</ion-button>
+        <ion-button fill="clear" class="ion-activated">Default.activated</ion-button>
         <ion-button fill="clear" class="ion-focused">Default.focused</ion-button>
-        <ion-button fill="clear" class="activated ion-focused">Default.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-activated ion-focused">Default.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="primary">Primary</ion-button>
-        <ion-button fill="clear" class="activated" color="primary">Primary.activated</ion-button>
+        <ion-button fill="clear" class="ion-activated" color="primary">Primary.activated</ion-button>
         <ion-button fill="clear" class="ion-focused" color="primary">Primary.focused</ion-button>
-        <ion-button fill="clear" class="activated ion-focused" color="primary">Primary.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-activated ion-focused" color="primary">Primary.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="secondary">Secondary</ion-button>
-        <ion-button fill="clear" class="activated" color="secondary">Secondary.activated</ion-button>
+        <ion-button fill="clear" class="ion-activated" color="secondary">Secondary.activated</ion-button>
         <ion-button fill="clear" class="ion-focused" color="secondary">Secondary.focused</ion-button>
-        <ion-button fill="clear" class="activated ion-focused" color="secondary">Secondary.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-activated ion-focused" color="secondary">Secondary.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="tertiary">Tertiary</ion-button>
-        <ion-button fill="clear" class="activated" color="tertiary">Tertiary.activated</ion-button>
+        <ion-button fill="clear" class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
         <ion-button fill="clear" class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
-        <ion-button fill="clear" class="activated ion-focused" color="tertiary">Tertiary.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-activated ion-focused" color="tertiary">Tertiary.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="success">Success</ion-button>
-        <ion-button fill="clear" class="activated" color="success">Success.activated</ion-button>
+        <ion-button fill="clear" class="ion-activated" color="success">Success.activated</ion-button>
         <ion-button fill="clear" class="ion-focused" color="success">Success.focused</ion-button>
-        <ion-button fill="clear" class="activated ion-focused" color="success">Success.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-activated ion-focused" color="success">Success.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="warning">Warning</ion-button>
-        <ion-button fill="clear" class="activated" color="warning">Warning.activated</ion-button>
+        <ion-button fill="clear" class="ion-activated" color="warning">Warning.activated</ion-button>
         <ion-button fill="clear" class="ion-focused" color="warning">Warning.focused</ion-button>
-        <ion-button fill="clear" class="activated ion-focused" color="warning">Warning.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-activated ion-focused" color="warning">Warning.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="danger">Danger</ion-button>
-        <ion-button fill="clear" class="activated" color="danger">Danger.activated</ion-button>
+        <ion-button fill="clear" class="ion-activated" color="danger">Danger.activated</ion-button>
         <ion-button fill="clear" class="ion-focused" color="danger">Danger.focused</ion-button>
-        <ion-button fill="clear" class="activated ion-focused" color="danger">Danger.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-activated ion-focused" color="danger">Danger.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="light">Light</ion-button>
-        <ion-button fill="clear" class="activated" color="light">Light.activated</ion-button>
+        <ion-button fill="clear" class="ion-activated" color="light">Light.activated</ion-button>
         <ion-button fill="clear" class="ion-focused" color="light">Light.focused</ion-button>
-        <ion-button fill="clear" class="activated ion-focused" color="light">Light.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-activated ion-focused" color="light">Light.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="medium">Medium</ion-button>
-        <ion-button fill="clear" class="activated" color="medium">Medium.activated</ion-button>
+        <ion-button fill="clear" class="ion-activated" color="medium">Medium.activated</ion-button>
         <ion-button fill="clear" class="ion-focused" color="medium">Medium.focused</ion-button>
-        <ion-button fill="clear" class="activated ion-focused" color="medium">Medium.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-activated ion-focused" color="medium">Medium.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="dark">Dark</ion-button>
-        <ion-button fill="clear" class="activated" color="dark">Dark.activated</ion-button>
+        <ion-button fill="clear" class="ion-activated" color="dark">Dark.activated</ion-button>
         <ion-button fill="clear" class="ion-focused" color="dark">Dark.focused</ion-button>
-        <ion-button fill="clear" class="activated ion-focused" color="dark">Dark.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-activated ion-focused" color="dark">Dark.activated.focused</ion-button>
       </p>
       <p>
         <ion-button fill="clear" disabled>Disabled</ion-button>
diff --git a/core/src/components/button/test/outline/index.html b/core/src/components/button/test/outline/index.html
index b347713a9b..0ac765ec0b 100644
--- a/core/src/components/button/test/outline/index.html
+++ b/core/src/components/button/test/outline/index.html
@@ -23,72 +23,72 @@
     <ion-content class="ion-padding" id="content" no-bounce>
       <p>
         <ion-button fill="outline">Default</ion-button>
-        <ion-button fill="outline" class="activated">Default.activated</ion-button>
+        <ion-button fill="outline" class="ion-activated">Default.activated</ion-button>
         <ion-button fill="outline" class="ion-focused">Default.focused</ion-button>
-        <ion-button fill="outline" class="activated ion-focused">Default.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-activated ion-focused">Default.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="primary">Primary</ion-button>
-        <ion-button fill="outline" class="activated" color="primary">Primary.activated</ion-button>
+        <ion-button fill="outline" class="ion-activated" color="primary">Primary.activated</ion-button>
         <ion-button fill="outline" class="ion-focused" color="primary">Primary.focused</ion-button>
-        <ion-button fill="outline" class="activated ion-focused" color="primary">Primary.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-activated ion-focused" color="primary">Primary.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="secondary">Secondary</ion-button>
-        <ion-button fill="outline" class="activated" color="secondary">Secondary.activated</ion-button>
+        <ion-button fill="outline" class="ion-activated" color="secondary">Secondary.activated</ion-button>
         <ion-button fill="outline" class="ion-focused" color="secondary">Secondary.focused</ion-button>
-        <ion-button fill="outline" class="activated ion-focused" color="secondary">Secondary.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-activated ion-focused" color="secondary">Secondary.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="tertiary">Tertiary</ion-button>
-        <ion-button fill="outline" class="activated" color="tertiary">Tertiary.activated</ion-button>
+        <ion-button fill="outline" class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
         <ion-button fill="outline" class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
-        <ion-button fill="outline" class="activated ion-focused" color="tertiary">Tertiary.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-activated ion-focused" color="tertiary">Tertiary.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="success">Success</ion-button>
-        <ion-button fill="outline" class="activated" color="success">Success.activated</ion-button>
+        <ion-button fill="outline" class="ion-activated" color="success">Success.activated</ion-button>
         <ion-button fill="outline" class="ion-focused" color="success">Success.focused</ion-button>
-        <ion-button fill="outline" class="activated ion-focused" color="success">Success.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-activated ion-focused" color="success">Success.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="warning">Warning</ion-button>
-        <ion-button fill="outline" class="activated" color="warning">Warning.activated</ion-button>
+        <ion-button fill="outline" class="ion-activated" color="warning">Warning.activated</ion-button>
         <ion-button fill="outline" class="ion-focused" color="warning">Warning.focused</ion-button>
-        <ion-button fill="outline" class="activated ion-focused" color="warning">Warning.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-activated ion-focused" color="warning">Warning.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="danger">Danger</ion-button>
-        <ion-button fill="outline" class="activated" color="danger">Danger.activated</ion-button>
+        <ion-button fill="outline" class="ion-activated" color="danger">Danger.activated</ion-button>
         <ion-button fill="outline" class="ion-focused" color="danger">Danger.focused</ion-button>
-        <ion-button fill="outline" class="activated ion-focused" color="danger">Danger.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-activated ion-focused" color="danger">Danger.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="light">Light</ion-button>
-        <ion-button fill="outline" class="activated" color="light">Light.activated</ion-button>
+        <ion-button fill="outline" class="ion-activated" color="light">Light.activated</ion-button>
         <ion-button fill="outline" class="ion-focused" color="light">Light.focused</ion-button>
-        <ion-button fill="outline" class="activated ion-focused" color="light">Light.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-activated ion-focused" color="light">Light.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="medium">Medium</ion-button>
-        <ion-button fill="outline" class="activated" color="medium">Medium.activated</ion-button>
+        <ion-button fill="outline" class="ion-activated" color="medium">Medium.activated</ion-button>
         <ion-button fill="outline" class="ion-focused" color="medium">Medium.focused</ion-button>
-        <ion-button fill="outline" class="activated ion-focused" color="medium">Medium.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-activated ion-focused" color="medium">Medium.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="dark">Dark</ion-button>
-        <ion-button fill="outline" class="activated" color="dark">Dark.activated</ion-button>
+        <ion-button fill="outline" class="ion-activated" color="dark">Dark.activated</ion-button>
         <ion-button fill="outline" class="ion-focused" color="dark">Dark.focused</ion-button>
-        <ion-button fill="outline" class="activated ion-focused" color="dark">Dark.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-activated ion-focused" color="dark">Dark.activated.focused</ion-button>
       </p>
       <p>
         <ion-button fill="outline" disabled>Disabled</ion-button>
diff --git a/core/src/components/button/test/standalone/index.html b/core/src/components/button/test/standalone/index.html
index e8e41bb42b..20e27eefdb 100644
--- a/core/src/components/button/test/standalone/index.html
+++ b/core/src/components/button/test/standalone/index.html
@@ -53,8 +53,8 @@
 
   <!-- Custom Colors -->
   <ion-button class="custom">custom</ion-button>
-  <ion-button class="custom activated ion-focused">custom.focused</ion-button>
-  <ion-button class="custom activated">custom.activated</ion-button>
+  <ion-button class="custom ion-activated ion-focused">custom.focused</ion-button>
+  <ion-button class="custom ion-activated">custom.activated</ion-button>
   <ion-button color="secondary" class="custom">custom w/ secondary</ion-button>
   <ion-button fill="clear" class="medium">custom medium</ion-button>
 
@@ -71,7 +71,7 @@
   <ion-toolbar>
     <ion-buttons slot="start">
       <ion-button class="custom">Custom</ion-button>
-      <ion-button class="custom activated">Custom.a</ion-button>
+      <ion-button class="custom ion-activated">Custom.a</ion-button>
     </ion-buttons>
     <ion-title>Bar</ion-title>
     <ion-buttons slot="end">
@@ -101,7 +101,7 @@
 
     .custom {
       --background: lightpink;
-      --background-hover: rgba(255, 182, 193, 0.5);
+      --background-hover: #ffb6c1;
       --background-activated: green;
       --color: #222;
       --color-activated: white;
@@ -110,7 +110,7 @@
 
     .medium {
       --color: #989aa2;
-      --background-hover: rgba(152, 154, 162, 0.4);
+      --background-hover: #989aa2;
     }
   </style>
 </body>
diff --git a/core/src/components/button/test/states/e2e.ts b/core/src/components/button/test/states/e2e.ts
new file mode 100644
index 0000000000..f25ab26fc4
--- /dev/null
+++ b/core/src/components/button/test/states/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('button: states', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/button/test/states?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/button/test/states/index.html b/core/src/components/button/test/states/index.html
new file mode 100644
index 0000000000..b804cd495e
--- /dev/null
+++ b/core/src/components/button/test/states/index.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Button - States</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/core.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <h3>Default</h3>
+      <p>
+        <ion-button>Default</ion-button>
+        <ion-button><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button shape="round">Round</ion-button>
+        <ion-button fill="outline">Outline</ion-button>
+        <ion-button fill="clear">Clear</ion-button>
+        <ion-button color="secondary">Default</ion-button>
+        <ion-button color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button color="danger" shape="round">Round</ion-button>
+        <ion-button color="warning" fill="outline">Outline</ion-button>
+        <ion-button color="dark" fill="clear">Clear</ion-button>
+      </p>
+
+      <h3>Focused</h3>
+      <p>
+        <ion-button class="ion-focused">Default</ion-button>
+        <ion-button class="ion-focused"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button class="ion-focused" shape="round">Round</ion-button>
+        <ion-button class="ion-focused" fill="outline">Outline</ion-button>
+        <ion-button class="ion-focused" fill="clear">Clear</ion-button>
+        <ion-button class="ion-focused" color="secondary">Default</ion-button>
+        <ion-button class="ion-focused" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button class="ion-focused" color="danger" shape="round">Round</ion-button>
+        <ion-button class="ion-focused" color="warning" fill="outline">Outline</ion-button>
+        <ion-button class="ion-focused" color="dark" fill="clear">Clear</ion-button>
+      </p>
+
+      <h3>Activated</h3>
+      <p>
+        <ion-button class="ion-activated">Default</ion-button>
+        <ion-button class="ion-activated"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button class="ion-activated" shape="round">Round</ion-button>
+        <ion-button class="ion-activated" fill="outline">Outline</ion-button>
+        <ion-button class="ion-activated" fill="clear">Clear</ion-button>
+        <ion-button class="ion-activated" color="secondary">Default</ion-button>
+        <ion-button class="ion-activated" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button class="ion-activated" color="danger" shape="round">Round</ion-button>
+        <ion-button class="ion-activated" color="warning" fill="outline">Outline</ion-button>
+        <ion-button class="ion-activated" color="dark" fill="clear">Clear</ion-button>
+      </p>
+
+      <h3>Custom</h3>
+      <p>
+        <ion-button class="custom">Default</ion-button>
+        <ion-button class="custom"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button class="custom" shape="round">Round</ion-button>
+        <ion-button class="custom" fill="outline">Outline</ion-button>
+        <ion-button class="custom" fill="clear">Clear</ion-button>
+        <ion-button class="custom" color="secondary">Default</ion-button>
+        <ion-button class="custom" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button class="custom" color="danger" shape="round">Round</ion-button>
+        <ion-button class="custom" color="warning" fill="outline">Outline</ion-button>
+        <ion-button class="custom" color="dark" fill="clear">Clear</ion-button>
+        <ion-button class="custom ion-focused">Default</ion-button>
+        <ion-button class="custom ion-focused"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button class="custom ion-focused" shape="round">Round</ion-button>
+        <ion-button class="custom ion-focused" fill="outline">Outline</ion-button>
+        <ion-button class="custom ion-focused" fill="clear">Clear</ion-button>
+        <ion-button class="custom ion-focused" color="secondary">Default</ion-button>
+        <ion-button class="custom ion-focused" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button class="custom ion-focused" color="danger" shape="round">Round</ion-button>
+        <ion-button class="custom ion-focused" color="warning" fill="outline">Outline</ion-button>
+        <ion-button class="custom ion-focused" color="dark" fill="clear">Clear</ion-button>
+        <ion-button class="custom ion-activated">Default</ion-button>
+        <ion-button class="custom ion-activated"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button class="custom ion-activated" shape="round">Round</ion-button>
+        <ion-button class="custom ion-activated" fill="outline">Outline</ion-button>
+        <ion-button class="custom ion-activated" fill="clear">Clear</ion-button>
+        <ion-button class="custom ion-activated" color="secondary">Default</ion-button>
+        <ion-button class="custom ion-activated" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button class="custom ion-activated" color="danger" shape="round">Round</ion-button>
+        <ion-button class="custom ion-activated" color="warning" fill="outline">Outline</ion-button>
+        <ion-button class="custom ion-activated" color="dark" fill="clear">Clear</ion-button>
+      </p>
+    </ion-content>
+  </ion-app>
+
+
+  <style>
+    .custom {
+      --background-hover: red;
+      --background-hover-opacity: 1;
+
+      --background-focused: green;
+      --background-activated: blue;
+    }
+
+    .custom:hover {
+      opacity: 1;
+    }
+
+    /* TODO should this inherit or users set all */
+    .custom {
+      --color: red;
+    }
+  </style>
+</body>
+</html>
diff --git a/core/src/components/button/test/toolbar/index.html b/core/src/components/button/test/toolbar/index.html
index de8ecc726f..c6cc303a93 100644
--- a/core/src/components/button/test/toolbar/index.html
+++ b/core/src/components/button/test/toolbar/index.html
@@ -99,15 +99,15 @@
 
       <ion-toolbar>
         <ion-buttons slot="secondary">
-          <ion-button class="activated">
+          <ion-button class="ion-activated">
             <ion-icon slot="icon-only" name="person-circle"></ion-icon>
           </ion-button>
-          <ion-button class="activated">
+          <ion-button class="ion-activated">
             <ion-icon slot="icon-only" name="search"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-buttons slot="primary">
-          <ion-button color="secondary" class="activated">
+          <ion-button color="secondary" class="ion-activated">
             <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
@@ -135,17 +135,17 @@
 
       <ion-toolbar>
         <ion-buttons slot="secondary">
-          <ion-button fill="solid" class="activated">
+          <ion-button fill="solid" class="ion-activated">
             <ion-icon slot="icon-only" name="person-circle"></ion-icon>
           </ion-button>
-          <ion-button fill="solid" class="activated">
+          <ion-button fill="solid" class="ion-activated">
             <ion-icon name="person-circle" slot="start"></ion-icon>
             Solid
           </ion-button>
         </ion-buttons>
         <ion-title>Solid Activated</ion-title>
         <ion-buttons slot="primary">
-          <ion-button fill="solid" shape="round" color="secondary" class="activated">
+          <ion-button fill="solid" shape="round" color="secondary" class="ion-activated">
             Help
             <ion-icon name="help-circle" slot="end"></ion-icon>
           </ion-button>
@@ -172,16 +172,16 @@
 
       <ion-toolbar>
         <ion-buttons slot="secondary">
-          <ion-button fill="outline" class="activated">
+          <ion-button fill="outline" class="ion-activated">
             <ion-icon slot="icon-only" name="person-circle"></ion-icon>
           </ion-button>
-          <ion-button fill="outline" class="activated">
+          <ion-button fill="outline" class="ion-activated">
             <ion-icon name="star" slot="start"></ion-icon>
             Star
           </ion-button>
         </ion-buttons>
         <ion-buttons slot="primary">
-          <ion-button color="secondary" fill="outline" class="activated">
+          <ion-button color="secondary" fill="outline" class="ion-activated">
             <ion-icon slot="icon-only" name="person-circle"></ion-icon>
           </ion-button>
         </ion-buttons>
diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss
index e06ac95bcc..3979d975da 100644
--- a/core/src/components/buttons/buttons.ios.scss
+++ b/core/src/components/buttons/buttons.ios.scss
@@ -29,27 +29,25 @@
 :host-context(.ion-color)::slotted(*) .button {
   --color: initial;
   --border-color: initial;
-  --background-focused: #{current-color(contrast, .1)};
-
+  --background-focused: #{current-color(contrast)};
 }
 
 :host-context(.ion-color)::slotted(*) .button-solid {
   --background: #{current-color(contrast)};
-  --background-activated: #{current-color(contrast, .8)};
-  --background-focused: #{current-color(contrast, .6)};
+  --background-focused: #000;
+  --background-focused-opacity: .12;
+  --background-activated: #000;
+  --background-activated-opacity: .12;
   --color: #{current-color(base)};
   --color-focused: #{current-color(base)};
 }
 
 :host-context(.ion-color)::slotted(*) .button-clear {
-  --background-focused: #{current-color(contrast, .1)};
   --color-activated: #{current-color(contrast)};
   --color-focused: #{current-color(contrast)};
 }
 
 :host-context(.ion-color)::slotted(*) .button-outline {
-  --background-activated: #{current-color(contrast)};
-  --background-focused: #{current-color(contrast, .1)};
   --color-activated: #{current-color(base)};
   --color-focused: #{current-color(contrast)};
 }
@@ -58,35 +56,39 @@
 // iOS Toolbar Button Clear
 // --------------------------------------------------
 
-:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-clear {
+:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-clear:not(.ion-color) {
   --color: #{var(--ion-toolbar-color, ion-color(primary, base))};
-  --color-activated: #{$toolbar-ios-color-activated};
   --color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
+  --background-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
 }
 
 
 // iOS Toolbar Button Outline
 // --------------------------------------------------
 
-:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-outline {
+:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-outline:not(.ion-color) {
   --color: #{var(--ion-toolbar-color, ion-color(primary, base))};
   --color-activated: #{var(--ion-toolbar-background, ion-color(primary, contrast))};
   --color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
   --border-color: #{var(--ion-toolbar-color, ion-color(primary, base))};
-  --background-activated: #{var(--ion-toolbar-color, ion-color(primary, base))};
+  --background-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
 }
 
 
 // iOS Toolbar Button Solid
 // --------------------------------------------------
 
-:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-solid {
+:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-solid:not(.ion-color) {
   --color: #{$toolbar-ios-background};
   --color-activated: #{$toolbar-ios-background};
   --color-focused: #{$toolbar-ios-background};
   --background: #{var(--ion-toolbar-color, ion-color(primary, base))};
-  --background-activated: #{var(--ion-toolbar-color-activated, ion-color(primary, shade))};
-  --background-focused: #{var(--ion-toolbar-color-activated, ion-color(primary, shade))};
+  --background-hover: #{var(--ion-toolbar-background, ion-color(primary, contrast))};
+  --background-hover-opacity: 0.1;
+  --background-focused: #000;
+  --background-focused-opacity: .12;
+  --background-activated: #000;
+  --background-activated-opacity: .12;
 }
 
 
diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss
index e9d994f24c..211448ef68 100644
--- a/core/src/components/buttons/buttons.md.scss
+++ b/core/src/components/buttons/buttons.md.scss
@@ -31,15 +31,16 @@
   --color: initial;
   --color-focused: #{current-color(contrast)};
   --color-hover: #{current-color(contrast)};
-  --background-hover: #{current-color(contrast, .08)};
-  --background-focused: #{current-color(contrast, .24)};
+  --background-activated: transparent;
+  --background-focused: #{current-color(contrast)};
+  --background-hover: #{current-color(contrast)};
 }
 
 :host-context(.ion-color)::slotted(*) .button-solid {
   --background: #{current-color(contrast)};
-  --background-activated: #{current-color(contrast)};
+  --background-activated: transparent;
   --background-focused: #{current-color(shade)};
-  --background-hover: #{current-color(tint)};
+  --background-hover: #{current-color(base)};
   --color: #{current-color(base)};
   --color-focused: #{current-color(base)};
   --color-hover: #{current-color(base)};
@@ -68,7 +69,7 @@
 
 
 ::slotted(*) .button {
-  --background-hover: rgba(66, 66, 66, 0.08);
+  --background-hover: currentColor;
 }
 
 // Material Design Toolbar Solid Button
@@ -78,9 +79,8 @@
   --color: #{$toolbar-md-background};
   --color-activated: #{$toolbar-md-background};
   --background: #{$toolbar-md-color};
-  --background-activated: #{$toolbar-md-color};
-  --background-focused: #{$toolbar-md-color-activated};
-  --background-hover: rgba(66, 66, 66, 0.92);
+  --background-activated: transparent;
+  --background-focused: currentColor;
 }
 
 
@@ -93,8 +93,9 @@
   --color-focused: #{$toolbar-md-color};
   --background: transparent;
   --background-activated: transparent;
+  --background-focused: currentColor;
+  --background-hover: currentColor;
   --border-color: #{$toolbar-md-color};
-  --background-focused: rgba(66, 66, 66, 0.1);
 }
 
 
@@ -106,7 +107,9 @@
   --color-focused: #{$toolbar-md-color};
   --color-activated: currentColor;
   --background: transparent;
-  --background-focused: rgba(66, 66, 66, 0.1);
+  --background-activated: transparent;
+  --background-focused: currentColor;
+  --background-hover: currentColor;
 }
 
 
diff --git a/core/src/components/card/card.ios.scss b/core/src/components/card/card.ios.scss
index e5ea78624d..64151b7260 100755
--- a/core/src/components/card/card.ios.scss
+++ b/core/src/components/card/card.ios.scss
@@ -20,6 +20,6 @@
   box-shadow: $card-ios-box-shadow;
 }
 
-:host(.activated) {
+:host(.ion-activated) {
   transform: #{$card-ios-transform-activated};
 }
\ No newline at end of file
diff --git a/core/src/components/card/readme.md b/core/src/components/card/readme.md
index da51fdf51b..224ede7925 100644
--- a/core/src/components/card/readme.md
+++ b/core/src/components/card/readme.md
@@ -40,9 +40,9 @@ sub-components to reflect this. Please see `ion-card-content`,
 </ion-card>
 
 <ion-card>
-  <ion-item href="#" class="activated">
+  <ion-item href="#" class="ion-activated">
     <ion-icon name="wifi" slot="start"></ion-icon>
-    <ion-label>Card Link Item 1 .activated</ion-label>
+    <ion-label>Card Link Item 1 activated</ion-label>
   </ion-item>
 
   <ion-item href="#">
@@ -50,9 +50,9 @@ sub-components to reflect this. Please see `ion-card-content`,
     <ion-label>Card Link Item 2</ion-label>
   </ion-item>
 
-  <ion-item class="activated">
+  <ion-item class="ion-activated">
     <ion-icon name="warning" slot="start"></ion-icon>
-    <ion-label>Card Button Item 1 .activated</ion-label>
+    <ion-label>Card Button Item 1 activated</ion-label>
   </ion-item>
 
   <ion-item>
@@ -97,9 +97,9 @@ export const CardExample: React.FC = () => (
     </IonCard>
 
     <IonCard>
-      <IonItem href="#" class="activated">
+      <IonItem href="#" class="ion-activated">
         <IonIcon name="wifi" slot="start" />
-        <IonLabel>Card Link Item 1 .activated</IonLabel>
+        <IonLabel>Card Link Item 1 activated</IonLabel>
       </IonItem>
 
       <IonItem href="#">
@@ -107,9 +107,9 @@ export const CardExample: React.FC = () => (
         <IonLabel>Card Link Item 2</IonLabel>
       </IonItem>
 
-      <IonItem class="activated">
+      <IonItem class="ion-activated">
         <IonIcon name="warning" slot="start" />
-        <IonLabel>Card Button Item 1 .activated</IonLabel>
+        <IonLabel>Card Button Item 1 activated</IonLabel>
       </IonItem>
 
       <IonItem>
@@ -152,9 +152,9 @@ export const CardExample: React.FC = () => (
   </ion-card>
 
   <ion-card>
-    <ion-item href="#" class="activated">
+    <ion-item href="#" class="ion-activated">
       <ion-icon name="wifi" slot="start"></ion-icon>
-      <ion-label>Card Link Item 1 .activated</ion-label>
+      <ion-label>Card Link Item 1 activated</ion-label>
     </ion-item>
 
     <ion-item href="#">
@@ -162,9 +162,9 @@ export const CardExample: React.FC = () => (
       <ion-label>Card Link Item 2</ion-label>
     </ion-item>
 
-    <ion-item class="activated">
+    <ion-item class="ion-activated">
       <ion-icon name="warning" slot="start"></ion-icon>
-      <ion-label>Card Button Item 1 .activated</ion-label>
+      <ion-label>Card Button Item 1 activated</ion-label>
     </ion-item>
 
     <ion-item>
diff --git a/core/src/components/card/test/basic/index.html b/core/src/components/card/test/basic/index.html
index a6904804f4..5b4f57d7d7 100644
--- a/core/src/components/card/test/basic/index.html
+++ b/core/src/components/card/test/basic/index.html
@@ -85,9 +85,9 @@
 
       <ion-card>
         <ion-list lines="none">
-          <ion-item href="#" class="activated">
+          <ion-item href="#" class="ion-activated">
             <ion-icon name="wifi" slot="start"></ion-icon>
-            <ion-label>Link Item .activated</ion-label>
+            <ion-label>Link Item activated</ion-label>
             <ion-note>More</ion-note>
           </ion-item>
 
@@ -97,9 +97,9 @@
             <ion-note>More</ion-note>
           </ion-item>
 
-          <ion-item button class="activated">
+          <ion-item button class="ion-activated">
             <ion-icon name="warning" slot="start"></ion-icon>
-            <ion-label>Button Item .activated</ion-label>
+            <ion-label>Button Item activated</ion-label>
             <ion-note>More</ion-note>
           </ion-item>
 
diff --git a/core/src/components/card/test/translucent/index.html b/core/src/components/card/test/translucent/index.html
index f4d4704c37..6bafc454b6 100644
--- a/core/src/components/card/test/translucent/index.html
+++ b/core/src/components/card/test/translucent/index.html
@@ -115,7 +115,7 @@
               </ion-button>
             </ion-col>
             <ion-col class="ion-no-padding ion-text-right">
-              <ion-button fill="clear" size="small" class="activated">
+              <ion-button fill="clear" size="small" class="ion-activated">
                 <ion-icon slot="start" name="share"></ion-icon>
                 Activated
               </ion-button>
diff --git a/core/src/components/card/usage/angular.md b/core/src/components/card/usage/angular.md
index 094bfc7f87..d867acb0d0 100644
--- a/core/src/components/card/usage/angular.md
+++ b/core/src/components/card/usage/angular.md
@@ -25,9 +25,9 @@
 </ion-card>
 
 <ion-card>
-  <ion-item href="#" class="activated">
+  <ion-item href="#" class="ion-activated">
     <ion-icon name="wifi" slot="start"></ion-icon>
-    <ion-label>Card Link Item 1 .activated</ion-label>
+    <ion-label>Card Link Item 1 activated</ion-label>
   </ion-item>
 
   <ion-item href="#">
@@ -35,9 +35,9 @@
     <ion-label>Card Link Item 2</ion-label>
   </ion-item>
 
-  <ion-item class="activated">
+  <ion-item class="ion-activated">
     <ion-icon name="warning" slot="start"></ion-icon>
-    <ion-label>Card Button Item 1 .activated</ion-label>
+    <ion-label>Card Button Item 1 activated</ion-label>
   </ion-item>
 
   <ion-item>
diff --git a/core/src/components/card/usage/javascript.md b/core/src/components/card/usage/javascript.md
index 094bfc7f87..d867acb0d0 100644
--- a/core/src/components/card/usage/javascript.md
+++ b/core/src/components/card/usage/javascript.md
@@ -25,9 +25,9 @@
 </ion-card>
 
 <ion-card>
-  <ion-item href="#" class="activated">
+  <ion-item href="#" class="ion-activated">
     <ion-icon name="wifi" slot="start"></ion-icon>
-    <ion-label>Card Link Item 1 .activated</ion-label>
+    <ion-label>Card Link Item 1 activated</ion-label>
   </ion-item>
 
   <ion-item href="#">
@@ -35,9 +35,9 @@
     <ion-label>Card Link Item 2</ion-label>
   </ion-item>
 
-  <ion-item class="activated">
+  <ion-item class="ion-activated">
     <ion-icon name="warning" slot="start"></ion-icon>
-    <ion-label>Card Button Item 1 .activated</ion-label>
+    <ion-label>Card Button Item 1 activated</ion-label>
   </ion-item>
 
   <ion-item>
diff --git a/core/src/components/card/usage/react.md b/core/src/components/card/usage/react.md
index 3af620c155..2c0b112413 100644
--- a/core/src/components/card/usage/react.md
+++ b/core/src/components/card/usage/react.md
@@ -30,9 +30,9 @@ export const CardExample: React.FC = () => (
     </IonCard>
 
     <IonCard>
-      <IonItem href="#" class="activated">
+      <IonItem href="#" class="ion-activated">
         <IonIcon name="wifi" slot="start" />
-        <IonLabel>Card Link Item 1 .activated</IonLabel>
+        <IonLabel>Card Link Item 1 activated</IonLabel>
       </IonItem>
 
       <IonItem href="#">
@@ -40,9 +40,9 @@ export const CardExample: React.FC = () => (
         <IonLabel>Card Link Item 2</IonLabel>
       </IonItem>
 
-      <IonItem class="activated">
+      <IonItem class="ion-activated">
         <IonIcon name="warning" slot="start" />
-        <IonLabel>Card Button Item 1 .activated</IonLabel>
+        <IonLabel>Card Button Item 1 activated</IonLabel>
       </IonItem>
 
       <IonItem>
diff --git a/core/src/components/card/usage/vue.md b/core/src/components/card/usage/vue.md
index 2e52aa4333..0e5aa1575b 100644
--- a/core/src/components/card/usage/vue.md
+++ b/core/src/components/card/usage/vue.md
@@ -26,9 +26,9 @@
   </ion-card>
 
   <ion-card>
-    <ion-item href="#" class="activated">
+    <ion-item href="#" class="ion-activated">
       <ion-icon name="wifi" slot="start"></ion-icon>
-      <ion-label>Card Link Item 1 .activated</ion-label>
+      <ion-label>Card Link Item 1 activated</ion-label>
     </ion-item>
 
     <ion-item href="#">
@@ -36,9 +36,9 @@
       <ion-label>Card Link Item 2</ion-label>
     </ion-item>
 
-    <ion-item class="activated">
+    <ion-item class="ion-activated">
       <ion-icon name="warning" slot="start"></ion-icon>
-      <ion-label>Card Button Item 1 .activated</ion-label>
+      <ion-label>Card Button Item 1 activated</ion-label>
     </ion-item>
 
     <ion-item>
diff --git a/core/src/components/chip/chip.scss b/core/src/components/chip/chip.scss
index 980b6e5ac2..0a3a8377ca 100644
--- a/core/src/components/chip/chip.scss
+++ b/core/src/components/chip/chip.scss
@@ -50,7 +50,7 @@
   background: current-color(base, .12);
 }
 
-:host(.ion-color.activated) {
+:host(.ion-color.ion-activated) {
   background: current-color(base, .16);
 }
 
@@ -78,7 +78,7 @@
   background: rgba(0, 0, 0, .04);
 }
 
-:host(.chip-outline.activated:not(.ion-color)) {
+:host(.chip-outline.ion-activated:not(.ion-color)) {
   background: rgba(0, 0, 0, .08);
 }
 
@@ -135,7 +135,7 @@
 // Chip: Activated
 // ---------------------------------------------
 
-:host(.activated) {
+:host(.ion-activated) {
   --background: #{rgba($text-color-rgb, .20)};
 }
 
diff --git a/core/src/components/chip/test/basic/index.html b/core/src/components/chip/test/basic/index.html
index e0c7da0155..a6faa33263 100644
--- a/core/src/components/chip/test/basic/index.html
+++ b/core/src/components/chip/test/basic/index.html
@@ -4,12 +4,14 @@
 <head>
   <meta charset="UTF-8">
   <title>Chip - Basic</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../scripts/testing/scripts.js"></script>
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+</head>
 
 <body>
   <ion-app>
@@ -22,77 +24,81 @@
 
     <ion-content class="ion-padding" id="content" style="text-align: center">
 
-        <h2>Basic Chips</h2>
-        <ion-chip>
-          <ion-label>Default</ion-label>
-        </ion-chip>
-        <ion-chip style="border-radius: 4px;">
-          <ion-label>Border Radius</ion-label>
-        </ion-chip>
-        <ion-chip>
-          <ion-icon name="checkmark-circle"></ion-icon>
-          <ion-label>With Icon</ion-label>
-        </ion-chip>
-        <ion-chip>
-          <ion-avatar>
-            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
-          </ion-avatar>
-          <ion-label>With Avatar</ion-label>
-        </ion-chip>
-        <ion-chip>
-          <ion-avatar>
-            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
-          </ion-avatar>
-          <ion-label>With Icon and Avatar</ion-label>
-          <ion-icon name="close-circle"></ion-icon>
-        </ion-chip>
+      <h2>Basic Chips</h2>
+      <ion-chip>
+        <ion-label>Default</ion-label>
+      </ion-chip>
+      <ion-chip style="border-radius: 4px;">
+        <ion-label>Border Radius</ion-label>
+      </ion-chip>
+      <ion-chip>
+        <ion-icon name="checkmark-circle"></ion-icon>
+        <ion-label>With Icon</ion-label>
+      </ion-chip>
+      <ion-chip>
+        <ion-avatar>
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+        </ion-avatar>
+        <ion-label>With Avatar</ion-label>
+      </ion-chip>
+      <ion-chip>
+        <ion-avatar>
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+        </ion-avatar>
+        <ion-label>With Icon and Avatar</ion-label>
+        <ion-icon name="close-circle"></ion-icon>
+      </ion-chip>
 
-        <h2>Color Chips</h2>
-        <ion-chip color="primary">
-          <ion-label>Primary</ion-label>
-        </ion-chip>
-        <ion-chip color="danger">
-          <ion-label>Danger</ion-label>
-        </ion-chip>
-        <ion-chip color="tertiary">
-          <ion-icon name="checkmark-circle"></ion-icon>
-          <ion-label>Tertiary with Icon</ion-label>
-        </ion-chip>
-        <ion-chip color="primary">
-          <ion-avatar>
-            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
-          </ion-avatar>
-          <ion-label>Primary with Avatar</ion-label>
-        </ion-chip>
-        <ion-chip color="success">
-          <ion-label>Success with Icon</ion-label>
-          <ion-icon name="calendar"></ion-icon>
-        </ion-chip>
+      <h2>Color Chips</h2>
+      <ion-chip color="primary">
+        <ion-label>Primary</ion-label>
+      </ion-chip>
+      <ion-chip color="danger">
+        <ion-label>Danger</ion-label>
+      </ion-chip>
+      <ion-chip color="tertiary">
+        <ion-icon name="checkmark-circle"></ion-icon>
+        <ion-label>Tertiary with Icon</ion-label>
+      </ion-chip>
+      <ion-chip color="primary">
+        <ion-avatar>
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+        </ion-avatar>
+        <ion-label>Primary with Avatar</ion-label>
+      </ion-chip>
+      <ion-chip color="success">
+        <ion-label>Success with Icon</ion-label>
+        <ion-icon name="calendar"></ion-icon>
+      </ion-chip>
 
-        <h2>Outline Chips</h2>
-        <ion-chip outline>
-          <ion-label>Outline</ion-label>
-        </ion-chip>
-        <ion-chip outline color="danger">
-          <ion-label>Danger Outline</ion-label>
-        </ion-chip>
-        <ion-chip outline color="secondary">
-          <ion-icon name="checkmark-circle"></ion-icon>
-          <ion-label>Secondary Outline with Icon</ion-label>
-        </ion-chip>
-        <ion-chip outline color="primary">
-          <ion-label>Primary Outline with Avatar</ion-label>
-          <ion-avatar>
-            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
-          </ion-avatar>
-        </ion-chip>
-        <ion-chip outline>
-          <ion-icon name="git-pull-request"></ion-icon>
-          <ion-label>Outline with Icon and Avatar</ion-label>
-          <ion-icon name="close-circle"></ion-icon>
-        </ion-chip>
+      <h2>Outline Chips</h2>
+      <ion-chip outline>
+        <ion-label>Outline</ion-label>
+      </ion-chip>
+      <ion-chip outline color="danger">
+        <ion-label>Danger Outline</ion-label>
+      </ion-chip>
+      <ion-chip outline color="secondary">
+        <ion-icon name="checkmark-circle"></ion-icon>
+        <ion-label>Secondary Outline with Icon</ion-label>
+      </ion-chip>
+      <ion-chip outline color="primary">
+        <ion-label>Primary Outline with Avatar</ion-label>
+        <ion-avatar>
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+        </ion-avatar>
+      </ion-chip>
+      <ion-chip outline>
+        <ion-icon name="git-pull-request"></ion-icon>
+        <ion-label>Outline with Icon and Avatar</ion-label>
+        <ion-icon name="close-circle"></ion-icon>
+      </ion-chip>
 
-      </ion-content>
+    </ion-content>
   </ion-app>
 </body>
 
diff --git a/core/src/components/chip/test/states/e2e.ts b/core/src/components/chip/test/states/e2e.ts
new file mode 100644
index 0000000000..b410c5869a
--- /dev/null
+++ b/core/src/components/chip/test/states/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('chip: states', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/chip/test/states?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/chip/test/states/index.html b/core/src/components/chip/test/states/index.html
new file mode 100644
index 0000000000..7c47e2d3cf
--- /dev/null
+++ b/core/src/components/chip/test/states/index.html
@@ -0,0 +1,285 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Chip - States</title>
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <h3>Default</h3>
+      <p>
+        <ion-chip>
+          <ion-label>Default</ion-label>
+        </ion-chip>
+        <ion-chip style="border-radius: 4px;">
+          <ion-label>Border Radius</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>With Icon</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+          </ion-avatar>
+          <ion-label>With Avatar</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+          </ion-avatar>
+          <ion-label>With Icon and Avatar</ion-label>
+          <ion-icon name="close-circle"></ion-icon>
+        </ion-chip>
+      </p>
+      <p>
+        <ion-chip class="ion-focused">
+          <ion-label>Default</ion-label>
+        </ion-chip>
+        <ion-chip style="border-radius: 4px;" class="ion-focused">
+          <ion-label>Border Radius</ion-label>
+        </ion-chip>
+        <ion-chip class="ion-focused">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>With Icon</ion-label>
+        </ion-chip>
+        <ion-chip class="ion-focused">
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+          </ion-avatar>
+          <ion-label>With Avatar</ion-label>
+        </ion-chip>
+        <ion-chip class="ion-focused">
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+          </ion-avatar>
+          <ion-label>With Icon and Avatar</ion-label>
+          <ion-icon name="close-circle"></ion-icon>
+        </ion-chip>
+      </p>
+
+      <h3>Colors</h3>
+      <p>
+        <ion-chip color="primary">
+          <ion-label>Primary</ion-label>
+        </ion-chip>
+        <ion-chip color="secondary">
+          <ion-label>Secondary</ion-label>
+        </ion-chip>
+        <ion-chip color="tertiary">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Tertiary with Icon</ion-label>
+        </ion-chip>
+        <ion-chip color="success">
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+          </ion-avatar>
+          <ion-label>Success with Avatar</ion-label>
+        </ion-chip>
+        <ion-chip color="warning">
+          <ion-label>Warning with Icon</ion-label>
+          <ion-icon name="calendar"></ion-icon>
+        </ion-chip>
+        <ion-chip color="danger">
+          <ion-label>Danger</ion-label>
+        </ion-chip>
+        <ion-chip color="light">
+          <ion-label>Light</ion-label>
+        </ion-chip>
+        <ion-chip color="medium">
+          <ion-label>Medium</ion-label>
+        </ion-chip>
+        <ion-chip color="dark">
+          <ion-label>Dark</ion-label>
+        </ion-chip>
+      </p>
+      <p>
+        <ion-chip color="primary" class="ion-focused">
+          <ion-label>Primary</ion-label>
+        </ion-chip>
+        <ion-chip color="secondary" class="ion-focused">
+          <ion-label>Secondary</ion-label>
+        </ion-chip>
+        <ion-chip color="tertiary" class="ion-focused">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Tertiary with Icon</ion-label>
+        </ion-chip>
+        <ion-chip color="success" class="ion-focused">
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+          </ion-avatar>
+          <ion-label>Success with Avatar</ion-label>
+        </ion-chip>
+        <ion-chip color="warning" class="ion-focused">
+          <ion-label>Warning with Icon</ion-label>
+          <ion-icon name="calendar"></ion-icon>
+        </ion-chip>
+        <ion-chip color="danger" class="ion-focused">
+          <ion-label>Danger</ion-label>
+        </ion-chip>
+        <ion-chip color="light" class="ion-focused">
+          <ion-label>Light</ion-label>
+        </ion-chip>
+        <ion-chip color="medium" class="ion-focused">
+          <ion-label>Medium</ion-label>
+        </ion-chip>
+        <ion-chip color="dark" class="ion-focused">
+          <ion-label>Dark</ion-label>
+        </ion-chip>
+      </p>
+
+      <h3>Outline</h3>
+
+      <p>
+        <ion-chip outline>
+          <ion-label>Outline</ion-label>
+        </ion-chip>
+        <ion-chip outline color="danger">
+          <ion-label>Danger Outline</ion-label>
+        </ion-chip>
+        <ion-chip outline color="secondary">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Secondary Outline with Icon</ion-label>
+        </ion-chip>
+        <ion-chip outline color="primary">
+          <ion-label>Primary Outline with Avatar</ion-label>
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+          </ion-avatar>
+        </ion-chip>
+        <ion-chip outline>
+          <ion-icon name="git-pull-request"></ion-icon>
+          <ion-label>Outline with Icon and Avatar</ion-label>
+          <ion-icon name="close-circle"></ion-icon>
+        </ion-chip>
+      </p>
+      <p>
+        <ion-chip outline class="ion-focused">
+          <ion-label>Outline</ion-label>
+        </ion-chip>
+        <ion-chip outline color="danger" class="ion-focused">
+          <ion-label>Danger Outline</ion-label>
+        </ion-chip>
+        <ion-chip outline color="secondary" class="ion-focused">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Secondary Outline with Icon</ion-label>
+        </ion-chip>
+        <ion-chip outline color="primary" class="ion-focused">
+          <ion-label>Primary Outline with Avatar</ion-label>
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+          </ion-avatar>
+        </ion-chip>
+        <ion-chip outline class="ion-focused">
+          <ion-icon name="git-pull-request"></ion-icon>
+          <ion-label>Outline with Icon and Avatar</ion-label>
+          <ion-icon name="close-circle"></ion-icon>
+        </ion-chip>
+      </p>
+
+      <h3>Custom</h3>
+
+      <!-- Custom Font -->
+      <p>
+        <ion-chip class="wide" text="wide">
+          <ion-icon name="add"></ion-icon>
+        </ion-chip>
+        <ion-chip class="wide ion-focused" text="wide">
+          <ion-icon name="add"></ion-icon>
+        </ion-chip>
+      </p>
+
+      <!-- Custom Colors -->
+      <p>
+        <ion-chip class="custom">
+          <ion-icon name="add"></ion-icon>
+        </ion-chip>
+        <ion-chip color="secondary" class="custom">
+          <ion-icon name="add"></ion-icon>
+        </ion-chip>
+        <ion-chip class="custom ion-focused">
+          <ion-icon name="add"></ion-icon>
+        </ion-chip>
+        <ion-chip color="secondary" class="custom ion-focused">
+          <ion-icon name="add"></ion-icon>
+        </ion-chip>
+      </p>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    var buttons = document.querySelectorAll('ion-chip');
+
+    for (var i = 0; i < buttons.length; i++) {
+      buttons[i].addEventListener('click', (event) => onClick(event));
+    }
+
+    function onClick(ev) {
+      console.log("clicked the button", ev.target.innerText);
+    }
+  </script>
+
+  <style>
+    h3 {
+      padding-left: 16px;
+    }
+
+    p {
+      padding-left: 8px;
+    }
+
+    ion-chip {
+      display: inline-block !important;
+      vertical-align: middle;
+    }
+
+    .wide {
+      --background: #d1f3ff;
+      --background-hover: #add8e6;
+      --background-focused: #84c5db;
+
+      height: 50px;
+      width: 150px;
+    }
+
+    .custom {
+      --background: #ffdde2;
+      --background-hover: #fcc6ce;
+      --background-focused: lightpink;
+      --color: rgb(214, 60, 235);
+      --border-radius: 10px;
+      --padding-start: 10px;
+      --padding-end: 10px;
+    }
+
+    .custom:hover {
+      opacity: 1;
+    }
+
+    .themed {
+      --ion-toolbar-background: #222;
+      --ion-toolbar-color: #ddd;
+    }
+
+  </style>
+</body>
+
+</html>
diff --git a/core/src/components/fab-button/fab-button.ios.scss b/core/src/components/fab-button/fab-button.ios.scss
index 178b7a892b..a713815b35 100755
--- a/core/src/components/fab-button/fab-button.ios.scss
+++ b/core/src/components/fab-button/fab-button.ios.scss
@@ -7,7 +7,11 @@
 :host {
   --background: #{$fab-ios-background-color};
   --background-activated: #{$fab-ios-background-color-activated};
-  --background-focused: var(--background-activated);
+  --background-focused: #{ion-color(primary, shade)};
+  --background-hover: #{ion-color(primary, tint)};
+  --background-activated-opacity: 1;
+  --background-focused-opacity: 1;
+  --background-hover-opacity: 1;
   --color: #{$fab-ios-text-color};
   --color-activated: #{$fab-ios-text-color};
   --color-focused: var(--color-activated);
@@ -15,7 +19,7 @@
   --transition: #{$fab-ios-transition};
 }
 
-:host(.activated) {
+:host(.ion-activated) {
   --box-shadow: #{$fab-ios-box-shadow-activated};
   --transform: #{$fab-ios-transform};
   --transition: #{$fab-ios-transition-activated};
@@ -46,6 +50,34 @@
 }
 
 
+// FAB Button: Color
+// --------------------------------------------------
+
+:host(.ion-color.ion-focused) .button-native::after {
+  background: #{current-color(shade)};
+}
+
+// Focused/Activated Button with Color
+:host(.ion-color.ion-focused) .button-native,
+:host(.ion-color.ion-activated) .button-native {
+  color: #{current-color(contrast)};
+
+  &::after {
+    background: #{current-color(shade)};
+  }
+}
+
+@media (any-hover: hover) {
+  :host(.ion-color:hover) .button-native {
+    color: #{current-color(contrast)};
+
+    &::after {
+      background: #{current-color(tint)};
+    }
+  }
+}
+
+
 // Translucent FAB buttons
 // --------------------------------------------------
 
@@ -79,7 +111,7 @@
   }
 
   :host(.ion-color.ion-focused.fab-button-translucent) .button-native,
-  :host(.ion-color.activated.fab-button-translucent) .button-native {
+  :host(.ion-color.ion-activated.fab-button-translucent) .button-native {
     background: #{current-color(base)};
   }
 }
\ No newline at end of file
diff --git a/core/src/components/fab-button/fab-button.md.scss b/core/src/components/fab-button/fab-button.md.scss
index ebdca4507e..6da2493062 100755
--- a/core/src/components/fab-button/fab-button.md.scss
+++ b/core/src/components/fab-button/fab-button.md.scss
@@ -6,8 +6,12 @@
 
 :host {
   --background: #{$fab-md-background-color};
-  --background-activated: var(--background);
-  --background-focused: var(--background-activated);
+  --background-activated: transparent;
+  --background-focused: currentColor;
+  --background-hover: currentColor;
+  --background-activated-opacity: 0;
+  --background-focused-opacity: .24;
+  --background-hover-opacity: .08;
   --color: #{$fab-md-text-color};
   --color-activated: #{$fab-md-text-color};
   --color-focused: var(--color-activated);
@@ -21,7 +25,7 @@
   };
 }
 
-:host(.activated) {
+:host(.ion-activated) {
   --box-shadow: #{$fab-md-box-shadow-activated};
 }
 
@@ -39,11 +43,41 @@
   --color-activated: #{$fab-md-list-button-text-color};
   --color-focused: var(--color-activated);
   --background: #{$fab-md-list-button-background-color};
-  --background-activated: #{$fab-md-list-button-background-color-activated};
-  --background-focused: var(--background-activated);
+  --background-activated: transparent;
+  --background-focused: #{$fab-md-list-button-background-color-activated};
   --background-hover: #{$fab-md-list-button-background-color-hover};
 }
 
 :host(.fab-button-in-list) ::slotted(ion-icon) {
   font-size: $fab-md-list-button-icon-font-size;
 }
+
+
+// FAB Button: Color
+// --------------------------------------------------
+
+// Focused Button with Color
+:host(.ion-color.ion-focused) .button-native {
+  color: #{current-color(contrast)};
+
+  &::after {
+    background: #{current-color(contrast)};
+  }
+}
+:host(.ion-color.ion-activated) .button-native {
+  color: #{current-color(contrast)};
+
+  &::after {
+    background: transparent;
+  }
+}
+
+@media (any-hover: hover) {
+  :host(.ion-color:hover) .button-native {
+    color: #{current-color(contrast)};
+
+    &::after {
+      background: #{current-color(contrast)};
+    }
+  }
+}
\ No newline at end of file
diff --git a/core/src/components/fab-button/fab-button.md.vars.scss b/core/src/components/fab-button/fab-button.md.vars.scss
index 2c936f002c..5c5e6c2d52 100755
--- a/core/src/components/fab-button/fab-button.md.vars.scss
+++ b/core/src/components/fab-button/fab-button.md.vars.scss
@@ -13,7 +13,7 @@ $fab-md-box-shadow-activated:                     0 7px 8px -4px rgba(0, 0, 0, .
 $fab-md-background-color:                         ion-color(primary, base) !default;
 
 /// @prop - Background color of the activated button
-$fab-md-background-color-activated:               ion-color(primary, shade) !default;
+$fab-md-background-color-activated:               ion-color(primary, contrast) !default;
 
 /// @prop - Text color of the button
 $fab-md-text-color:                               ion-color(primary, contrast) !default;
diff --git a/core/src/components/fab-button/fab-button.scss b/core/src/components/fab-button/fab-button.scss
index 4ca8ec024c..6edfa82862 100755
--- a/core/src/components/fab-button/fab-button.scss
+++ b/core/src/components/fab-button/fab-button.scss
@@ -6,9 +6,12 @@
 :host {
   /**
    * @prop --background: Background of the button
-   * @prop --background-activated: Background of the button when pressed
+   * @prop --background-activated: Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.
+   * @prop --background-activated-opacity: Opacity of the button background when pressed
    * @prop --background-focused: Background of the button when focused with the tab key
+   * @prop --background-focused-opacity: Opacity of the button background when focused with the tab key
    * @prop --background-hover: Background of the button on hover
+   * @prop --background-hover-opacity: Opacity of the button background on hover
    *
    * @prop --color: Text color of the button
    * @prop --color-activated: Text color of the button when pressed
@@ -32,7 +35,8 @@
    * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
    */
   --color-hover: #{var(--color)};
-  --background-hover: #{ion-color(primary, tint)};
+  --background-hover: #{ion-color(primary, contrast)};
+  --background-hover-opacity: .08;
   --transition: background-color, opacity 100ms linear;
   --ripple-color: currentColor;
   --border-radius: #{$fab-border-radius};
@@ -101,6 +105,10 @@
   line-height: 1;
 }
 
+.button-native::after {
+  @include button-state();
+}
+
 .button-inner {
   @include position(0, 0, null, 0);
 
@@ -116,15 +124,8 @@
 
   transition: all ease-in-out 300ms;
   transition-property: transform, opacity;
-}
 
-
-// FAB Button: Color
-// --------------------------------------------------
-
-:host(.ion-color) .button-native {
-  background: #{current-color(base)};
-  color: #{current-color(contrast)};
+  z-index: 1;
 }
 
 
@@ -132,13 +133,8 @@
 // --------------------------------------------------
 
 :host(.fab-button-disabled) {
-  opacity: .5;
-
-  pointer-events: none;
-}
-
-:host(.fab-button-disabled) .button-native {
   cursor: default;
+  opacity: .5;
   pointer-events: none;
 }
 
@@ -148,41 +144,42 @@
 
 @media (any-hover: hover) {
   :host(:hover) .button-native {
-    background: var(--background-hover);
     color: var(--color-hover);
-  }
 
-  :host(.ion-color:hover) .button-native {
-    background: #{current-color(tint)};
-    color: #{current-color(contrast)};
+    &::after {
+      background: var(--background-hover);
+
+      opacity: var(--background-hover-opacity);
+    }
   }
 }
 
+
 // FAB Button: Focused
 // --------------------------------------------------
 
 :host(.ion-focused) .button-native {
-  background: var(--background-focused);
   color: var(--color-focused);
+
+  &::after {
+    background: var(--background-focused);
+
+    opacity: var(--background-focused-opacity);
+  }
 }
 
-:host(.ion-color.ion-focused) .button-native {
-  background: #{current-color(shade)};
-}
 
 // FAB Button: Activated
 // --------------------------------------------------
 
-:host(.activated) .button-native {
-  background: var(--background-activated);
+:host(.ion-activated) .button-native {
   color: var(--color-activated);
-}
 
-// Focused/Activated Button with Color
-:host(.ion-color.ion-focused) .button-native,
-:host(.ion-color.activated) .button-native {
-  background: #{current-color(shade)};
-  color: #{current-color(contrast)};
+  &::after {
+    background: var(--background-activated);
+
+    opacity: var(--background-activated-opacity);
+  }
 }
 
 
@@ -252,4 +249,13 @@ ion-ripple-effect {
   :host(.fab-button-translucent) .button-native {
     backdrop-filter: var(--backdrop-filter);
   }
-}
\ No newline at end of file
+}
+
+
+// FAB Button: Color
+// --------------------------------------------------
+
+:host(.ion-color) .button-native {
+  background: #{current-color(base)};
+  color: #{current-color(contrast)};
+}
diff --git a/core/src/components/fab-button/readme.md b/core/src/components/fab-button/readme.md
index e6e1d76701..2d2e5acc7d 100644
--- a/core/src/components/fab-button/readme.md
+++ b/core/src/components/fab-button/readme.md
@@ -125,27 +125,30 @@ export const FabButtonExample: React.FC = () => (
 
 ## CSS Custom Properties
 
-| Name                     | Description                                                                                               |
-| ------------------------ | --------------------------------------------------------------------------------------------------------- |
-| `--background`           | Background of the button                                                                                  |
-| `--background-activated` | Background of the button when pressed                                                                     |
-| `--background-focused`   | Background of the button when focused with the tab key                                                    |
-| `--background-hover`     | Background of the button on hover                                                                         |
-| `--border-color`         | Border color of the button                                                                                |
-| `--border-radius`        | Border radius of the button                                                                               |
-| `--border-style`         | Border style of the button                                                                                |
-| `--border-width`         | Border width of the button                                                                                |
-| `--box-shadow`           | Box shadow of the button                                                                                  |
-| `--color`                | Text color of the button                                                                                  |
-| `--color-activated`      | Text color of the button when pressed                                                                     |
-| `--color-focused`        | Text color of the button when focused with the tab key                                                    |
-| `--color-hover`          | Text color of the button on hover                                                                         |
-| `--padding-bottom`       | Bottom padding of the button                                                                              |
-| `--padding-end`          | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
-| `--padding-start`        | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
-| `--padding-top`          | Top padding of the button                                                                                 |
-| `--ripple-color`         | Color of the button ripple effect                                                                         |
-| `--transition`           | Transition of the button                                                                                  |
+| Name                             | Description                                                                                               |
+| -------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `--background`                   | Background of the button                                                                                  |
+| `--background-activated`         | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple. |
+| `--background-activated-opacity` | Opacity of the button background when pressed                                                             |
+| `--background-focused`           | Background of the button when focused with the tab key                                                    |
+| `--background-focused-opacity`   | Opacity of the button background when focused with the tab key                                            |
+| `--background-hover`             | Background of the button on hover                                                                         |
+| `--background-hover-opacity`     | Opacity of the button background on hover                                                                 |
+| `--border-color`                 | Border color of the button                                                                                |
+| `--border-radius`                | Border radius of the button                                                                               |
+| `--border-style`                 | Border style of the button                                                                                |
+| `--border-width`                 | Border width of the button                                                                                |
+| `--box-shadow`                   | Box shadow of the button                                                                                  |
+| `--color`                        | Text color of the button                                                                                  |
+| `--color-activated`              | Text color of the button when pressed                                                                     |
+| `--color-focused`                | Text color of the button when focused with the tab key                                                    |
+| `--color-hover`                  | Text color of the button on hover                                                                         |
+| `--padding-bottom`               | Bottom padding of the button                                                                              |
+| `--padding-end`                  | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
+| `--padding-start`                | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
+| `--padding-top`                  | Top padding of the button                                                                                 |
+| `--ripple-color`                 | Color of the button ripple effect                                                                         |
+| `--transition`                   | Transition of the button                                                                                  |
 
 
 ## Dependencies
diff --git a/core/src/components/fab-button/test/standalone/index.html b/core/src/components/fab-button/test/standalone/index.html
index 7730f11463..e4b6f45a23 100644
--- a/core/src/components/fab-button/test/standalone/index.html
+++ b/core/src/components/fab-button/test/standalone/index.html
@@ -21,8 +21,8 @@
     <ion-fab-button class="fab-button-in-list">In List</ion-fab-button>
     <ion-fab-button class="fab-button-in-list"><ion-icon name="heart"></ion-icon></ion-fab-button>
     <ion-fab-button size="small" class="fab-button-in-list"><ion-icon name="star"></ion-icon></ion-fab-button>
-    <ion-fab-button class="fab-button-in-list activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
-    <ion-fab-button size="small" class="fab-button-in-list activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button class="fab-button-in-list ion-activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
+    <ion-fab-button size="small" class="fab-button-in-list ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
   </p>
 
   <h3>Colors</h3>
@@ -38,15 +38,15 @@
     <ion-fab-button color="dark"><ion-icon name="heart"></ion-icon></ion-fab-button>
   </p>
   <p>
-    <ion-fab-button color="primary" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
-    <ion-fab-button color="secondary" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
-    <ion-fab-button color="tertiary" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
-    <ion-fab-button color="success" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
-    <ion-fab-button color="warning" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
-    <ion-fab-button color="danger" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
-    <ion-fab-button color="light" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
-    <ion-fab-button color="medium" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
-    <ion-fab-button color="dark" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button color="primary" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button color="secondary" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button color="tertiary" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button color="success" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button color="warning" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button color="danger" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button color="light" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button color="medium" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button color="dark" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
   </p>
 
   <h3>Custom</h3>
@@ -56,20 +56,20 @@
 
   <!-- Custom Colors -->
   <ion-fab-button class="custom"><ion-icon name="star"></ion-icon></ion-fab-button>
-  <ion-fab-button class="custom activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+  <ion-fab-button class="custom ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
   <ion-fab-button color="secondary" class="custom"><ion-icon name="heart"></ion-icon></ion-fab-button>
 
   <!-- Custom Colors Fab In List -->
   <ion-fab-button class="fab-button-in-list custom-white">White</ion-fab-button>
-  <ion-fab-button class="fab-button-in-list custom-white activated">White</ion-fab-button>
+  <ion-fab-button class="fab-button-in-list custom-white ion-activated">White</ion-fab-button>
   <ion-fab-button class="fab-button-in-list custom-white"><ion-icon name="heart"></ion-icon></ion-fab-button>
-  <ion-fab-button class="fab-button-in-list custom-white activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
+  <ion-fab-button class="fab-button-in-list custom-white ion-activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
   <ion-fab-button class="fab-button-in-list custom-blue"><ion-icon name="star"></ion-icon></ion-fab-button>
-  <ion-fab-button class="fab-button-in-list custom-blue activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+  <ion-fab-button class="fab-button-in-list custom-blue ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
   <ion-fab-button class="fab-button-in-list custom-border">Border</ion-fab-button>
-  <ion-fab-button class="fab-button-in-list custom-border activated">Border</ion-fab-button>
+  <ion-fab-button class="fab-button-in-list custom-border ion-activated">Border</ion-fab-button>
   <ion-fab-button class="fab-button-in-list custom-border"><ion-icon name="star"></ion-icon></ion-fab-button>
-  <ion-fab-button class="fab-button-in-list custom-border activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+  <ion-fab-button class="fab-button-in-list custom-border ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
 
   <style>
     ion-fab-button {
diff --git a/core/src/components/fab/test/states/e2e.ts b/core/src/components/fab/test/states/e2e.ts
new file mode 100644
index 0000000000..5d83528928
--- /dev/null
+++ b/core/src/components/fab/test/states/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('fab: states', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/fab/test/states?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/fab/test/states/index.html b/core/src/components/fab/test/states/index.html
new file mode 100644
index 0000000000..ad4397c7e3
--- /dev/null
+++ b/core/src/components/fab/test/states/index.html
@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Fab - States</title>
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <h3>Default</h3>
+      <p>
+        <ion-fab-button>
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button text="Back">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button icon="add">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button disabled text="Text Only" icon="">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button icon="heart" text="Love" color="danger">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+      </p>
+      <p>
+        <ion-fab-button class="ion-focused">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button class="ion-focused" text="Back">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button class="ion-focused" icon="add">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button disabled class="ion-focused" text="Text Only" icon="">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button class="ion-focused" icon="heart" text="Love" color="danger">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+      </p>
+
+      <h3>Colors</h3>
+      <p>
+        <ion-fab-button color="primary">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button color="secondary">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button color="tertiary">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button color="success">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button color="warning">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button color="danger">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button color="light">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button color="medium">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button color="dark">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+      </p>
+      <p>
+        <ion-fab-button color="primary" class="ion-focused">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button color="secondary" class="ion-focused">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button color="tertiary" class="ion-focused">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button color="success" class="ion-focused">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button color="warning" class="ion-focused">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button color="danger" class="ion-focused">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button color="light" class="ion-focused">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button color="medium" class="ion-focused">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button color="dark" class="ion-focused">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+      </p>
+
+      <h3>Custom</h3>
+
+      <!-- Custom Font -->
+      <p>
+        <ion-fab-button class="wide" text="wide">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button class="wide ion-focused" text="wide">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+      </p>
+
+      <!-- Custom Colors -->
+      <p>
+        <ion-fab-button class="custom">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button color="secondary" class="custom">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button class="custom ion-focused">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+        <ion-fab-button color="secondary" class="custom ion-focused">
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+      </p>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    var buttons = document.querySelectorAll('ion-fab-button');
+
+    for (var i = 0; i < buttons.length; i++) {
+      buttons[i].addEventListener('click', (event) => onClick(event));
+    }
+
+    function onClick(ev) {
+      console.log("clicked the button", ev.target.innerText);
+    }
+  </script>
+
+  <style>
+    h3 {
+      padding-left: 16px;
+    }
+
+    p {
+      padding-left: 8px;
+    }
+
+    ion-fab-button {
+      display: inline-block !important;
+      vertical-align: middle;
+    }
+
+    .wide {
+      --background: #d1f3ff;
+      --background-hover: #add8e6;
+      --background-focused: #84c5db;
+
+      height: 50px;
+      width: 150px;
+    }
+
+    .custom {
+      --background: #ffdde2;
+      --background-hover: #fcc6ce;
+      --background-focused: lightpink;
+      --color: rgb(214, 60, 235);
+      --border-radius: 10px;
+      --padding-start: 10px;
+      --padding-end: 10px;
+    }
+
+    .custom:hover {
+      opacity: 1;
+    }
+
+    .themed {
+      --ion-toolbar-background: #222;
+      --ion-toolbar-color: #ddd;
+    }
+  </style>
+</body>
+
+</html>
diff --git a/core/src/components/item-option/item-option.ios.scss b/core/src/components/item-option/item-option.ios.scss
index 6249ee7985..2629d9b119 100644
--- a/core/src/components/item-option/item-option.ios.scss
+++ b/core/src/components/item-option/item-option.ios.scss
@@ -8,10 +8,10 @@
   font-size: $item-option-button-ios-font-size;
 }
 
-:host(.activated) {
+:host(.ion-activated) {
   background: ion-color(primary, shade);
 }
 
-:host(.ion-color.activated) {
+:host(.ion-color.ion-activated) {
   background: current-color(shade);
 }
diff --git a/core/src/components/item-sliding/test/basic/index.html b/core/src/components/item-sliding/test/basic/index.html
index 813ab055a7..f79f14900f 100644
--- a/core/src/components/item-sliding/test/basic/index.html
+++ b/core/src/components/item-sliding/test/basic/index.html
@@ -161,7 +161,7 @@
           </ion-item-sliding>
 
           <ion-item-sliding id="item1">
-            <ion-item detail href="#" class="activated">
+            <ion-item detail href="#" class="ion-activated">
               <ion-label class="ion-text-wrap">
                 <h2>LEFT side - no icons</h2>
                 <p>I think I figured out how to get more Mountain Dew</p>
diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss
index 6e80302802..87235cbddf 100644
--- a/core/src/components/item/item.ios.scss
+++ b/core/src/components/item/item.ios.scss
@@ -6,14 +6,17 @@
 
 :host {
   --min-height: #{$item-ios-min-height};
-  --transition: background-color 200ms linear;
+  --transition: background-color 200ms linear, opacity 200ms linear;
   --padding-start: #{$item-ios-padding-start};
   --inner-padding-end: #{$item-ios-padding-end / 2};
   --inner-border-width: #{0px 0px $item-ios-border-bottom-width 0px};
   --background: #{$item-ios-background};
-  --background-activated: #{$item-ios-background-activated};
-  --background-focused: #{$item-ios-background-focused};
-  --background-hover: #{$item-ios-background-hover};
+  --background-activated: #000;
+  --background-focused: #000;
+  --background-hover: currentColor;
+  --background-activated-opacity: .12;
+  --background-focused-opacity: .15;
+  --background-hover-opacity: .04;
   --border-color: #{$item-ios-border-bottom-color};
   --color: #{$item-ios-color};
   --highlight-height: 0;
@@ -25,27 +28,24 @@
 }
 
 
-// iOS Activated
+// iOS Item: States
 // --------------------------------------------------
 
-:host(.activated) {
+:host(.ion-activated) {
   --transition: none;
 }
 
-:host(.ion-color.activated) .item-native {
-  background: current-color(shade);
-  color: current-color(contrast);
+:host(.ion-color.ion-focused) .item-native::after {
+  background: #000;
+
+  opacity: .15;
 }
 
-@media (any-hover: hover) {
-  :host(.activated.ion-activatable:hover) .item-native {
-    background: var(--background-activated);
-    color: var(--color-activated);
-  }
+:host(.ion-color.ion-activated) .item-native {
+  &::after {
+    background: #000;
 
-  :host(.activated.ion-color.ion-activatable:hover) .item-native {
-    background: #{current-color(shade)};
-    color: #{current-color(contrast)};
+    opacity: .12;
   }
 }
 
diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss
index 55dc5f5cd3..643001a9bb 100644
--- a/core/src/components/item/item.md.scss
+++ b/core/src/components/item/item.md.scss
@@ -8,12 +8,15 @@
 :host {
   --min-height: #{$item-md-min-height};
   --background: #{$item-md-background};
-  --background-activated: var(--background);
-  --background-focused: #{$item-md-background-focused};
-  --background-hover: #{$item-md-background-hover};
+  --background-activated: transparent;
+  --background-focused: currentColor;
+  --background-hover: currentColor;
+  --background-activated-opacity: 0;
+  --background-focused-opacity: .12;
+  --background-hover-opacity: .04;
   --border-color: #{$item-md-border-bottom-color};
   --color: #{$item-md-color};
-  --transition: background-color 300ms cubic-bezier(.4, 0, .2, 1);
+  --transition: opacity 15ms linear, background-color 15ms linear;
   --padding-start: #{$item-md-padding-start};
   --color: #{$item-md-color};
   --border-color: #{$item-md-border-bottom-color};
@@ -31,22 +34,13 @@
 }
 
 
-// Material Design Item: Focused & Activated
+// Material Design Item: States
 // --------------------------------------------------
 
-:host(.ion-focused.activated) .item-native {
-  background: var(--background-focused);
-  color: var(--color-focused);
-}
-
-:host(.ion-color.activated) .item-native {
-  background: current-color(base);
-  color: current-color(contrast);
-}
-
-:host(.ion-color.ion-focused.activated) .item-native {
-  background: current-color(shade);
-  color: current-color(contrast);
+:host(.ion-color.ion-activated) .item-native {
+  &::after {
+    background: transparent;
+  }
 }
 
 
diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
index e9226e1679..3a6aae4350 100644
--- a/core/src/components/item/item.scss
+++ b/core/src/components/item/item.scss
@@ -6,9 +6,12 @@
 :host {
   /**
    * @prop --background: Background of the item
-   * @prop --background-activated: Background of the item when pressed
+   * @prop --background-activated: Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.
+   * @prop --background-activated-opacity: Opacity of the item background when pressed
    * @prop --background-focused: Background of the item when focused with the tab key
+   * @prop --background-focused-opacity: Opacity of the item background when focused with the tab key
    * @prop --background-hover: Background of the item on hover
+   * @prop --background-hover-opacity: Opacity of the background of the item on hover
    *
    * @prop --border-color: Color of the item border
    * @prop --border-radius: Radius of the item border
@@ -25,8 +28,8 @@
    * @prop --detail-icon-color: Color of the item detail icon
    * @prop --detail-icon-opacity: Opacity of the item detail icon
    * @prop --detail-icon-font-size: Font size of the item detail icon
-   * @prop --inner-border-width: Width of the item inner border
    *
+   * @prop --inner-border-width: Width of the item inner border
    * @prop --inner-box-shadow: Box shadow of the item inner
    * @prop --inner-padding-top: Top padding of the item inner
    * @prop --inner-padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner
@@ -107,17 +110,43 @@
 }
 
 
+// Item: Activated
+// --------------------------------------------------
+
+:host(.ion-activated) .item-native {
+  color: var(--color-activated);
+
+  &::after {
+    background: var(--background-activated);
+
+    opacity: var(--background-activated-opacity);
+  }
+}
+
+:host(.ion-color.ion-activated) .item-native {
+  color: current-color(contrast);
+}
+
+
 // Item: Focused
 // --------------------------------------------------
 
 :host(.ion-focused) .item-native {
-  background: var(--background-focused);
   color: var(--color-focused);
+
+  &::after {
+    background: var(--background-focused);
+
+    opacity: var(--background-focused-opacity);
+  }
 }
 
 :host(.ion-color.ion-focused) .item-native {
-  background: current-color(shade);
   color: current-color(contrast);
+
+  &::after {
+    background: current-color(contrast);
+  }
 }
 
 
@@ -126,26 +155,24 @@
 
 @media (any-hover: hover) {
   :host(.ion-activatable:hover) .item-native {
-    background: var(--background-hover);
     color: var(--color-hover);
+
+    &::after {
+      background: var(--background-hover);
+
+      opacity: var(--background-hover-opacity);
+    }
   }
 
   :host(.ion-color.ion-activatable:hover) .item-native {
-    background: #{current-color(tint)};
     color: #{current-color(contrast)};
+
+    &::after {
+      background: #{current-color(contrast)};
+    }
   }
 }
 
-
-// Item: Activated
-// --------------------------------------------------
-
-:host(.activated) .item-native {
-  background: var(--background-activated);
-  color: var(--color-activated);
-}
-
-
 // Item: Disabled
 // --------------------------------------------------
 
@@ -197,12 +224,22 @@
   box-shadow: var(--box-shadow);
   overflow: inherit;
   box-sizing: border-box;
+
+  z-index: 1;
 }
 
 .item-native::-moz-focus-inner {
   border: 0;
 }
 
+.item-native::after {
+  @include button-state();
+
+  transition: var(--transition);
+
+  z-index: -1;
+}
+
 button, a {
   cursor: pointer;
   user-select: none;
diff --git a/core/src/components/item/readme.md b/core/src/components/item/readme.md
index 41ef7c5bd4..5330fd32cb 100644
--- a/core/src/components/item/readme.md
+++ b/core/src/components/item/readme.md
@@ -1392,41 +1392,44 @@ Item Inputs
 
 ## CSS Custom Properties
 
-| Name                        | Description                                                                                                   |
-| --------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `--background`              | Background of the item                                                                                        |
-| `--background-activated`    | Background of the item when pressed                                                                           |
-| `--background-focused`      | Background of the item when focused with the tab key                                                          |
-| `--background-hover`        | Background of the item on hover                                                                               |
-| `--border-color`            | Color of the item border                                                                                      |
-| `--border-radius`           | Radius of the item border                                                                                     |
-| `--border-style`            | Style of the item border                                                                                      |
-| `--border-width`            | Width of the item border                                                                                      |
-| `--box-shadow`              | Box shadow of the item                                                                                        |
-| `--color`                   | Color of the item                                                                                             |
-| `--color-activated`         | Color of the item when pressed                                                                                |
-| `--color-focused`           | Color of the item when focused with the tab key                                                               |
-| `--color-hover`             | Color of the item on hover                                                                                    |
-| `--detail-icon-color`       | Color of the item detail icon                                                                                 |
-| `--detail-icon-font-size`   | Font size of the item detail icon                                                                             |
-| `--detail-icon-opacity`     | Opacity of the item detail icon                                                                               |
-| `--highlight-color-focused` | The color of the highlight on the item when focused                                                           |
-| `--highlight-color-invalid` | The color of the highlight on the item when invalid                                                           |
-| `--highlight-color-valid`   | The color of the highlight on the item when valid                                                             |
-| `--highlight-height`        | The height of the highlight on the item                                                                       |
-| `--inner-border-width`      | Width of the item inner border                                                                                |
-| `--inner-box-shadow`        | Box shadow of the item inner                                                                                  |
-| `--inner-padding-bottom`    | Bottom padding of the item inner                                                                              |
-| `--inner-padding-end`       | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner |
-| `--inner-padding-start`     | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner |
-| `--inner-padding-top`       | Top padding of the item inner                                                                                 |
-| `--min-height`              | Minimum height of the item                                                                                    |
-| `--padding-bottom`          | Bottom padding of the item                                                                                    |
-| `--padding-end`             | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item       |
-| `--padding-start`           | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item       |
-| `--padding-top`             | Top padding of the item                                                                                       |
-| `--ripple-color`            | Color of the item ripple effect                                                                               |
-| `--transition`              | Transition of the item                                                                                        |
+| Name                             | Description                                                                                                   |
+| -------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `--background`                   | Background of the item                                                                                        |
+| `--background-activated`         | Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.       |
+| `--background-activated-opacity` | Opacity of the item background when pressed                                                                   |
+| `--background-focused`           | Background of the item when focused with the tab key                                                          |
+| `--background-focused-opacity`   | Opacity of the item background when focused with the tab key                                                  |
+| `--background-hover`             | Background of the item on hover                                                                               |
+| `--background-hover-opacity`     | Opacity of the background of the item on hover                                                                |
+| `--border-color`                 | Color of the item border                                                                                      |
+| `--border-radius`                | Radius of the item border                                                                                     |
+| `--border-style`                 | Style of the item border                                                                                      |
+| `--border-width`                 | Width of the item border                                                                                      |
+| `--box-shadow`                   | Box shadow of the item                                                                                        |
+| `--color`                        | Color of the item                                                                                             |
+| `--color-activated`              | Color of the item when pressed                                                                                |
+| `--color-focused`                | Color of the item when focused with the tab key                                                               |
+| `--color-hover`                  | Color of the item on hover                                                                                    |
+| `--detail-icon-color`            | Color of the item detail icon                                                                                 |
+| `--detail-icon-font-size`        | Font size of the item detail icon                                                                             |
+| `--detail-icon-opacity`          | Opacity of the item detail icon                                                                               |
+| `--highlight-color-focused`      | The color of the highlight on the item when focused                                                           |
+| `--highlight-color-invalid`      | The color of the highlight on the item when invalid                                                           |
+| `--highlight-color-valid`        | The color of the highlight on the item when valid                                                             |
+| `--highlight-height`             | The height of the highlight on the item                                                                       |
+| `--inner-border-width`           | Width of the item inner border                                                                                |
+| `--inner-box-shadow`             | Box shadow of the item inner                                                                                  |
+| `--inner-padding-bottom`         | Bottom padding of the item inner                                                                              |
+| `--inner-padding-end`            | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner |
+| `--inner-padding-start`          | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner |
+| `--inner-padding-top`            | Top padding of the item inner                                                                                 |
+| `--min-height`                   | Minimum height of the item                                                                                    |
+| `--padding-bottom`               | Bottom padding of the item                                                                                    |
+| `--padding-end`                  | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item       |
+| `--padding-start`                | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item       |
+| `--padding-top`                  | Top padding of the item                                                                                       |
+| `--ripple-color`                 | Color of the item ripple effect                                                                               |
+| `--transition`                   | Transition of the item                                                                                        |
 
 
 ## Dependencies
diff --git a/core/src/components/item/test/buttons/index.html b/core/src/components/item/test/buttons/index.html
index b4ac9e209e..fd208d1726 100644
--- a/core/src/components/item/test/buttons/index.html
+++ b/core/src/components/item/test/buttons/index.html
@@ -25,10 +25,14 @@
         <ion-label>a[ion-item]</ion-label>
       </ion-item>
 
-      <ion-item class="custom activated" href="#" onclick="testClick(event)">
+      <ion-item class="custom ion-activated" href="#" onclick="testClick(event)">
         <ion-label>a[ion-item].activated</ion-label>
       </ion-item>
 
+      <ion-item class="custom-hover" href="#" onclick="testClick(event)">
+        <ion-label>custom hover</ion-label>
+      </ion-item>
+
       <ion-item color="secondary" href="#" onclick="testClick(event)">
         <ion-label>a[ion-item] secondary</ion-label>
       </ion-item>
@@ -41,7 +45,7 @@
         <ion-label>button[ion-item] type="submit"</ion-label>
       </ion-item>
 
-      <ion-item button class="activated" onClick="testClick(event)">
+      <ion-item button class="ion-activated" onClick="testClick(event)">
         <ion-label>button[ion-item].activated</ion-label>
       </ion-item>
 
@@ -149,6 +153,12 @@
     .custom {
       --ripple-color: pink;
     }
+
+    .custom-hover {
+      --background-hover: green;
+      --background-hover-opacity: 1;
+      --color-hover: purple;
+    }
   </style>
 
   <script>
diff --git a/core/src/components/item/test/colors/index.html b/core/src/components/item/test/colors/index.html
index bca8405247..38ad6c2cfc 100644
--- a/core/src/components/item/test/colors/index.html
+++ b/core/src/components/item/test/colors/index.html
@@ -45,7 +45,7 @@
           </ion-label>
         </ion-item>
 
-        <ion-item href="#" color="danger" class="activated">
+        <ion-item href="#" color="danger" class="ion-activated">
           <ion-label>
             a[ion-item].activated danger
           </ion-label>
@@ -57,7 +57,7 @@
           </ion-label>
         </ion-item>
 
-        <ion-item button onclick="testClick(event)" color="secondary" class="activated">
+        <ion-item button onclick="testClick(event)" color="secondary" class="ion-activated">
           <ion-label>
             button[ion-item].activated secondary
           </ion-label>
diff --git a/core/src/components/item/test/standalone/index.html b/core/src/components/item/test/standalone/index.html
index ccc29df45e..0596480617 100644
--- a/core/src/components/item/test/standalone/index.html
+++ b/core/src/components/item/test/standalone/index.html
@@ -20,7 +20,7 @@
     <ion-label>Item Tappable Danger</ion-label>
   </ion-item>
 
-  <ion-item button color="danger" class="activated">
+  <ion-item button color="danger" class="ion-activated">
     <ion-label>Item Tappable Danger.activated</ion-label>
   </ion-item>
 
diff --git a/core/src/components/item/test/states/e2e.ts b/core/src/components/item/test/states/e2e.ts
new file mode 100644
index 0000000000..bffaf86664
--- /dev/null
+++ b/core/src/components/item/test/states/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('item: states', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/item/test/states?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/item/test/states/index.html b/core/src/components/item/test/states/index.html
new file mode 100644
index 0000000000..a233abaaa8
--- /dev/null
+++ b/core/src/components/item/test/states/index.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Item - States</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
+
+<body>
+  <ion-app>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Item - States</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content id="content">
+      <ion-item href="#">
+        <ion-label>ion-item[href]</ion-label>
+      </ion-item>
+
+      <ion-item href="#" class="ion-focused">
+        <ion-label>ion-item[href] focused</ion-label>
+      </ion-item>
+
+      <ion-item href="#" class="ion-activated">
+        <ion-label>ion-item[href] activated</ion-label>
+      </ion-item>
+
+      <ion-item button>
+        <ion-label>ion-item[button]</ion-label>
+      </ion-item>
+
+      <ion-item button class="ion-focused">
+        <ion-label>ion-item[button] focused</ion-label>
+      </ion-item>
+
+      <ion-item button class="ion-focused custom-radius">
+        <ion-label>ion-item[button] border-radius focused</ion-label>
+      </ion-item>
+
+      <ion-item button class="ion-activated">
+        <ion-label>ion-item[button] activated</ion-label>
+      </ion-item>
+
+      <ion-item color="tertiary" href="#">
+        <ion-label>ion-item[href]</ion-label>
+      </ion-item>
+
+      <ion-item color="tertiary" href="#" class="ion-focused">
+        <ion-label>ion-item[href] focused</ion-label>
+      </ion-item>
+
+      <ion-item color="tertiary" href="#" class="ion-activated">
+        <ion-label>ion-item[href] activated</ion-label>
+      </ion-item>
+
+      <ion-item color="warning" button>
+        <ion-label>ion-item[button]</ion-label>
+      </ion-item>
+
+      <ion-item color="warning" button class="ion-focused">
+        <ion-label>ion-item[button] focused</ion-label>
+      </ion-item>
+
+      <ion-item color="warning" button class="ion-activated">
+        <ion-label>ion-item[button] activated</ion-label>
+      </ion-item>
+
+      <ion-item href="#" class="custom">
+        <ion-label>ion-item[href]</ion-label>
+      </ion-item>
+
+      <ion-item href="#" class="custom ion-focused">
+        <ion-label>ion-item[href] focused</ion-label>
+      </ion-item>
+
+      <ion-item href="#" class="custom ion-activated">
+        <ion-label>ion-item[href] activated</ion-label>
+      </ion-item>
+
+    </ion-content>
+
+  </ion-app>
+
+  <style>
+    .custom {
+      --color: rebeccapurple;
+    }
+
+    .custom-radius {
+      --border-radius: 0 50px 50px 0;
+    }
+  </style>
+</body>
+
+</html>
diff --git a/core/src/components/menu-button/menu-button.ios.scss b/core/src/components/menu-button/menu-button.ios.scss
index e1efb0f462..63927ab097 100644
--- a/core/src/components/menu-button/menu-button.ios.scss
+++ b/core/src/components/menu-button/menu-button.ios.scss
@@ -1,10 +1,12 @@
+@import "../../themes/ionic.globals.ios";
 @import "./menu-button";
 
 // iOS Menu Button
 // --------------------------------------------------
 
 :host {
-  --background-focused: #{ion-color(primary, base, .1)};
+  --background-focused: currentColor;
+  --background-focused-opacity: .1;
   --border-radius: 4px;
   --color: #{ion-color(primary, base)};
   --padding-start: 5px;
@@ -15,20 +17,20 @@
   font-size: 31px;
 }
 
-:host(.activated) {
+
+// Menu Button: Activated
+// --------------------------------------------------
+
+:host(.ion-activated) {
   opacity: .4;
 }
 
+
+// Menu Button: Hover
+// --------------------------------------------------
+
 @media (any-hover: hover) {
   :host(:hover) {
     opacity: .6;
   }
 }
-
-
-// Menu Button Color: Focused
-// --------------------------------------------------
-
-:host(.ion-color.ion-focused) .button-native {
-  background: #{current-color(base, .1)};
-}
\ No newline at end of file
diff --git a/core/src/components/menu-button/menu-button.md.scss b/core/src/components/menu-button/menu-button.md.scss
index 9a2267c531..a28a2ffdd8 100644
--- a/core/src/components/menu-button/menu-button.md.scss
+++ b/core/src/components/menu-button/menu-button.md.scss
@@ -1,11 +1,14 @@
+@import "../../themes/ionic.globals.md";
 @import "./menu-button";
 
 // MD Menu Button
 // --------------------------------------------------
 
 :host {
-  --background-focused: rgba(66, 66, 66, 0.24);
-  --background-hover: rgba(66, 66, 66, 0.08);
+  --background-focused: currentColor;
+  --background-focused-opacity: .12;
+  --background-hover: currentColor;
+  --background-hover-opacity: .04;
   --border-radius: 50%;
   --color: initial;
   --padding-start: 8px;
@@ -18,20 +21,19 @@
 }
 
 
+// Menu Button Color: Focused
+// --------------------------------------------------
+
+:host(.ion-color.ion-focused)::after {
+  background: #{current-color(base)};
+}
+
+
 // Menu Button Color: Hover
 // --------------------------------------------------
 
 @media (any-hover: hover) {
-  :host(.ion-color:hover) .button-native {
-    background: #{current-color(base, .08)};
+  :host(.ion-color:hover) .button-native::after {
+    background: #{current-color(base)};
   }
 }
-
-
-// Menu Button Color: Focused
-// --------------------------------------------------
-
-:host(.ion-color.ion-focused) .button-native {
-  background: #{current-color(base, .24)};
-  color: #{current-color(base)};
-}
\ No newline at end of file
diff --git a/core/src/components/menu-button/menu-button.scss b/core/src/components/menu-button/menu-button.scss
index fcb07eb210..7cfef8a92a 100644
--- a/core/src/components/menu-button/menu-button.scss
+++ b/core/src/components/menu-button/menu-button.scss
@@ -9,7 +9,9 @@
    *
    * @prop --background: Background of the menu button
    * @prop --background-hover: Background of the menu button on hover
+   * @prop --background-hover-opacity: Opacity of the background on hover
    * @prop --background-focused: Background of the menu button when focused with the tab key
+   * @prop --background-focused-opacity: Opacity of the menu button background when focused with the tab key
    *
    * @prop --color: Color of the menu button
    * @prop --color-hover: Color of the menu button on hover
@@ -21,7 +23,7 @@
    * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
    */
   --background: transparent;
-  --color-focused: var(--color);
+  --color-focused: currentColor;
   --border-radius: initial;
   --padding-top: 0;
   --padding-bottom: 0;
@@ -65,11 +67,28 @@
   line-height: 1;
 
   cursor: pointer;
+
+  overflow: hidden;
   user-select: none;
   z-index: 0;
   appearance: none;
 }
 
+.button-inner {
+  display: flex;
+  position: relative;
+
+  flex-flow: row nowrap;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+
+  z-index: 1;
+}
+
 ion-icon {
   @include margin(0);
   @include padding(0);
@@ -94,23 +113,37 @@ ion-icon {
 }
 
 
-// Menu Button: Hover
-// --------------------------------------------------
-
-@media (any-hover: hover) {
-  :host(:hover) .button-native {
-    background: var(--background-hover);
-    color: var(--color-hover);
-  }
-}
-
-
 // Menu Button: Focused
 // --------------------------------------------------
 
 :host(.ion-focused) .button-native {
-  background: var(--background-focused);
   color: var(--color-focused);
+
+  &::after {
+    background: var(--background-focused);
+
+    opacity: var(--background-focused-opacity);
+  }
+}
+
+
+// Menu Button: Hover
+// --------------------------------------------------
+
+.button-native::after {
+  @include button-state();
+}
+
+@media (any-hover: hover) {
+  :host(:hover) .button-native {
+    color: var(--color-hover);
+
+    &::after {
+      background: var(--background-hover);
+
+      opacity: var(--background-hover-opacity, 0);
+    }
+  }
 }
 
 
@@ -125,7 +158,6 @@ ion-icon {
 // Menu Button in Toolbar: Global Theming
 // --------------------------------------------------
 
-// TODO this will not work in Safari - component is shadow not scoped
-:host-context(ion-toolbar:not(.ion-color)) {
+:host(.in-toolbar) {
   color: #{var(--ion-toolbar-color, var(--color))};
 }
diff --git a/core/src/components/menu-button/menu-button.tsx b/core/src/components/menu-button/menu-button.tsx
index 98eddd521a..02caa3aa83 100644
--- a/core/src/components/menu-button/menu-button.tsx
+++ b/core/src/components/menu-button/menu-button.tsx
@@ -1,11 +1,11 @@
-import { Component, ComponentInterface, Host, Listen, Prop, State, h } from '@stencil/core';
+import { Component, ComponentInterface, Element, Host, Listen, Prop, State, h } from '@stencil/core';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import { Color } from '../../interface';
 import { ButtonInterface } from '../../utils/element-interface';
 import { menuController } from '../../utils/menu-controller';
-import { createColorClasses } from '../../utils/theme';
+import { createColorClasses, hostContext } from '../../utils/theme';
 import { updateVisibility } from '../menu-toggle/menu-toggle-util';
 
 @Component({
@@ -17,6 +17,7 @@ import { updateVisibility } from '../menu-toggle/menu-toggle-util';
   shadow: true
 })
 export class MenuButton implements ComponentInterface, ButtonInterface {
+  @Element() el!: HTMLIonSegmentElement;
 
   @State() visible = false;
 
@@ -84,6 +85,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
           'button': true,  // ion-buttons target .button
           'menu-button-hidden': hidden,
           'menu-button-disabled': disabled,
+          'in-toolbar': hostContext('ion-toolbar', this.el),
           'ion-activatable': true,
           'ion-focusable': true
         }}
@@ -93,9 +95,11 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
           disabled={disabled}
           class="button-native"
         >
-          <slot>
-            <ion-icon icon={menuIcon} mode={mode} lazy={false}></ion-icon>
-          </slot>
+          <span class="button-inner">
+            <slot>
+              <ion-icon icon={menuIcon} mode={mode} lazy={false}></ion-icon>
+            </slot>
+          </span>
           {mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
         </button>
       </Host>
diff --git a/core/src/components/menu-button/readme.md b/core/src/components/menu-button/readme.md
index 25761955ab..f83fbdf20a 100644
--- a/core/src/components/menu-button/readme.md
+++ b/core/src/components/menu-button/readme.md
@@ -19,19 +19,21 @@ Menu Button is component that automatically creates the icon and functionality t
 
 ## CSS Custom Properties
 
-| Name                   | Description                                                                                               |
-| ---------------------- | --------------------------------------------------------------------------------------------------------- |
-| `--background`         | Background of the menu button                                                                             |
-| `--background-focused` | Background of the menu button when focused with the tab key                                               |
-| `--background-hover`   | Background of the menu button on hover                                                                    |
-| `--border-radius`      | Border radius of the menu button                                                                          |
-| `--color`              | Color of the menu button                                                                                  |
-| `--color-focused`      | Color of the menu button when focused with the tab key                                                    |
-| `--color-hover`        | Color of the menu button on hover                                                                         |
-| `--padding-bottom`     | Bottom padding of the button                                                                              |
-| `--padding-end`        | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
-| `--padding-start`      | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
-| `--padding-top`        | Top padding of the button                                                                                 |
+| Name                           | Description                                                                                               |
+| ------------------------------ | --------------------------------------------------------------------------------------------------------- |
+| `--background`                 | Background of the menu button                                                                             |
+| `--background-focused`         | Background of the menu button when focused with the tab key                                               |
+| `--background-focused-opacity` | Opacity of the menu button background when focused with the tab key                                       |
+| `--background-hover`           | Background of the menu button on hover                                                                    |
+| `--background-hover-opacity`   | Opacity of the background on hover                                                                        |
+| `--border-radius`              | Border radius of the menu button                                                                          |
+| `--color`                      | Color of the menu button                                                                                  |
+| `--color-focused`              | Color of the menu button when focused with the tab key                                                    |
+| `--color-hover`                | Color of the menu button on hover                                                                         |
+| `--padding-bottom`             | Bottom padding of the button                                                                              |
+| `--padding-end`                | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
+| `--padding-start`              | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
+| `--padding-top`                | Top padding of the button                                                                                 |
 
 
 ## Dependencies
diff --git a/core/src/components/menu-button/test/basic/index.html b/core/src/components/menu-button/test/basic/index.html
index fa4ffbe012..111f4968f8 100644
--- a/core/src/components/menu-button/test/basic/index.html
+++ b/core/src/components/menu-button/test/basic/index.html
@@ -85,6 +85,14 @@
         <ion-title>Success</ion-title>
       </ion-toolbar>
 
+      <ion-toolbar class="themed">
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+          <ion-menu-button auto-hide="false" class="ion-focused"></ion-menu-button>
+        </ion-buttons>
+        <ion-title>Themed</ion-title>
+      </ion-toolbar>
+
       <ion-toolbar color="dark">
         <ion-buttons slot="start">
           <ion-menu-button></ion-menu-button>
@@ -103,13 +111,18 @@
       display: inline-block;
     }
 
+    .themed {
+      --ion-toolbar-background: #222;
+      --ion-toolbar-color: #ddd;
+    }
+
     .custom {
       --color: hotpink;
     }
 
     .custom.md {
-      --background-hover: rgb(255, 105, 180, .08);
-      --background-focused: rgb(255, 105, 180, .24);
+      --background-hover: #ff69b4;
+      --background-focused: #ff69b4;
     }
 
     .custom-large {
diff --git a/core/src/components/picker/picker.ios.scss b/core/src/components/picker/picker.ios.scss
index effa4969e0..38eae1ee58 100644
--- a/core/src/components/picker/picker.ios.scss
+++ b/core/src/components/picker/picker.ios.scss
@@ -39,7 +39,7 @@
 }
 
 .picker-button,
-.picker-button.activated {
+.picker-button.ion-activated {
   @include margin(0);
   @include padding($picker-ios-button-padding-top, $picker-ios-button-padding-end, $picker-ios-button-padding-bottom, $picker-ios-button-padding-start);
 
diff --git a/core/src/components/picker/picker.md.scss b/core/src/components/picker/picker.md.scss
index 347d0b50d3..c656e0de7b 100644
--- a/core/src/components/picker/picker.md.scss
+++ b/core/src/components/picker/picker.md.scss
@@ -23,7 +23,7 @@
 }
 
 .picker-button,
-.picker-button.activated {
+.picker-button.ion-activated {
   @include margin(0);
   @include padding(0, 1.1em);
 
diff --git a/core/src/components/radio/radio.ios.scss b/core/src/components/radio/radio.ios.scss
index 5086919c7b..331d8c184a 100644
--- a/core/src/components/radio/radio.ios.scss
+++ b/core/src/components/radio/radio.ios.scss
@@ -41,6 +41,7 @@
 
 // iOS Radio: Disabled
 // -----------------------------------------
+
 :host(.radio-disabled) {
   opacity: $radio-ios-disabled-opacity;
 }
diff --git a/core/src/components/searchbar/searchbar.md.scss b/core/src/components/searchbar/searchbar.md.scss
index 7b77956dae..599c44c9d5 100644
--- a/core/src/components/searchbar/searchbar.md.scss
+++ b/core/src/components/searchbar/searchbar.md.scss
@@ -48,8 +48,8 @@
   position: absolute;
 }
 
-.searchbar-search-icon.activated,
-.searchbar-cancel-button.activated {
+.searchbar-search-icon.ion-activated,
+.searchbar-cancel-button.ion-activated {
   background-color: transparent;
 }
 
@@ -87,7 +87,7 @@
   background-color: transparent;
 }
 
-.searchbar-clear-button.activated {
+.searchbar-clear-button.ion-activated {
   background-color: transparent;
 }
 
diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md
index 615ef02f4c..fb1d9f6bc0 100644
--- a/core/src/components/segment-button/readme.md
+++ b/core/src/components/segment-button/readme.md
@@ -631,34 +631,36 @@ export const SegmentButtonExample: React.FC = () => (
 
 ## CSS Custom Properties
 
-| Name                     | Description                                                                                                       |
-| ------------------------ | ----------------------------------------------------------------------------------------------------------------- |
-| `--background`           | Background of the segment button                                                                                  |
-| `--background-checked`   | Background of the checked segment button                                                                          |
-| `--background-disabled`  | Background of the disabled segment button                                                                         |
-| `--background-hover`     | Background of the segment button on hover                                                                         |
-| `--border-color`         | Color of the segment button border                                                                                |
-| `--border-radius`        | Radius of the segment button border                                                                               |
-| `--border-style`         | Style of the segment button border                                                                                |
-| `--border-width`         | Width of the segment button border                                                                                |
-| `--color`                | Color of the segment button                                                                                       |
-| `--color-checked`        | Color of the checked segment button                                                                               |
-| `--color-disabled`       | Color of the disabled segment button                                                                              |
-| `--color-hover`          | Color of the segment button on hover                                                                              |
-| `--indicator-box-shadow` | Box shadow on the indicator for the checked segment button                                                        |
-| `--indicator-color`      | Color of the indicator for the checked segment button                                                             |
-| `--indicator-height`     | Height of the indicator for the checked segment button                                                            |
-| `--indicator-transform`  | Transform of the indicator for the checked segment button                                                         |
-| `--indicator-transition` | Transition of the indicator for the checked segment button                                                        |
-| `--margin-bottom`        | Bottom margin of the segment button                                                                               |
-| `--margin-end`           | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button   |
-| `--margin-start`         | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button   |
-| `--margin-top`           | Top margin of the segment button                                                                                  |
-| `--padding-bottom`       | Bottom padding of the segment button                                                                              |
-| `--padding-end`          | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button |
-| `--padding-start`        | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button |
-| `--padding-top`          | Top padding of the segment button                                                                                 |
-| `--transition`           | Transition of the segment button                                                                                  |
+| Name                           | Description                                                                                                       |
+| ------------------------------ | ----------------------------------------------------------------------------------------------------------------- |
+| `--background`                 | Background of the segment button                                                                                  |
+| `--background-checked`         | Background of the checked segment button                                                                          |
+| `--background-focused`         | Background of the segment button when focused with the tab key                                                    |
+| `--background-focused-opacity` | Opacity of the segment button background when focused with the tab key                                            |
+| `--background-hover`           | Background of the segment button on hover                                                                         |
+| `--background-hover-opacity`   | Opacity of the segment button background on hover                                                                 |
+| `--border-color`               | Color of the segment button border                                                                                |
+| `--border-radius`              | Radius of the segment button border                                                                               |
+| `--border-style`               | Style of the segment button border                                                                                |
+| `--border-width`               | Width of the segment button border                                                                                |
+| `--color`                      | Color of the segment button                                                                                       |
+| `--color-checked`              | Color of the checked segment button                                                                               |
+| `--color-focused`              | Color of the segment button when focused with the tab key                                                         |
+| `--color-hover`                | Color of the segment button on hover                                                                              |
+| `--indicator-box-shadow`       | Box shadow on the indicator for the checked segment button                                                        |
+| `--indicator-color`            | Color of the indicator for the checked segment button                                                             |
+| `--indicator-height`           | Height of the indicator for the checked segment button                                                            |
+| `--indicator-transform`        | Transform of the indicator for the checked segment button                                                         |
+| `--indicator-transition`       | Transition of the indicator for the checked segment button                                                        |
+| `--margin-bottom`              | Bottom margin of the segment button                                                                               |
+| `--margin-end`                 | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button   |
+| `--margin-start`               | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button   |
+| `--margin-top`                 | Top margin of the segment button                                                                                  |
+| `--padding-bottom`             | Bottom padding of the segment button                                                                              |
+| `--padding-end`                | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button |
+| `--padding-start`              | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button |
+| `--padding-top`                | Top padding of the segment button                                                                                 |
+| `--transition`                 | Transition of the segment button                                                                                  |
 
 
 ## Dependencies
diff --git a/core/src/components/segment-button/segment-button.ios.scss b/core/src/components/segment-button/segment-button.ios.scss
index c04a9331d5..51d36e1dc2 100644
--- a/core/src/components/segment-button/segment-button.ios.scss
+++ b/core/src/components/segment-button/segment-button.ios.scss
@@ -5,9 +5,12 @@
 // --------------------------------------------------
 
 :host {
-  --background: #{$segment-button-ios-background-color};
-  --background-checked: #{$segment-button-ios-background-color-checked};
-  --background-hover: #{$segment-button-ios-background-color-hover};
+  --background: #{$segment-button-ios-background};
+  --background-checked: #{$segment-button-ios-background-checked};
+  --background-hover: #{$segment-button-ios-background-hover};
+  --background-hover-opacity: 0;
+  --background-focused: none;
+  --background-focused-opacity: 0;
   --border-radius: #{$segment-button-ios-border-radius};
   --border-width: #{$segment-button-ios-border-width};
   --border-color: #{$segment-button-ios-border-color};
@@ -134,16 +137,89 @@
 }
 
 
+// Segment: States
+// --------------------------------------------------
+
+:host(.ion-focused) .button-native {
+  opacity: $segment-button-ios-opacity-focused;
+}
+
+@media (any-hover: hover) {
+  // Default Segment, Hover
+  :host(:hover) .button-native {
+    opacity: $segment-button-ios-opacity-hover;
+  }
+
+  :host(.segment-button-checked:hover) .button-native {
+    opacity: 1;
+  }
+}
+
+
+// Segment Button: Segment w/ Color
+// --------------------------------------------------
+
+// Default
+:host(.in-segment-color) {
+  background: none;
+  color: $segment-button-ios-color;
+}
+
+// Indicator color on a Segment w/ color
+// should not change if the variable is set
+:host(.in-segment-color) .segment-button-indicator-background {
+  background: $segment-button-ios-indicator-color;
+}
+
+@media (any-hover: hover) {
+  // Toolbar with Color, Default Segment, Hover
+  // Toolbar with Color, Default Segment, Checked, Hover
+  :host(.in-segment-color:hover) .button-native,
+  :host(.in-segment-color.segment-button-checked:hover) .button-native {
+    color: $segment-button-ios-color;
+  }
+}
+
+
+
 // Segment Button: Toolbar
 // --------------------------------------------------
 
-// Segment button indicator color should use the global variable with
-// a fallback to the local variable
-:host(.in-toolbar) .segment-button-indicator-background {
-  background: #{var(--ion-toolbar-segment-indicator-color, var(--indicator-color))};
+// Default Segment, In a Toolbar
+:host(.in-toolbar:not(.in-segment-color)) {
+  --background-checked: #{var(--ion-toolbar-segment-background-checked, $segment-button-ios-background-checked)};
+  --color: var(--ion-toolbar-segment-color, var(--ion-toolbar-color), initial);
+  --color-checked: var(--ion-toolbar-segment-color-checked, var(--ion-toolbar-color), initial);
+  --indicator-color: #{var(--ion-toolbar-segment-indicator-color, $segment-button-ios-indicator-color)};
 }
 
+
+// Segment Button: Toolbar w/ Color
+// --------------------------------------------------
+
 // Do not use the global or local CSS variable if the toolbar has a color
 :host(.in-toolbar-color) .segment-button-indicator-background {
   background: #fff;
 }
+
+// Toolbar with Color, Default Segment
+:host(.in-toolbar-color:not(.in-segment-color)) .button-native {
+  color: #{current-color(contrast)};
+}
+
+// Toolbar with Color, Default Segment, Checked
+:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color)) .button-native {
+  color: #{current-color(base)};
+}
+
+@media (any-hover: hover) {
+  // Toolbar with Color, Default Segment, Hover
+  :host(.in-toolbar-color:not(.in-segment-color):hover) .button-native {
+    color: #{current-color(contrast)};
+  }
+
+  // Toolbar with Color, Default Segment, Checked / Hover
+  :host(.in-toolbar-color.segment-button-checked:not(.in-segment-color):hover) .button-native {
+    color: #{current-color(base)};
+  }
+}
diff --git a/core/src/components/segment-button/segment-button.ios.vars.scss b/core/src/components/segment-button/segment-button.ios.vars.scss
index 7d74903151..c02544fc34 100644
--- a/core/src/components/segment-button/segment-button.ios.vars.scss
+++ b/core/src/components/segment-button/segment-button.ios.vars.scss
@@ -4,10 +4,13 @@
 // --------------------------------------------------
 
 /// @prop - Background of the segment button
-$segment-button-ios-background-color:                 transparent !default;
+$segment-button-ios-background:                       none !default;
 
 /// @prop - Background of the checked segment button
-$segment-button-ios-background-color-checked:         transparent !default;
+$segment-button-ios-background-checked:               $segment-button-ios-background !default;
+
+/// @prop - Text color of the segment button
+$segment-button-ios-color:                            $text-color !default;
 
 /// @prop - Background of the checked segment button indicator
 $segment-button-ios-indicator-color:                  var(--ion-color-step-350, $background-color) !default;
@@ -18,11 +21,14 @@ $segment-button-ios-margin:                           2px !default;
 /// @prop - Opacity of the segment button on hover
 $segment-button-ios-opacity-hover:                    .5 !default;
 
+/// @prop - Opacity of the segment button when focused
+$segment-button-ios-opacity-focused:                  .7 !default;
+
 /// @prop - Opacity of the disabled segment button
 $segment-button-ios-opacity-disabled:                 .3 !default;
 
 /// @prop - Background of the segment button on hover
-$segment-button-ios-background-color-hover:           transparent !default;
+$segment-button-ios-background-hover:                 none !default;
 
 /// @prop - Box shadow of the checked segment button
 $segment-button-ios-box-shadow-checked:               0 0 5px rgba(0, 0, 0, 0.16) !default;
diff --git a/core/src/components/segment-button/segment-button.md.scss b/core/src/components/segment-button/segment-button.md.scss
index 7d9c9b1be5..ce4088b023 100644
--- a/core/src/components/segment-button/segment-button.md.scss
+++ b/core/src/components/segment-button/segment-button.md.scss
@@ -7,7 +7,11 @@
 :host {
   --background: #{$segment-button-md-background};
   --background-checked: #{$segment-button-md-background-checked};
-  --background-hover: #{$segment-button-md-background-hover};
+  --background-hover: var(--color-checked);
+  --background-focused: var(--color-checked);
+  --background-activated-opacity: 0;
+  --background-focused-opacity: .12;
+  --background-hover-opacity: .04;
   --color: #{$segment-button-md-text-color};
   --color-checked: #{$segment-button-md-text-color-checked};
   --indicator-box-shadow: none;
@@ -48,6 +52,84 @@
   opacity: $segment-button-md-opacity-disabled;
 }
 
+
+// Segment Button: Segment w/ Color
+// --------------------------------------------------
+
+// Default
+:host(.in-segment-color) {
+  background: none;
+  color: $segment-button-md-text-color;
+}
+
+// Indicator color and ripple on a Segment w/ color
+// should not change if the variables are set
+:host(.in-segment-color) ion-ripple-effect {
+  color: #{current-color(base)};
+}
+
+:host(.in-segment-color) .segment-button-indicator-background {
+  background: #{current-color(base)};
+}
+
+// Checked
+:host(.in-segment-color.segment-button-checked) .button-native {
+  color: #{current-color(base)};
+}
+
+// Focused
+:host(.in-segment-color.ion-focused) .button-native::after {
+  background: #{current-color(base)};
+}
+
+@media (any-hover: hover) {
+  :host(.in-segment-color:hover) .button-native {
+    color: $segment-button-md-text-color;
+
+    &::after {
+      background: #{current-color(base)};
+    }
+  }
+
+  :host(.in-segment-color.segment-button-checked:hover) .button-native {
+    color: #{current-color(base)};
+  }
+}
+
+
+// Segment: Default Toolbar
+// --------------------------------------------------
+
+:host(.in-toolbar:not(.in-segment-color)) {
+  --background: #{var(--ion-toolbar-segment-background, $segment-button-md-background)};
+  --background-checked: #{var(--ion-toolbar-segment-background-checked, $segment-button-md-background-checked)};
+  --color: #{var(--ion-toolbar-segment-color, $segment-button-md-text-color)};
+  --color-checked: #{var(--ion-toolbar-segment-color-checked, $segment-button-md-text-color-checked)};
+  --indicator-color: #{var(--ion-toolbar-segment-color-checked, var(--color-checked))};
+}
+
+
+// Segment Button: Toolbar w/ Color
+// --------------------------------------------------
+
+// Default Segment, In a Toolbar with Color
+:host(.in-toolbar-color:not(.in-segment-color)) .button-native {
+  color: #{current-color(contrast, .6)};
+}
+
+// Default Segment, In a Toolbar with Color, Checked
+:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color)) .button-native {
+  color: #{current-color(contrast)};
+}
+
+// Default Segment, In a Toolbar with Color, Hover
+@media (any-hover: hover) {
+  :host(.in-toolbar-color:not(.in-segment-color)) .button-native::after {
+    background: #{current-color(contrast)};
+  }
+}
+
+
 // Segment Button: Icon
 // --------------------------------------------------
 
diff --git a/core/src/components/segment-button/segment-button.md.vars.scss b/core/src/components/segment-button/segment-button.md.vars.scss
index d01883ec2d..a4800a3716 100644
--- a/core/src/components/segment-button/segment-button.md.vars.scss
+++ b/core/src/components/segment-button/segment-button.md.vars.scss
@@ -9,24 +9,21 @@ $segment-button-md-opacity:                           .6 !default;
 /// @prop - Text color of the segment button
 $segment-button-md-text-color:                        rgba($text-color-rgb, $segment-button-md-opacity) !default;
 
+/// @prop - Text color of the checked segment button
+$segment-button-md-text-color-checked:                ion-color(primary, base) !default;
+
 /// @prop - Background of the segment button
 $segment-button-md-background:                        none !default;
 
 /// @prop - Background of the checked segment button
 $segment-button-md-background-checked:                $segment-button-md-background !default;
 
-/// @prop - Background of the hovered segment button
-$segment-button-md-background-hover:                  ion-color(primary, base, .04) !default;
-
 /// @prop - Width of the bottom border on the segment button
 $segment-button-md-border-bottom-width:               2px !default;
 
 /// @prop - Color of the bottom border on the segment button
 $segment-button-md-border-bottom-color:               transparent !default;
 
-/// @prop - Text color of the checked segment button
-$segment-button-md-text-color-checked:              ion-color(primary, base) !default;
-
 /// @prop - Opacity of the disabled segment button
 $segment-button-md-opacity-disabled:                  .3 !default;
 
diff --git a/core/src/components/segment-button/segment-button.scss b/core/src/components/segment-button/segment-button.scss
index 28d8c0b725..1043095746 100644
--- a/core/src/components/segment-button/segment-button.scss
+++ b/core/src/components/segment-button/segment-button.scss
@@ -7,13 +7,17 @@
   /**
    * @prop --background: Background of the segment button
    * @prop --background-checked: Background of the checked segment button
-   * @prop --background-disabled: Background of the disabled segment button
+   *
    * @prop --background-hover: Background of the segment button on hover
+   * @prop --background-focused: Background of the segment button when focused with the tab key
+   *
+   * @prop --background-hover-opacity: Opacity of the segment button background on hover
+   * @prop --background-focused-opacity: Opacity of the segment button background when focused with the tab key
    *
    * @prop --color: Color of the segment button
    * @prop --color-checked: Color of the checked segment button
-   * @prop --color-disabled: Color of the disabled segment button
    * @prop --color-hover: Color of the segment button on hover
+   * @prop --color-focused: Color of the segment button when focused with the tab key
    *
    * @prop --border-radius: Radius of the segment button border
    * @prop --border-color: Color of the segment button border
@@ -39,7 +43,7 @@
    * @prop --indicator-transform: Transform of the indicator for the checked segment button
    */
   --color: initial;
-  --color-hover: initial;
+  --color-hover: var(--color);
   --color-checked: var(--color);
   --color-disabled: var(--color);
   --padding-start: 0;
@@ -105,9 +109,29 @@
   contain: content;
   cursor: pointer;
 
+  overflow: hidden;
+
   z-index: 2;
 }
 
+.button-native::after {
+  @include button-state();
+}
+
+.button-inner {
+  display: flex;
+  position: relative;
+
+  flex-flow: inherit;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+
+  z-index: 1;
+}
+
 
 // Segment Button: Checked
 // --------------------------------------------------
@@ -122,22 +146,40 @@
 // --------------------------------------------------
 
 :host(.segment-button-disabled) {
-  background: var(--background-disabled);
-  color: var(--color-disabled);
+  cursor: default;
+  pointer-events: none;
 }
 
 
+// Segment Button: Focused
+// --------------------------------------------------
+
+:host(.ion-focused) .button-native {
+  color: var(--color-focused);
+
+  &::after {
+    background: var(--background-focused);
+
+    opacity: var(--background-focused-opacity);
+  }
+}
+
 // Segment Button: Hover
 // --------------------------------------------------
 
 @media (any-hover: hover) {
-  :host(:hover) {
-    background: var(--background-hover);
-    color: var(--color-hover, var(--color));
+  :host(:hover) .button-native {
+    color: var(--color-hover);
+
+    &::after {
+      background: var(--background-hover);
+
+      opacity: var(--background-hover-opacity);
+    }
   }
 
-  :host(.segment-button-checked:hover) {
-    color: var(--color-hover, var(--color-checked));
+  :host(.segment-button-checked:hover) .button-native {
+    color: var(--color-checked);
   }
 }
 
diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx
index 1cdfcc3c37..1bacfe1407 100644
--- a/core/src/components/segment-button/segment-button.tsx
+++ b/core/src/components/segment-button/segment-button.tsx
@@ -88,6 +88,8 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
           [mode]: true,
           'in-toolbar': hostContext('ion-toolbar', this.el),
           'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
+          'in-segment': hostContext('ion-segment', this.el),
+          'in-segment-color': hostContext('ion-segment[color]', this.el),
           'segment-button-has-label': hasLabel,
           'segment-button-has-icon': hasIcon,
           'segment-button-has-label-only': hasLabel && !hasIcon,
@@ -97,6 +99,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
           [`segment-button-layout-${layout}`]: true,
           'ion-activatable': true,
           'ion-activatable-instant': true,
+          'ion-focusable': true,
         }}
       >
         <button
@@ -105,7 +108,9 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
           class="button-native"
           disabled={disabled}
         >
-          <slot></slot>
+          <span class="button-inner">
+            <slot></slot>
+          </span>
           {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
         </button>
         <div
diff --git a/core/src/components/segment/segment.ios.scss b/core/src/components/segment/segment.ios.scss
index 556611fe66..1d87622808 100644
--- a/core/src/components/segment/segment.ios.scss
+++ b/core/src/components/segment/segment.ios.scss
@@ -14,10 +14,6 @@
   z-index: 0;
 }
 
-:host(.segment-disabled) {
-  opacity: $segment-button-ios-opacity-disabled;
-}
-
 
 // Segment: Color
 // --------------------------------------------------
@@ -26,10 +22,6 @@
   background: #{current-color(base, 0.065)};
 }
 
-:host(.ion-color) ::slotted(.segment-button-checked) {
-  color: #000;
-}
-
 
 // Segment: Activated
 // --------------------------------------------------
@@ -51,12 +43,6 @@
 // Default Segment, In a Toolbar
 :host(.in-toolbar:not(.ion-color)) {
   background: var(--ion-toolbar-segment-background, $segment-ios-background-color);
-  color: var(--ion-toolbar-segment-color, var(--color));
-}
-
-// Default Segment, In a Toolbar, Checked
-:host(.in-toolbar:not(.ion-color)) ::slotted(.segment-button-checked) {
-  color: var(--ion-toolbar-segment-color-checked, var(--color-checked));
 }
 
 
@@ -66,17 +52,4 @@
 // Toolbar with Color, Default Segment
 :host(.in-toolbar-color:not(.ion-color)) {
   background: #{current-color(contrast, 0.11)};
-  color: #{current-color(contrast)};
 }
-
-// Toolbar with Color, Default Segment, Checked
-:host(.in-toolbar-color:not(.ion-color)) ::slotted(.segment-button-checked) {
-  color: #{current-color(base)};
-}
-
-@media (any-hover: hover) {
-  // Toolbar with Color, Default Segment, Checked / Hover
-  :host(.in-toolbar-color:not(.ion-color)) ::slotted(.segment-button-checked:hover) {
-    color: #{current-color(base)};
-  }
-}
\ No newline at end of file
diff --git a/core/src/components/segment/segment.md.scss b/core/src/components/segment/segment.md.scss
index 998bf9e0c8..ab60499cce 100644
--- a/core/src/components/segment/segment.md.scss
+++ b/core/src/components/segment/segment.md.scss
@@ -8,73 +8,6 @@
   --background: transparent;
 }
 
-:host(.segment-disabled) {
-  opacity: $segment-md-opacity-disabled;
-}
-
-// Segment: Color
-// --------------------------------------------------
-
-:host(.ion-color) ::slotted(ion-segment-button) {
-  --ripple-color: #{current-color(base)};
-  --indicator-color: #{current-color(base)};
-
-  background: transparent;
-  color: $segment-button-md-text-color;
-}
-
-:host(.ion-color) ::slotted(.segment-button-checked) {
-  color: #{current-color(base)};
-}
-
-@media (any-hover: hover) {
-  :host(.ion-color) ::slotted(ion-segment-button:hover) {
-    background: #{current-color(base, .04)};
-  }
-}
-
-// Segment: Default Toolbar
-// --------------------------------------------------
-
-// Default Segment, In a Toolbar
-:host(.in-toolbar:not(.ion-color)) ::slotted(ion-segment-button) {
-  --indicator-color: #{var(--ion-toolbar-segment-color-checked, var(--color-checked))};
-
-  background: #{var(--ion-toolbar-segment-background, var(--background))};
-  color: #{var(--ion-toolbar-segment-color, var(--color))};
-}
-
-// Default Segment, In a Toolbar, Checked
-:host(.in-toolbar:not(.ion-color)) ::slotted(.segment-button-checked) {
-  background: #{var(--ion-toolbar-segment-background-checked, var(--background-checked))};
-  color: #{var(--ion-toolbar-segment-color-checked, var(--color-checked))};
-}
-
-
-// Segment: Toolbar Color
-// --------------------------------------------------
-
-// Default Segment, In a Toolbar with Color
-:host(.in-toolbar-color:not(.ion-color)) ::slotted(ion-segment-button) {
-  color: #{current-color(contrast, .6)};
-}
-
-// Default Segment, In a Toolbar with Color, Checked
-:host(.in-toolbar-color:not(.ion-color)) ::slotted(.segment-button-checked) {
-  color: #{current-color(contrast)};
-}
-
-
-// Segment: Toolbar Hover
-// --------------------------------------------------
-
-@media (any-hover: hover) {
-  // Default Segment, In a Toolbar with Color, Hover
-  :host(.in-toolbar-color:not(.ion-color)) ::slotted(ion-segment-button:hover) {
-    background: #{ion-color(primary, contrast, .04)};
-  }
-}
-
 
 // Segment: Scrollable
 // --------------------------------------------------
diff --git a/core/src/components/segment/segment.md.vars.scss b/core/src/components/segment/segment.md.vars.scss
index 9d12593879..ee98aab17f 100644
--- a/core/src/components/segment/segment.md.vars.scss
+++ b/core/src/components/segment/segment.md.vars.scss
@@ -3,6 +3,3 @@
 
 // Material Design Segment
 // --------------------------------------------------
-
-/// @prop - Opacity of the disabled segment
-$segment-md-opacity-disabled:                         .3 !default;
diff --git a/core/src/components/segment/segment.scss b/core/src/components/segment/segment.scss
index a72886b404..bdb520026d 100644
--- a/core/src/components/segment/segment.scss
+++ b/core/src/components/segment/segment.scss
@@ -30,15 +30,6 @@
 }
 
 
-// Segment: Disabled
-// --------------------------------------------------
-
-:host(.segment-disabled),
-::slotted(.segment-button-disabled) {
-  pointer-events: none;
-}
-
-
 // Segment: Scrollable
 // --------------------------------------------------
 
@@ -53,19 +44,3 @@
 :host(.segment-scrollable::-webkit-scrollbar) {
   display: none;
 }
-
-// Segment Button: Hover
-// --------------------------------------------------
-
-@media (any-hover: hover) {
-  // Default Segment, In a Default Toolbar, Hover
-  :host(.in-toolbar:not(.ion-color)) ::slotted(ion-segment-button:hover) {
-    background: var(--ion-toolbar-segment-background-hover, var(--background-hover));
-    color: var(--ion-toolbar-segment-color-hover, var(--color-hover, var(--ion-toolbar-segment-color, var(--color))));
-  }
-
-  // Default Segment, In a Default Toolbar, Checked / Hover
-  :host(.in-toolbar:not(.ion-color)) ::slotted(.segment-button-checked:hover) {
-    color: var(--ion-toolbar-segment-color-hover, var(--color-hover, var(--ion-toolbar-segment-color-checked, var(--color-checked))));
-  }
-}
\ No newline at end of file
diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index dd043be7d3..4fbb51bb3a 100644
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -70,6 +70,15 @@ export class Segment implements ComponentInterface {
 
   @Watch('disabled')
   disabledChanged() {
+    this.gestureChanged();
+
+    const buttons = this.getButtons();
+    for (const button of buttons) {
+      button.disabled = this.disabled;
+    }
+  }
+
+  private gestureChanged() {
     if (this.gesture && !this.scrollable) {
       this.gesture.enable(!this.disabled);
     }
@@ -97,7 +106,11 @@ export class Segment implements ComponentInterface {
       onEnd: ev => this.onEnd(ev),
     });
     this.gesture.enable(!this.scrollable);
-    this.disabledChanged();
+    this.gestureChanged();
+
+    if (this.disabled) {
+      this.disabledChanged();
+    }
     this.didInit = true;
   }
 
diff --git a/core/src/components/segment/test/basic/index.html b/core/src/components/segment/test/basic/index.html
index cad6fb37de..f678bc896e 100644
--- a/core/src/components/segment/test/basic/index.html
+++ b/core/src/components/segment/test/basic/index.html
@@ -103,13 +103,13 @@
 
         <ion-segment color="dark" value="Reading List">
           <ion-segment-button value="Bookmarks">
-            <ion-icon name="md-book"></ion-icon>
+            <ion-icon name="book"></ion-icon>
           </ion-segment-button>
           <ion-segment-button value="Reading List">
             <ion-icon name="search"></ion-icon>
           </ion-segment-button>
           <ion-segment-button value="Shared Links">
-            <ion-icon name="md-time"></ion-icon>
+            <ion-icon name="time"></ion-icon>
           </ion-segment-button>
         </ion-segment>
 
diff --git a/core/src/components/segment/test/colors/e2e.ts b/core/src/components/segment/test/colors/e2e.ts
index c026c7afb6..f026f7d26f 100644
--- a/core/src/components/segment/test/colors/e2e.ts
+++ b/core/src/components/segment/test/colors/e2e.ts
@@ -1,8 +1,8 @@
 import { newE2EPage } from '@stencil/core/testing';
 
-test('segment: basic', async () => {
+test('segment: colors', async () => {
   const page = await newE2EPage({
-    url: '/src/components/segment/test/basic?ionic:_testing=true'
+    url: '/src/components/segment/test/colors?ionic:_testing=true'
   });
 
   await page.waitFor(250);
@@ -11,9 +11,9 @@ test('segment: basic', async () => {
   expect(compare).toMatchScreenshot();
 });
 
-test('segment:rtl: basic', async () => {
+test('segment:rtl: colors', async () => {
   const page = await newE2EPage({
-    url: '/src/components/segment/test/basic?ionic:_testing=true&rtl=true'
+    url: '/src/components/segment/test/colors?ionic:_testing=true&rtl=true'
   });
 
   await page.waitFor(250);
diff --git a/core/src/components/segment/test/colors/index.html b/core/src/components/segment/test/colors/index.html
index 008a9d955a..0d77fc70de 100644
--- a/core/src/components/segment/test/colors/index.html
+++ b/core/src/components/segment/test/colors/index.html
@@ -23,6 +23,7 @@
     </ion-header>
 
     <ion-content class="ion-padding">
+      <!-- Default NO COLOR -->
       <ion-segment value="free">
         <ion-segment-button value="paid">
           Paid
@@ -35,135 +36,149 @@
         </ion-segment-button>
       </ion-segment>
 
-      <ion-segment color="primary" value="reading-list">
-        <ion-segment-button value="bookmarks">
-          Bookmarks
-        </ion-segment-button>
-        <ion-segment-button value="reading-list">
-          Reading List
-        </ion-segment-button>
-        <ion-segment-button value="shared-links">
-          Shared Links
-        </ion-segment-button>
-      </ion-segment>
+      <div class="customize-all">
+        <ion-segment value="free">
+          <ion-segment-button value="paid">
+            Custom
+          </ion-segment-button>
+          <ion-segment-button value="free">
+            Colors
+          </ion-segment-button>
+          <ion-segment-button value="top">
+            All
+          </ion-segment-button>
+        </ion-segment>
 
-      <ion-segment color="secondary" value="active">
-        <ion-segment-button value="active">
-          Active
-        </ion-segment-button>
-        <ion-segment-button value="disabled" disabled="true">
-          Disabled
-        </ion-segment-button>
-        <ion-segment-button value="inactive" disabled="false">
-          Inactive
-        </ion-segment-button>
-      </ion-segment>
+        <ion-segment color="primary" value="reading-list">
+          <ion-segment-button value="bookmarks">
+            Bookmarks
+          </ion-segment-button>
+          <ion-segment-button value="reading-list">
+            Reading List
+          </ion-segment-button>
+          <ion-segment-button value="shared-links">
+            Shared Links
+          </ion-segment-button>
+        </ion-segment>
 
-      <ion-segment color="tertiary" value="all">
-        <ion-segment-button value="all">
-          All
-        </ion-segment-button>
-        <ion-segment-button value="missed">
-          Missed
-        </ion-segment-button>
-      </ion-segment>
+        <ion-segment color="secondary" value="active">
+          <ion-segment-button value="active">
+            Active
+          </ion-segment-button>
+          <ion-segment-button value="disabled" disabled="true">
+            Disabled
+          </ion-segment-button>
+          <ion-segment-button value="inactive" disabled="false">
+            Inactive
+          </ion-segment-button>
+        </ion-segment>
 
-      <ion-segment color="success" value="330">
-        <ion-segment-button value="330">
-          <ion-label>330ml</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="440">
-          <ion-label>440ml</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="500">
-          <ion-label>500ml</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="custom">
-          <ion-icon name="create"></ion-icon>
-        </ion-segment-button>
-      </ion-segment>
+        <ion-segment color="tertiary" value="all">
+          <ion-segment-button value="all">
+            All
+          </ion-segment-button>
+          <ion-segment-button value="missed">
+            Missed
+          </ion-segment-button>
+        </ion-segment>
 
-      <ion-segment color="warning" value="reading-list">
-        <ion-segment-button value="bookmarks">
-          <ion-icon name="book"></ion-icon>
-        </ion-segment-button>
-        <ion-segment-button value="reading-list">
-          <ion-icon name="glasses"></ion-icon>
-        </ion-segment-button>
-        <ion-segment-button value="shared-links">
-          <ion-icon name="at"></ion-icon>
-        </ion-segment-button>
-      </ion-segment>
+        <ion-segment color="success" value="330">
+          <ion-segment-button value="330">
+            <ion-label>330ml</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="440">
+            <ion-label>440ml</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="500">
+            <ion-label>500ml</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="custom">
+            <ion-icon name="create"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
 
-      <ion-segment color="danger" value="bookmarks">
-        <ion-segment-button value="bookmarks">
-          <ion-label>Bookmarks</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="reading-list">
-          <ion-label>Reading List</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="shared-links">
-          <ion-label>Shared Links</ion-label>
-        </ion-segment-button>
-      </ion-segment>
+        <ion-segment color="warning" value="reading-list">
+          <ion-segment-button value="bookmarks">
+            <ion-icon name="book"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="reading-list">
+            <ion-icon name="glasses"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="shared-links">
+            <ion-icon name="at"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment color="danger" value="bookmarks">
+          <ion-segment-button value="bookmarks">
+            <ion-label>Bookmarks</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="reading-list">
+            <ion-label>Reading List</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="shared-links">
+            <ion-label>Shared Links</ion-label>
+          </ion-segment-button>
+        </ion-segment>
 
 
-      <ion-segment color="light" value="rainy">
-        <ion-segment-button value="sunny">
-          Sunny
-        </ion-segment-button>
-        <ion-segment-button value="rainy">
-          Rainy
-        </ion-segment-button>
-      </ion-segment>
+        <ion-segment color="light" value="rainy">
+          <ion-segment-button value="sunny">
+            Sunny
+          </ion-segment-button>
+          <ion-segment-button value="rainy">
+            Rainy
+          </ion-segment-button>
+        </ion-segment>
 
-      <ion-segment color="medium" value="seg1">
-        <ion-segment-button value="seg1">
-          <ion-label>Seg 1</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="seg2">
-          <ion-label>Seg 2</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="seg3">
-          <ion-label>Seg 3</ion-label>
-        </ion-segment-button>
-      </ion-segment>
+        <ion-segment color="medium" value="seg1">
+          <ion-segment-button value="seg1">
+            <ion-label>Seg 1</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="seg2">
+            <ion-label>Seg 2</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="seg3">
+            <ion-label>Seg 3</ion-label>
+          </ion-segment-button>
+        </ion-segment>
 
-      <ion-segment color="dark" value="seg22">
-        <ion-segment-button value="seg21">
-          <ion-label>Seg 2 1</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="seg22">
-          <ion-label>Seg 2 2</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="seg23">
-          <ion-label>Seg 2 3</ion-label>
-        </ion-segment-button>
-      </ion-segment>
+        <ion-segment color="dark" value="seg22">
+          <ion-segment-button value="seg21">
+            <ion-label>Seg 2 1</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="seg22">
+            <ion-label>Seg 2 2</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="seg23">
+            <ion-label>Seg 2 3</ion-label>
+          </ion-segment-button>
+        </ion-segment>
 
-      <ion-segment disabled color="danger" value="seg22">
-        <ion-segment-button  value="seg21">
-          <ion-label>Seg 2 1</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="seg22">
-          <ion-label>Seg 2 2</ion-label>
-        </ion-segment-button>
-        <ion-segment-button  value="seg23">
-          <ion-label>Seg 2 3</ion-label>
-        </ion-segment-button>
-      </ion-segment>
+        <ion-segment disabled color="danger" value="seg22">
+          <ion-segment-button value="seg21">
+            <ion-label>Seg 2 1</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="seg22">
+            <ion-label>Seg 2 2</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="seg23">
+            <ion-label>Seg 2 3</ion-label>
+          </ion-segment-button>
+        </ion-segment>
 
-      <ion-segment disabled color="medium" value="seg22">
-        <ion-segment-button value="seg21">
-          <ion-label>Seg 2 1</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="seg22">
-          <ion-label>Seg 2 2</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="seg23">
-          <ion-label>Seg 2 3</ion-label>
-        </ion-segment-button>
-      </ion-segment>
+        <ion-segment disabled color="medium" value="seg22">
+          <ion-segment-button value="seg21">
+            <ion-label>Seg 2 1</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="seg22">
+            <ion-label>Seg 2 2</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="seg23">
+            <ion-label>Seg 2 3</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      </div>
     </ion-content>
 
     <style>
@@ -171,6 +186,22 @@
         margin-bottom: 10px;
       }
 
+      .md .customize-all ion-segment-button {
+        --color: red;
+        --background: rgba(0, 0, 0, 0.2);
+        --ripple-color: red;
+        --indicator-color: red;
+      }
+
+      .ios .customize-all ion-segment {
+        --background: rgba(51, 17, 17, 0.15);
+      }
+
+      .ios .customize-all ion-segment-button {
+        --color: purple;
+        --indicator-color: lightpink;
+      }
+
     </style>
   </ion-app>
 </body>
diff --git a/core/src/components/segment/test/toolbar/index.html b/core/src/components/segment/test/toolbar/index.html
index ddb44c3302..b9e991ea48 100644
--- a/core/src/components/segment/test/toolbar/index.html
+++ b/core/src/components/segment/test/toolbar/index.html
@@ -126,7 +126,7 @@
       </ion-toolbar>
 
       <!-- Label only -->
-      <ion-toolbar color="primary">
+      <ion-toolbar color="warning">
         <ion-segment value="1">
           <ion-segment-button value="1">
             <ion-label>Item One</ion-label>
diff --git a/core/src/components/tab-bar/tab-bar.ios.scss b/core/src/components/tab-bar/tab-bar.ios.scss
index f035bf2bb4..1993928ec3 100644
--- a/core/src/components/tab-bar/tab-bar.ios.scss
+++ b/core/src/components/tab-bar/tab-bar.ios.scss
@@ -10,7 +10,7 @@
   --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};
+  --color-selected: #{$tabbar-ios-color-selected};
 
   height: 50px;
 }
diff --git a/core/src/components/tab-bar/tab-bar.md.scss b/core/src/components/tab-bar/tab-bar.md.scss
index 4363520fad..5b2346936a 100644
--- a/core/src/components/tab-bar/tab-bar.md.scss
+++ b/core/src/components/tab-bar/tab-bar.md.scss
@@ -8,7 +8,7 @@
   --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};
+  --color-selected: #{$tabbar-md-color-selected};
 
   height: 56px;
 }
\ No newline at end of file
diff --git a/core/src/components/tab-bar/test/basic/index.html b/core/src/components/tab-bar/test/basic/index.html
index 07febe05c9..17c908274b 100644
--- a/core/src/components/tab-bar/test/basic/index.html
+++ b/core/src/components/tab-bar/test/basic/index.html
@@ -4,193 +4,199 @@
 <head>
   <meta charset="UTF-8">
   <title>Tab Bar - Preview</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">
+  <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="../../../../../scripts/testing/scripts.js"></script>
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>  <link rel="stylesheet" href="../../../../../css/ionic.bundle.css">
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="../../../../../css/ionic.bundle.css">
   <link rel="stylesheet" href="../../../../../scripts/testing/styles.css">
 </head>
 
 <body>
-  <!-- Default -->
-  <ion-tab-bar selected-tab="1">
+  <ion-app>
+    <ion-content>
+      <!-- Default -->
+      <ion-tab-bar selected-tab="1">
 
-    <ion-tab-button tab="1">
-      <ion-label>Recents</ion-label>
-    </ion-tab-button>
+        <ion-tab-button tab="1">
+          <ion-label>Recents</ion-label>
+        </ion-tab-button>
 
-    <ion-tab-button tab="2">
-      <ion-label>Favorites</ion-label>
-      <ion-badge>23</ion-badge>
-    </ion-tab-button>
+        <ion-tab-button tab="2">
+          <ion-label>Favorites</ion-label>
+          <ion-badge>23</ion-badge>
+        </ion-tab-button>
 
-    <ion-tab-button tab="3">
-      <ion-label>Settings</ion-label>
-    </ion-tab-button>
+        <ion-tab-button tab="3">
+          <ion-label>Settings</ion-label>
+        </ion-tab-button>
 
-  </ion-tab-bar>
+      </ion-tab-bar>
 
-  <!-- Badges -->
-  <ion-tab-bar selected-tab="1">
-    <ion-tab-button tab="1">
-      <ion-icon name="heart"></ion-icon>
-      <ion-label>Favorites</ion-label>
-      <ion-badge color="danger"></ion-badge>
-    </ion-tab-button>
+      <!-- Badges -->
+      <ion-tab-bar selected-tab="1">
+        <ion-tab-button tab="1">
+          <ion-icon name="heart"></ion-icon>
+          <ion-label>Favorites</ion-label>
+          <ion-badge color="danger"></ion-badge>
+        </ion-tab-button>
 
-    <ion-tab-button tab="2">
-      <ion-icon name="musical-note"></ion-icon>
-    </ion-tab-button>
+        <ion-tab-button tab="2">
+          <ion-icon name="musical-note"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="3">
-      <ion-icon name="today"></ion-icon>
-    </ion-tab-button>
+        <ion-tab-button tab="3">
+          <ion-icon name="today"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="4">
-      <ion-icon name="calendar"></ion-icon>
-      <ion-badge color="danger">47</ion-badge>
-    </ion-tab-button>
-  </ion-tab-bar>
+        <ion-tab-button tab="4">
+          <ion-icon name="calendar"></ion-icon>
+          <ion-badge color="danger">47</ion-badge>
+        </ion-tab-button>
+      </ion-tab-bar>
 
-  <ion-tab-bar selected-tab="1">
-    <ion-tab-button tab="1">
-      <ion-icon name="musical-note"></ion-icon>
-    </ion-tab-button>
+      <ion-tab-bar selected-tab="1">
+        <ion-tab-button tab="1">
+          <ion-icon name="musical-note"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="2" layout="icon-bottom">
-      <ion-icon name="heart"></ion-icon>
-      <ion-label>Favorites</ion-label>
-    </ion-tab-button>
+        <ion-tab-button tab="2" layout="icon-bottom">
+          <ion-icon name="heart"></ion-icon>
+          <ion-label>Favorites</ion-label>
+        </ion-tab-button>
 
-    <ion-tab-button tab="3">
-      <ion-icon name="today"></ion-icon>
-      <ion-badge color="danger">88</ion-badge>
-    </ion-tab-button>
+        <ion-tab-button tab="3">
+          <ion-icon name="today"></ion-icon>
+          <ion-badge color="danger">88</ion-badge>
+        </ion-tab-button>
 
-    <ion-tab-button tab="4">
-      <ion-icon name="calendar"></ion-icon>
-    </ion-tab-button>
-  </ion-tab-bar>
+        <ion-tab-button tab="4">
+          <ion-icon name="calendar"></ion-icon>
+        </ion-tab-button>
+      </ion-tab-bar>
 
-  <ion-tab-bar selected-tab="1">
-    <ion-tab-button tab="1">
-      <ion-icon name="heart"></ion-icon>
-    </ion-tab-button>
+      <ion-tab-bar selected-tab="1">
+        <ion-tab-button tab="1">
+          <ion-icon name="heart"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="2">
-      <ion-icon name="musical-note"></ion-icon>
-    </ion-tab-button>
+        <ion-tab-button tab="2">
+          <ion-icon name="musical-note"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="3">
-      <ion-icon name="today"></ion-icon>
-    </ion-tab-button>
-  </ion-tab-bar>
+        <ion-tab-button tab="3">
+          <ion-icon name="today"></ion-icon>
+        </ion-tab-button>
+      </ion-tab-bar>
 
 
-  <!-- Icons on top of text -->
-  <ion-tab-bar color="secondary" selected-tab="1">
-    <ion-tab-button tab="1">
-      <ion-label>Location</ion-label>
-      <ion-icon name="navigate"></ion-icon>
-    </ion-tab-button>
+      <!-- Icons on top of text -->
+      <ion-tab-bar color="secondary" selected-tab="1">
+        <ion-tab-button tab="1">
+          <ion-label>Location</ion-label>
+          <ion-icon name="navigate"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="2">
-      <ion-badge color="danger">44</ion-badge>
-      <ion-icon name="heart"></ion-icon>
-    </ion-tab-button>
+        <ion-tab-button tab="2">
+          <ion-badge color="danger">44</ion-badge>
+          <ion-icon name="heart"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="3">
-      <ion-label>Radio</ion-label>
-      <ion-icon name="musical-notes"></ion-icon>
-    </ion-tab-button>
+        <ion-tab-button tab="3">
+          <ion-label>Radio</ion-label>
+          <ion-icon name="musical-notes"></ion-icon>
+        </ion-tab-button>
 
-  </ion-tab-bar>
+      </ion-tab-bar>
 
 
-  <!-- Icons below text -->
-  <ion-tab-bar color="dark" selected-tab="1">
-    <ion-tab-button tab="1" layout="icon-bottom">
-      <ion-label>Recents</ion-label>
-      <ion-icon name="call"></ion-icon>
-    </ion-tab-button>
+      <!-- Icons below text -->
+      <ion-tab-bar color="dark" selected-tab="1">
+        <ion-tab-button tab="1" layout="icon-bottom">
+          <ion-label>Recents</ion-label>
+          <ion-icon name="call"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="2">
-      <ion-badge>16</ion-badge>
-      <ion-label>Favorites</ion-label>
-      <ion-icon name="heart"></ion-icon>
-    </ion-tab-button>
+        <ion-tab-button tab="2">
+          <ion-badge>16</ion-badge>
+          <ion-label>Favorites</ion-label>
+          <ion-icon name="heart"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="3" layout="icon-bottom">
-      <ion-label>Settings</ion-label>
-      <ion-icon name="settings"></ion-icon>
-    </ion-tab-button>
-  </ion-tab-bar>
+        <ion-tab-button tab="3" layout="icon-bottom">
+          <ion-label>Settings</ion-label>
+          <ion-icon name="settings"></ion-icon>
+        </ion-tab-button>
+      </ion-tab-bar>
 
 
-  <!-- Icons right of text -->
-  <ion-tab-bar color="danger" selected-tab="1">
-    <ion-tab-button tab="1" layout="icon-end">
-      <ion-label>Recents</ion-label>
-      <ion-icon name="call"></ion-icon>
-    </ion-tab-button>
+      <!-- Icons right of text -->
+      <ion-tab-bar color="danger" selected-tab="1">
+        <ion-tab-button tab="1" layout="icon-end">
+          <ion-label>Recents</ion-label>
+          <ion-icon name="call"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="2" layout="icon-end">
-      <ion-label>Favorites</ion-label>
-      <ion-icon name="heart"></ion-icon>
-      <ion-badge color="dark">33</ion-badge>
-    </ion-tab-button>
+        <ion-tab-button tab="2" layout="icon-end">
+          <ion-label>Favorites</ion-label>
+          <ion-icon name="heart"></ion-icon>
+          <ion-badge color="dark">33</ion-badge>
+        </ion-tab-button>
 
-    <ion-tab-button tab="3" layout="icon-end">
-      <ion-label>Settings</ion-label>
-      <ion-icon name="settings"></ion-icon>
-    </ion-tab-button>
+        <ion-tab-button tab="3" layout="icon-end">
+          <ion-label>Settings</ion-label>
+          <ion-icon name="settings"></ion-icon>
+        </ion-tab-button>
 
-  </ion-tab-bar>
+      </ion-tab-bar>
 
 
-  <!-- Icons left of text -->
-  <ion-tab-bar color="light" selected-tab="1">
-    <ion-tab-button tab="1" layout="icon-start">
-      <ion-label>Recents</ion-label>
-      <ion-icon name="call"></ion-icon>
-      <ion-badge color="danger">12</ion-badge>
-    </ion-tab-button>
+      <!-- Icons left of text -->
+      <ion-tab-bar color="light" selected-tab="1">
+        <ion-tab-button tab="1" layout="icon-start">
+          <ion-label>Recents</ion-label>
+          <ion-icon name="call"></ion-icon>
+          <ion-badge color="danger">12</ion-badge>
+        </ion-tab-button>
 
-    <ion-tab-button tab="2" layout="icon-start">
-      <ion-label>Favorites</ion-label>
-      <ion-icon name="heart"></ion-icon>
-    </ion-tab-button>
+        <ion-tab-button tab="2" layout="icon-start">
+          <ion-label>Favorites</ion-label>
+          <ion-icon name="heart"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="3" layout="icon-start">
-      <ion-label>Settings</ion-label>
-      <ion-icon name="settings"></ion-icon>
-    </ion-tab-button>
+        <ion-tab-button tab="3" layout="icon-start">
+          <ion-label>Settings</ion-label>
+          <ion-icon name="settings"></ion-icon>
+        </ion-tab-button>
 
-  </ion-tab-bar>
+      </ion-tab-bar>
 
 
-  <!-- No icons -->
-  <ion-tab-bar color="primary" selected-tab="1">
-    <ion-tab-button tab="1" layout="icon-hide">
-      <ion-label>Recents</ion-label>
-      <ion-icon name="call"></ion-icon>
-    </ion-tab-button>
+      <!-- No icons -->
+      <ion-tab-bar color="primary" selected-tab="1">
+        <ion-tab-button tab="1" layout="icon-hide">
+          <ion-label>Recents</ion-label>
+          <ion-icon name="call"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="2" layout="icon-hide">
-      <ion-label>Favorites</ion-label>
-      <ion-icon name="heart"></ion-icon>
-    </ion-tab-button>
+        <ion-tab-button tab="2" layout="icon-hide">
+          <ion-label>Favorites</ion-label>
+          <ion-icon name="heart"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="3" layout="icon-hide">
-      <ion-label>Settings</ion-label>
-      <ion-icon name="settings"></ion-icon>
-      <ion-badge color="danger">2</ion-badge>
-    </ion-tab-button>
-  </ion-tab-bar>
+        <ion-tab-button tab="3" layout="icon-hide">
+          <ion-label>Settings</ion-label>
+          <ion-icon name="settings"></ion-icon>
+          <ion-badge color="danger">2</ion-badge>
+        </ion-tab-button>
+      </ion-tab-bar>
+    </ion-content>
+  </ion-app>
 
   <style>
-    body {
-      background: #f6f6f6;
+    ion-content {
+      --background: #f6f6f6;
     }
 
     ion-tab-bar {
diff --git a/core/src/components/tab-bar/test/scenarios/index.html b/core/src/components/tab-bar/test/scenarios/index.html
index 445f21f347..443d07fa66 100644
--- a/core/src/components/tab-bar/test/scenarios/index.html
+++ b/core/src/components/tab-bar/test/scenarios/index.html
@@ -4,223 +4,229 @@
 <head>
   <meta charset="UTF-8">
   <title>Tab Bar - Scenarios</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">
+  <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="../../../../../scripts/testing/scripts.js"></script>
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>  <link rel="stylesheet" href="../../../../../css/ionic.bundle.css">
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="../../../../../css/ionic.bundle.css">
   <link rel="stylesheet" href="../../../../../scripts/testing/styles.css">
 </head>
 
 <body>
-  <!-- Default -->
-  <ion-tab-bar selected-tab="1">
+  <ion-app>
+    <ion-content>
+      <!-- Default -->
+      <ion-tab-bar selected-tab="1">
 
-    <ion-tab-button tab="1">
-      <ion-label>Recents</ion-label>
-    </ion-tab-button>
+        <ion-tab-button tab="1">
+          <ion-label>Recents</ion-label>
+        </ion-tab-button>
 
-    <ion-tab-button tab="2">
-      <ion-label>Favorites</ion-label>
-      <ion-badge>6</ion-badge>
-    </ion-tab-button>
+        <ion-tab-button tab="2">
+          <ion-label>Favorites</ion-label>
+          <ion-badge>6</ion-badge>
+        </ion-tab-button>
 
-    <ion-tab-button tab="3">
-      <ion-label>Settings</ion-label>
-    </ion-tab-button>
+        <ion-tab-button tab="3">
+          <ion-label>Settings</ion-label>
+        </ion-tab-button>
 
-  </ion-tab-bar>
+      </ion-tab-bar>
 
 
-  <!-- Icons -->
-  <ion-tab-bar color="primary" selected-tab="1">
-    <ion-tab-button tab="1">
-      <ion-icon name="call"></ion-icon>
-    </ion-tab-button>
+      <!-- Icons -->
+      <ion-tab-bar color="primary" selected-tab="1">
+        <ion-tab-button tab="1">
+          <ion-icon name="call"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="2" selected-tab="1">
-      <ion-icon name="heart"></ion-icon>
-    </ion-tab-button>
+        <ion-tab-button tab="2" selected-tab="1">
+          <ion-icon name="heart"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="3">
-      <ion-icon name="settings"></ion-icon>
-    </ion-tab-button>
-  </ion-tab-bar>
+        <ion-tab-button tab="3">
+          <ion-icon name="settings"></ion-icon>
+        </ion-tab-button>
+      </ion-tab-bar>
 
-  <!-- Icons on top of text -->
-  <ion-tab-bar color="secondary" selected-tab="1">
-    <ion-tab-button tab="1">
-      <ion-label>Location</ion-label>
-      <ion-icon name="navigate-circle"></ion-icon>
-    </ion-tab-button>
+      <!-- Icons on top of text -->
+      <ion-tab-bar color="secondary" selected-tab="1">
+        <ion-tab-button tab="1">
+          <ion-label>Location</ion-label>
+          <ion-icon name="navigate-circle"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="2">
-      <ion-badge>6</ion-badge>
-      <ion-icon name="heart"></ion-icon>
-    </ion-tab-button>
+        <ion-tab-button tab="2">
+          <ion-badge>6</ion-badge>
+          <ion-icon name="heart"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="3">
-      <ion-label>Radio</ion-label>
-      <ion-icon name="musical-notes"></ion-icon>
-    </ion-tab-button>
+        <ion-tab-button tab="3">
+          <ion-label>Radio</ion-label>
+          <ion-icon name="musical-notes"></ion-icon>
+        </ion-tab-button>
 
-  </ion-tab-bar>
+      </ion-tab-bar>
 
 
-  <!-- Icons below text -->
-  <ion-tab-bar color="dark" selected-tab="1">
+      <!-- Icons below text -->
+      <ion-tab-bar color="dark" selected-tab="1">
 
-    <ion-tab-button tab="1" layout="icon-bottom">
-      <ion-label>Recents</ion-label>
-      <ion-icon name="call"></ion-icon>
-    </ion-tab-button>
+        <ion-tab-button tab="1" layout="icon-bottom">
+          <ion-label>Recents</ion-label>
+          <ion-icon name="call"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="2">
-      <ion-badge>6</ion-badge>
-      <ion-label>hi</ion-label>
-      <ion-icon name="heart"></ion-icon>
-    </ion-tab-button>
+        <ion-tab-button tab="2">
+          <ion-badge>6</ion-badge>
+          <ion-label>hi</ion-label>
+          <ion-icon name="heart"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="3" layout="icon-bottom">
-      <ion-label>Settings</ion-label>
-      <ion-icon name="settings"></ion-icon>
-    </ion-tab-button>
+        <ion-tab-button tab="3" layout="icon-bottom">
+          <ion-label>Settings</ion-label>
+          <ion-icon name="settings"></ion-icon>
+        </ion-tab-button>
 
-  </ion-tab-bar>
+      </ion-tab-bar>
 
 
-  <!-- Icons right of text -->
-  <ion-tab-bar color="danger" selected-tab="1">
-    <ion-tab-button tab="1" layout="icon-end">
-      <ion-label>Recents</ion-label>
-      <ion-icon name="call"></ion-icon>
-    </ion-tab-button>
+      <!-- Icons right of text -->
+      <ion-tab-bar color="danger" selected-tab="1">
+        <ion-tab-button tab="1" layout="icon-end">
+          <ion-label>Recents</ion-label>
+          <ion-icon name="call"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="2" layout="icon-end">
-      <ion-label>Favorites</ion-label>
-      <ion-icon name="heart"></ion-icon>
-      <ion-badge>6</ion-badge>
-    </ion-tab-button>
+        <ion-tab-button tab="2" layout="icon-end">
+          <ion-label>Favorites</ion-label>
+          <ion-icon name="heart"></ion-icon>
+          <ion-badge>6</ion-badge>
+        </ion-tab-button>
 
-    <ion-tab-button tab="3" layout="icon-end">
-      <ion-label>Settings</ion-label>
-      <ion-icon name="settings"></ion-icon>
-    </ion-tab-button>
+        <ion-tab-button tab="3" layout="icon-end">
+          <ion-label>Settings</ion-label>
+          <ion-icon name="settings"></ion-icon>
+        </ion-tab-button>
 
-  </ion-tab-bar>
+      </ion-tab-bar>
 
 
-  <!-- Icons left of text -->
-  <ion-tab-bar color="light" selected-tab="1">
-    <ion-tab-button tab="1" layout="icon-start">
-      <ion-label>Recents</ion-label>
-      <ion-icon name="call"></ion-icon>
-    </ion-tab-button>
+      <!-- Icons left of text -->
+      <ion-tab-bar color="light" selected-tab="1">
+        <ion-tab-button tab="1" layout="icon-start">
+          <ion-label>Recents</ion-label>
+          <ion-icon name="call"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="2" layout="icon-start">
-      <ion-label>Favorites</ion-label>
-      <ion-icon name="heart"></ion-icon>
-      <ion-badge color="danger">6</ion-badge>
-    </ion-tab-button>
+        <ion-tab-button tab="2" layout="icon-start">
+          <ion-label>Favorites</ion-label>
+          <ion-icon name="heart"></ion-icon>
+          <ion-badge color="danger">6</ion-badge>
+        </ion-tab-button>
 
-    <ion-tab-button tab="3" layout="icon-start">
-      <ion-label>Settings</ion-label>
-      <ion-icon name="settings"></ion-icon>
-    </ion-tab-button>
+        <ion-tab-button tab="3" layout="icon-start">
+          <ion-label>Settings</ion-label>
+          <ion-icon name="settings"></ion-icon>
+        </ion-tab-button>
 
-  </ion-tab-bar>
+      </ion-tab-bar>
 
 
-  <!-- No icons -->
-  <ion-tab-bar color="primary" selected-tab="1">
-    <ion-tab-button tab="1" layout="icon-hide">
-      <ion-label>Recents</ion-label>
-      <ion-icon name="call"></ion-icon>
-    </ion-tab-button>
+      <!-- No icons -->
+      <ion-tab-bar color="primary" selected-tab="1">
+        <ion-tab-button tab="1" layout="icon-hide">
+          <ion-label>Recents</ion-label>
+          <ion-icon name="call"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="2" layout="icon-hide">
-      <ion-label>Favorites</ion-label>
-      <ion-icon name="heart"></ion-icon>
-      <ion-badge color="danger">6</ion-badge>
-    </ion-tab-button>
+        <ion-tab-button tab="2" layout="icon-hide">
+          <ion-label>Favorites</ion-label>
+          <ion-icon name="heart"></ion-icon>
+          <ion-badge color="danger">6</ion-badge>
+        </ion-tab-button>
 
-    <ion-tab-button tab="3" layout="icon-hide">
-      <ion-label>Settings</ion-label>
-      <ion-icon name="settings"></ion-icon>
-    </ion-tab-button>
-  </ion-tab-bar>
+        <ion-tab-button tab="3" layout="icon-hide">
+          <ion-label>Settings</ion-label>
+          <ion-icon name="settings"></ion-icon>
+        </ion-tab-button>
+      </ion-tab-bar>
 
 
-  <!-- No label -->
-  <ion-tab-bar color="secondary" selected-tab="1">
-    <ion-tab-button tab="1" layout="label-hide">
-      <ion-label>Recents</ion-label>
-      <ion-icon name="navigate-circle"></ion-icon>
-      <ion-badge>6</ion-badge>
-    </ion-tab-button>
+      <!-- No label -->
+      <ion-tab-bar color="secondary" selected-tab="1">
+        <ion-tab-button tab="1" layout="label-hide">
+          <ion-label>Recents</ion-label>
+          <ion-icon name="navigate-circle"></ion-icon>
+          <ion-badge>6</ion-badge>
+        </ion-tab-button>
 
-    <ion-tab-button tab="2" layout="label-hide">
-      <ion-label>Favorites</ion-label>
-      <ion-icon name="heart"></ion-icon>
-      <ion-badge color="danger">6</ion-badge>
-    </ion-tab-button>
+        <ion-tab-button tab="2" layout="label-hide">
+          <ion-label>Favorites</ion-label>
+          <ion-icon name="heart"></ion-icon>
+          <ion-badge color="danger">6</ion-badge>
+        </ion-tab-button>
 
-    <ion-tab-button tab="3" layout="label-hide">
-      <ion-label>Settings</ion-label>
-      <ion-icon name="settings"></ion-icon>
-    </ion-tab-button>
-  </ion-tab-bar>
+        <ion-tab-button tab="3" layout="label-hide">
+          <ion-label>Settings</ion-label>
+          <ion-icon name="settings"></ion-icon>
+        </ion-tab-button>
+      </ion-tab-bar>
 
 
-  <!-- No overflow text -->
-  <ion-tab-bar color="danger" selected-tab="1">
-    <ion-tab-button tab="1">
-      <ion-label>Indiana Jones and the Raiders of the Lost Ark</ion-label>
-    </ion-tab-button>
+      <!-- No overflow text -->
+      <ion-tab-bar color="danger" selected-tab="1">
+        <ion-tab-button tab="1">
+          <ion-label>Indiana Jones and the Raiders of the Lost Ark</ion-label>
+        </ion-tab-button>
 
-    <ion-tab-button tab="2">
-      <ion-label>Indiana Jones and the Temple of Doom</ion-label>
-    </ion-tab-button>
+        <ion-tab-button tab="2">
+          <ion-label>Indiana Jones and the Temple of Doom</ion-label>
+        </ion-tab-button>
 
-    <ion-tab-button tab="3">
-      <ion-label>Indiana Jones and the Last Crusade</ion-label>
-    </ion-tab-button>
-  </ion-tab-bar>
+        <ion-tab-button tab="3">
+          <ion-label>Indiana Jones and the Last Crusade</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
 
-  <!-- Custom Tab Bar -->
-  <ion-tab-bar selected-tab="1" class="custom-tabbar">
-    <ion-tab-button tab="1">
-      <ion-label>Location</ion-label>
-      <ion-icon name="navigate-circle"></ion-icon>
-    </ion-tab-button>
+      <!-- Custom Tab Bar -->
+      <ion-tab-bar selected-tab="1" class="custom-tabbar">
+        <ion-tab-button tab="1">
+          <ion-label>Location</ion-label>
+          <ion-icon name="navigate-circle"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="2" class="main-tab">
-      <ion-icon class="main-tab-icon" src="/src/components/tab-bar/test/scenarios/camera.svg"></ion-icon>
-    </ion-tab-button>
+        <ion-tab-button tab="2" class="main-tab">
+          <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">
-      <ion-label>Radio</ion-label>
-      <ion-icon name="musical-notes"></ion-icon>
-    </ion-tab-button>
+        <ion-tab-button tab="3">
+          <ion-label>Radio</ion-label>
+          <ion-icon name="musical-notes"></ion-icon>
+        </ion-tab-button>
 
-  </ion-tab-bar>
+      </ion-tab-bar>
 
-  <!-- Custom Tab Bar Colors -->
-  <ion-tab-bar selected-tab="1" class="custom-tabbar-color">
-    <ion-tab-button tab="1">
-      <ion-label>Location</ion-label>
-      <ion-icon name="navigate-circle"></ion-icon>
-    </ion-tab-button>
+      <!-- Custom Tab Bar Colors -->
+      <ion-tab-bar selected-tab="1" class="custom-tabbar-color">
+        <ion-tab-button tab="1">
+          <ion-label>Location</ion-label>
+          <ion-icon name="navigate-circle"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="2">
-      <ion-icon name="settings"></ion-icon>
-    </ion-tab-button>
+        <ion-tab-button tab="2">
+          <ion-icon name="settings"></ion-icon>
+        </ion-tab-button>
 
-    <ion-tab-button tab="3">
-      <ion-label>Radio</ion-label>
-      <ion-icon name="musical-notes"></ion-icon>
-    </ion-tab-button>
+        <ion-tab-button tab="3">
+          <ion-label>Radio</ion-label>
+          <ion-icon name="musical-notes"></ion-icon>
+        </ion-tab-button>
 
-  </ion-tab-bar>
+      </ion-tab-bar>
+    </ion-content>
+  </ion-app>
 
   <style>
     .custom-tabbar {
@@ -251,6 +257,7 @@
       --color: rgba(255, 255, 255, .7);
       --color-selected: white;
     }
+
   </style>
 </body>
 
diff --git a/core/src/components/tab-button/readme.md b/core/src/components/tab-button/readme.md
index 13bba94407..3ab5fafc06 100644
--- a/core/src/components/tab-button/readme.md
+++ b/core/src/components/tab-button/readme.md
@@ -175,17 +175,19 @@ export const TabButtonExample: React.FC = () => (
 
 ## CSS Custom Properties
 
-| Name                   | Description                                                                                                   |
-| ---------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `--background`         | Background of the tab button                                                                                  |
-| `--background-focused` | Background of the tab button when focused with the tab key                                                    |
-| `--color`              | Color of the tab button                                                                                       |
-| `--color-selected`     | Color of the selected tab button                                                                              |
-| `--padding-bottom`     | Bottom padding of the tab button                                                                              |
-| `--padding-end`        | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button |
-| `--padding-start`      | Left padding if direction is left-to-right, and right padding if direction is right-to-left 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 tab button when focused with the tab key                                                    |
+| `--background-focused-opacity` | Opacity of the tab button background when focused with the tab key                                            |
+| `--color`                      | Color of the tab button                                                                                       |
+| `--color-focused`              | Color of the tab button when focused with the tab key                                                         |
+| `--color-selected`             | Color of the selected tab button                                                                              |
+| `--padding-bottom`             | Bottom padding of the tab button                                                                              |
+| `--padding-end`                | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button |
+| `--padding-start`              | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button |
+| `--padding-top`                | Top padding of the tab button                                                                                 |
+| `--ripple-color`               | Color of the button ripple effect                                                                             |
 
 
 ## Dependencies
diff --git a/core/src/components/tab-button/tab-button.ios.vars.scss b/core/src/components/tab-button/tab-button.ios.vars.scss
index 1e1df6d540..38b2e212ab 100644
--- a/core/src/components/tab-button/tab-button.ios.vars.scss
+++ b/core/src/components/tab-button/tab-button.ios.vars.scss
@@ -22,13 +22,13 @@ $tab-button-ios-max-width:            240px !default;
 $tab-button-ios-text-color:           $tabbar-ios-color !default;
 
 /// @prop - Text color of the active tab button
-$tab-button-ios-text-color-active:    $tabbar-ios-color-activated !default;
+$tab-button-ios-text-color-active:    $tabbar-ios-color-selected !default;
 
 /// @prop - Icon color of the inactive tab button
 $tab-button-ios-icon-color:           $tabbar-ios-color !default;
 
 /// @prop - Icon color of the active tab button
-$tab-button-ios-icon-color-active:    $tabbar-ios-color-activated !default;
+$tab-button-ios-icon-color-active:    $tabbar-ios-color-selected !default;
 
 /// @prop - Font size of the tab button text
 $tab-button-ios-font-size:            10px !default;
diff --git a/core/src/components/tab-button/tab-button.md.vars.scss b/core/src/components/tab-button/tab-button.md.vars.scss
index 32d2db7968..4007dc94eb 100644
--- a/core/src/components/tab-button/tab-button.md.vars.scss
+++ b/core/src/components/tab-button/tab-button.md.vars.scss
@@ -28,13 +28,13 @@ $tab-button-md-font-weight:                     normal !default;
 $tab-button-md-text-color:                      $tabbar-md-color !default;
 
 /// @prop - Text color of the active tab button
-$tab-button-md-text-color-active:               $tabbar-md-color-activated !default;
+$tab-button-md-text-color-active:               $tabbar-md-color-selected !default;
 
 /// @prop - Icon color of the inactive tab button
 $tab-button-md-icon-color:                      $tabbar-md-color !default;
 
 /// @prop - Icon color of the active tab button
-$tab-button-md-icon-color-active:               $tabbar-md-color-activated !default;
+$tab-button-md-icon-color-active:               $tabbar-md-color-selected !default;
 
 /// @prop - Margin top on the tab button icon
 $tab-button-md-icon-margin-top:                 16px !default;
diff --git a/core/src/components/tab-button/tab-button.scss b/core/src/components/tab-button/tab-button.scss
index 7e81262993..7bfd405dd3 100644
--- a/core/src/components/tab-button/tab-button.scss
+++ b/core/src/components/tab-button/tab-button.scss
@@ -4,8 +4,10 @@
   /**
    * @prop --background: Background of the tab button
    * @prop --background-focused: Background of the tab button when focused with the tab key
+   * @prop --background-focused-opacity: Opacity of the tab button background when focused with the tab key
    *
    * @prop --color: Color of the tab button
+   * @prop --color-focused: Color of the tab button when focused with the tab key
    * @prop --color-selected: Color of the selected tab button
    *
    * @prop --padding-top: Top padding of the tab button
@@ -16,6 +18,7 @@
    * @prop --ripple-color: Color of the button ripple effect
    */
   --ripple-color: var(--color-selected);
+  --background-focused-opacity: 1;
 
   flex: 1;
 
@@ -34,7 +37,8 @@
 // Tab Button: Native
 // --------------------------------------------------
 
-a {
+.button-native {
+  @include border-radius(inherit);
   @include margin(0);
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
   @include text-inherit();
@@ -63,8 +67,35 @@ a {
   -webkit-user-drag: none;
 }
 
-:host(.ion-focused) {
-  background: var(--background-focused);
+.button-native::after {
+  @include button-state();
+}
+
+.button-inner {
+  display: flex;
+  position: relative;
+
+  flex-flow: inherit;
+  align-items: inherit;
+  justify-content: inherit;
+
+  width: 100%;
+  height: 100%;
+
+  z-index: 1;
+}
+
+// Tab Button: States
+// --------------------------------------------------
+
+:host(.ion-focused) .button-native {
+  color: var(--color-focused);
+
+  &::after {
+    background: var(--background-focused);
+
+    opacity: var(--background-focused-opacity);
+  }
 }
 
 @media (any-hover: hover) {
@@ -73,10 +104,6 @@ a {
   }
 }
 
-
-// Tab Button: States
-// --------------------------------------------------
-
 :host(.tab-selected) {
   color: var(--color-selected);
 }
diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx
index 0dd379bac7..88aef7b28a 100644
--- a/core/src/components/tab-button/tab-button.tsx
+++ b/core/src/components/tab-button/tab-button.tsx
@@ -161,8 +161,10 @@ export class TabButton implements ComponentInterface, AnchorInterface {
           'ion-focusable': true
         }}
       >
-        <a {...attrs} tabIndex={-1}>
-          <slot></slot>
+        <a {...attrs} tabIndex={-1} class="button-native">
+          <span class="button-inner">
+            <slot></slot>
+          </span>
           {mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
         </a>
       </Host>
diff --git a/core/src/components/toast/toast.ios.scss b/core/src/components/toast/toast.ios.scss
index a44d8132d9..6aaf99db92 100644
--- a/core/src/components/toast/toast.ios.scss
+++ b/core/src/components/toast/toast.ios.scss
@@ -79,7 +79,7 @@
   overflow: hidden;
 }
 
-.toast-button.activated {
+.toast-button.ion-activated {
   opacity: $toast-ios-button-opacity-activated;
 }
 
diff --git a/core/src/components/toolbar/test/colors/index.html b/core/src/components/toolbar/test/colors/index.html
index b2332f6f99..48ec1d8900 100644
--- a/core/src/components/toolbar/test/colors/index.html
+++ b/core/src/components/toolbar/test/colors/index.html
@@ -48,6 +48,22 @@
         <ion-title>Primary</ion-title>
       </ion-toolbar>
 
+      <ion-toolbar color="primary">
+        <ion-buttons slot="start">
+          <ion-button class="ion-focused" fill="solid" color="danger">
+            <ion-icon slot="icon-only" name="add"></ion-icon>
+          </ion-button>
+        <ion-button class="ion-focused" fill="outline">Outline</ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button class="ion-focused" fill="clear">Clear</ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Primary</ion-title>
+      </ion-toolbar>
+
       <ion-toolbar color="secondary">
         <ion-buttons slot="start">
           <ion-button fill="solid" color="danger">
@@ -64,6 +80,22 @@
         <ion-title>Secondary</ion-title>
       </ion-toolbar>
 
+      <ion-toolbar color="secondary">
+        <ion-buttons slot="start">
+          <ion-button class="ion-focused" fill="solid" color="danger">
+            <ion-icon slot="icon-only" name="add"></ion-icon>
+          </ion-button>
+          <ion-button class="ion-focused" fill="solid">Solid</ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button class="ion-focused" fill="clear">Clear</ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Secondary</ion-title>
+      </ion-toolbar>
+
       <ion-toolbar color="tertiary">
         <ion-buttons slot="start">
           <ion-button fill="solid" color="danger">
@@ -80,6 +112,22 @@
         <ion-title>Tertiary</ion-title>
       </ion-toolbar>
 
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="start">
+          <ion-button class="ion-focused" fill="solid" color="danger">
+            <ion-icon slot="icon-only" name="add"></ion-icon>
+          </ion-button>
+          <ion-button class="ion-focused" fill="outline">Outline</ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button class="ion-focused" fill="clear">Clear</ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Tertiary</ion-title>
+      </ion-toolbar>
+
       <ion-toolbar color="success">
         <ion-buttons slot="start">
           <ion-button fill="solid" color="danger">
@@ -112,6 +160,22 @@
         <ion-title>Warning</ion-title>
       </ion-toolbar>
 
+      <ion-toolbar color="warning">
+        <ion-buttons slot="start">
+          <ion-button class="ion-focused" fill="solid" color="danger">
+            <ion-icon slot="icon-only" name="add"></ion-icon>
+          </ion-button>
+          <ion-button class="ion-focused" fill="outline">Outline</ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button class="ion-focused" fill="clear">Clear</ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Warning</ion-title>
+      </ion-toolbar>
+
       <ion-toolbar color="danger">
         <ion-buttons slot="start">
           <ion-button fill="solid" color="danger">
diff --git a/core/src/components/toolbar/test/scenarios/index.html b/core/src/components/toolbar/test/scenarios/index.html
index fe5ba50223..b80679f5aa 100644
--- a/core/src/components/toolbar/test/scenarios/index.html
+++ b/core/src/components/toolbar/test/scenarios/index.html
@@ -58,15 +58,15 @@
 
       <ion-toolbar>
         <ion-buttons slot="secondary">
-          <ion-button class="activated">
+          <ion-button class="ion-activated">
             <ion-icon slot="icon-only" name="person-circle"></ion-icon>
           </ion-button>
-          <ion-button class="activated">
+          <ion-button class="ion-activated">
             <ion-icon slot="icon-only" name="search"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-buttons slot="primary">
-          <ion-button color="secondary" class="activated">
+          <ion-button color="secondary" class="ion-activated">
             <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
@@ -94,17 +94,17 @@
 
       <ion-toolbar>
         <ion-buttons slot="secondary">
-          <ion-button href="#" fill="solid" class="activated">
+          <ion-button href="#" fill="solid" class="ion-activated">
             <ion-icon slot="icon-only" name="person-circle"></ion-icon>
           </ion-button>
-          <ion-button fill="solid" class="activated">
+          <ion-button fill="solid" class="ion-activated">
             <ion-icon slot="start" name="person-circle"></ion-icon>
             Solid
           </ion-button>
         </ion-buttons>
         <ion-title>Solid Activated</ion-title>
         <ion-buttons slot="primary">
-          <ion-button fill="solid" color="secondary" class="activated">
+          <ion-button fill="solid" color="secondary" class="ion-activated">
             Help
             <ion-icon slot="end" name="help-circle"></ion-icon>
           </ion-button>
@@ -131,16 +131,16 @@
 
       <ion-toolbar>
         <ion-buttons slot="secondary">
-          <ion-button fill="outline" class="activated">
+          <ion-button fill="outline" class="ion-activated">
             <ion-icon slot="icon-only" name="person-circle"></ion-icon>
           </ion-button>
-          <ion-button fill="outline" class="activated">
+          <ion-button fill="outline" class="ion-activated">
             <ion-icon slot="start" name="star"></ion-icon>
             Star
           </ion-button>
         </ion-buttons>
         <ion-buttons slot="primary">
-          <ion-button color="secondary" fill="outline" class="activated">
+          <ion-button color="secondary" fill="outline" class="ion-activated">
             <ion-icon slot="icon-only" name="person-circle"></ion-icon>
           </ion-button>
         </ion-buttons>
diff --git a/core/src/components/toolbar/toolbar.md.vars.scss b/core/src/components/toolbar/toolbar.md.vars.scss
index 5e8ce94ddf..57b423a85d 100644
--- a/core/src/components/toolbar/toolbar.md.vars.scss
+++ b/core/src/components/toolbar/toolbar.md.vars.scss
@@ -24,9 +24,6 @@ $toolbar-md-button-color:                         $toolbar-md-color !default;
 /// @prop - Background color of the toolbar button
 $toolbar-md-button-background-color:              $toolbar-md-background !default;
 
-/// @prop - Background color of the toolbar button when activated
-$toolbar-md-button-background-color-activated:    $toolbar-md-color-activated !default;
-
 /// @prop - Border radius of the toolbar button
 $toolbar-md-button-border-radius:                 2px !default;
 
diff --git a/core/src/themes/ionic.mixins.scss b/core/src/themes/ionic.mixins.scss
index 31410387e8..3eaa4a6e2d 100644
--- a/core/src/themes/ionic.mixins.scss
+++ b/core/src/themes/ionic.mixins.scss
@@ -35,6 +35,16 @@
   color: inherit;
 }
 
+@mixin button-state() {
+  @include position(0, 0, 0, 0);
+
+  position: absolute;
+
+  content: "";
+
+  opacity: 0;
+}
+
 // Font smoothing
 // --------------------------------------------------
 
diff --git a/core/src/themes/ionic.theme.default.ios.scss b/core/src/themes/ionic.theme.default.ios.scss
index 1b5912cf76..fa5b3f701b 100644
--- a/core/src/themes/ionic.theme.default.ios.scss
+++ b/core/src/themes/ionic.theme.default.ios.scss
@@ -17,20 +17,16 @@ $tabbar-ios-background:                     var(--ion-tab-bar-background, $backg
 $tabbar-ios-background-focused:             var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default;
 $tabbar-ios-border-color:                   var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default;
 $tabbar-ios-color:                          var(--ion-tab-bar-color, $text-color-step-550) !default;
-$tabbar-ios-color-activated:                var(--ion-tab-bar-color-activated, ion-color(primary, base)) !default;
+$tabbar-ios-color-selected:                 var(--ion-tab-bar-color-selected, ion-color(primary, base)) !default;
 
 // iOS Toolbar
 // --------------------------------------------------
 $toolbar-ios-background:                    var(--ion-toolbar-background, var(--ion-color-step-50, #fff)) !default;
 $toolbar-ios-border-color:                  var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default;
 $toolbar-ios-color:                         var(--ion-toolbar-color, $text-color) !default;
-$toolbar-ios-color-activated:               var(--ion-toolbar-color-activated, ion-color(primary, base)) !default;
 
 // iOS List & List Items
 // --------------------------------------------------
 $item-ios-background:                       var(--ion-item-background, $background-color) !default;
-$item-ios-background-activated:             var(--ion-item-background-activated, var(--ion-color-step-150, #d9d9d9)) !default;
-$item-ios-background-focused:               var(--ion-item-background-focused, var(--ion-color-step-100, #e1e1e1)) !default;
-$item-ios-background-hover:                 var(--ion-item-background-hover, rgba($text-color-rgb, 0.04)) !default;
 $item-ios-border-color:                     var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc))) !default;
 $item-ios-color:                            var(--ion-item-color, $text-color) !default;
\ No newline at end of file
diff --git a/core/src/themes/ionic.theme.default.md.scss b/core/src/themes/ionic.theme.default.md.scss
index cb829216f9..e708be279f 100644
--- a/core/src/themes/ionic.theme.default.md.scss
+++ b/core/src/themes/ionic.theme.default.md.scss
@@ -18,20 +18,16 @@ $tabbar-md-background:                      var(--ion-tab-bar-background, $backg
 $tabbar-md-background-focused:              var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default;
 $tabbar-md-border-color:                    var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .07)))) !default;
 $tabbar-md-color:                           var(--ion-tab-bar-color, $text-color-step-400) !default;
-$tabbar-md-color-activated:                 var(--ion-tab-bar-color-activated, ion-color(primary, base)) !default;
+$tabbar-md-color-selected:                  var(--ion-tab-bar-color-selected, ion-color(primary, base)) !default;
 
 // Material Design Toolbar
 // --------------------------------------------------
 $toolbar-md-background:                     var(--ion-toolbar-background, $background-color) !default;
 $toolbar-md-border-color:                   var(--ion-toolbar-border-color, $border-md-color) !default;
 $toolbar-md-color:                          var(--ion-toolbar-color, var(--ion-text-color, #424242)) !default;
-$toolbar-md-color-activated:                var(--ion-toolbar-color-activated, #4a4a4a) !default;
 
 // Material Design List & List Items
 // --------------------------------------------------
 $item-md-background:                        var(--ion-item-background, $background-color) !default;
-// activated item background does not exist in MD as it uses the ripple color
-$item-md-background-focused:                var(--ion-item-background-focused, var(--ion-color-step-100, #e1e1e1)) !default;
-$item-md-background-hover:                  var(--ion-item-background-hover, rgba($text-color-rgb, 0.04)) !default;
 $item-md-border-color:                      var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .13)))) !default;
 $item-md-color:                             var(--ion-item-color, $text-color) !default;
diff --git a/core/src/themes/test/css-variables/css/dark.css b/core/src/themes/test/css-variables/css/dark.css
index 1e09d57c39..80a86af92c 100644
--- a/core/src/themes/test/css-variables/css/dark.css
+++ b/core/src/themes/test/css-variables/css/dark.css
@@ -94,6 +94,7 @@
   --ion-item-background-activated: #313131;
 
   --ion-toolbar-background: #000;
+  --ion-toolbar-color: #fff;
 }
 
 .md {
diff --git a/core/src/themes/test/css-variables/css/oceanic.css b/core/src/themes/test/css-variables/css/oceanic.css
index 1eb325a1ab..81e6ca5172 100644
--- a/core/src/themes/test/css-variables/css/oceanic.css
+++ b/core/src/themes/test/css-variables/css/oceanic.css
@@ -84,11 +84,10 @@
   --ion-tab-bar-background: #343d46;
   --ion-tab-bar-background-focused: #293039;
   --ion-tab-bar-color: #a7adba;
-  --ion-tab-bar-color-activated: #549ee7;
+  --ion-tab-bar-color-selected: #549ee7;
 
   --ion-toolbar-background: #343d46;
   --ion-toolbar-color: #a7adba;
-  --ion-toolbar-color-activated: var(--ion-color-primary);
 
   /* Background, Text, Step Colors */
   --ion-background-color: #1b2b34;
diff --git a/core/src/themes/test/css-variables/css/toolbar.css b/core/src/themes/test/css-variables/css/toolbar.css
new file mode 100644
index 0000000000..693e988e70
--- /dev/null
+++ b/core/src/themes/test/css-variables/css/toolbar.css
@@ -0,0 +1,26 @@
+/**
+ * Toolbar
+ * -----------------------------------------------------
+ * The toolbar theme customizes the toolbar only
+ *
+ * Looking to create a custom theme? Check out the generator!
+ * https://ionicframework.com/docs/theming/color-generator
+**/
+
+:root {
+  --ion-color-primary: #3880ff;
+  --ion-color-light: #f4f5f8;
+  --ion-color-light-rgb: 244, 245, 248;
+
+  --ion-toolbar-background: var(--ion-color-primary);
+  --ion-toolbar-color: var(--ion-color-light);
+}
+
+.md {
+  --ion-toolbar-segment-color: rgba(var(--ion-color-light-rgb), .7);
+  --ion-toolbar-segment-color-checked: var(--ion-color-light);
+}
+
+.ios {
+  --ion-toolbar-segment-color-checked: var(--ion-color-primary);
+}
\ No newline at end of file
diff --git a/core/src/themes/test/css-variables/css/vibrant.css b/core/src/themes/test/css-variables/css/vibrant.css
index 21a4e19255..f6cad7ab53 100644
--- a/core/src/themes/test/css-variables/css/vibrant.css
+++ b/core/src/themes/test/css-variables/css/vibrant.css
@@ -78,20 +78,4 @@
   --ion-item-background: #fff;
   --ion-item-border-color: #5bff76;
   --ion-item-background-activated: #5bff76;
-
-  --ion-toolbar-color: #fff;
 }
-
-.ios {
-  --ion-toolbar-segment-background: var(--ion-color-danger);
-  --ion-toolbar-segment-color: var(--ion-color-danger-contrast);
-
-  --ion-toolbar-segment-indicator-color: var(--ion-color-danger-contrast);
-  --ion-toolbar-segment-color-checked: var(--ion-color-danger);
-}
-
-.md {
-  --ion-toolbar-segment-color: #fff;
-  --ion-toolbar-segment-color-checked: var(--ion-color-danger);
-  --ion-toolbar-segment-background-hover: rgba(var(--ion-color-danger-contrast-rgb), .04);
-}
\ No newline at end of file
diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html
index 9b16280c2a..fc9074e4b0 100644
--- a/core/src/themes/test/css-variables/index.html
+++ b/core/src/themes/test/css-variables/index.html
@@ -88,32 +88,54 @@
             <ion-title>Lists</ion-title>
 
             <ion-buttons slot="primary">
-              <ion-button color="secondary" fill="outline">Secondary Outline</ion-button>
+              <ion-back-button color="secondary" default-href="/"></ion-back-button>
+              <ion-menu-button color="secondary" auto-hide="false"></ion-menu-button>
+              <ion-button color="secondary">Default</ion-button>
+              <ion-button color="secondary" fill="solid">Solid</ion-button>
+              <ion-button color="secondary" fill="clear">Clear</ion-button>
+              <ion-button color="secondary" fill="outline">Outline</ion-button>
             </ion-buttons>
-
-            <div slot="end" class="right-container">
-              <ion-label>Select a Theme:</ion-label>
-              <ion-select interface="popover" class="theme-picker" value="default">
-                <ion-select-option value="default">Default</ion-select-option>
-                <ion-select-option value="oceanic">Oceanic</ion-select-option>
-                <ion-select-option value="vibrant">Vibrant</ion-select-option>
-                <ion-select-option value="dark">Dark</ion-select-option>
-              </ion-select>
-            </div>
           </ion-toolbar>
           <ion-toolbar>
-            <ion-segment value="active">
-              <ion-segment-button value="favorites">
-                <ion-label>Favorites</ion-label>
+            <ion-buttons slot="start">
+              <ion-back-button class="ion-focused" default-href="/"></ion-back-button>
+              <ion-menu-button class="ion-focused" auto-hide="false"></ion-menu-button>
+              <ion-button class="ion-focused">Default</ion-button>
+              <ion-button class="ion-focused" fill="solid">Solid</ion-button>
+              <ion-button class="ion-focused" fill="clear">Clear</ion-button>
+              <ion-button class="ion-focused" fill="outline">Outline</ion-button>
+            </ion-buttons>
+
+            <ion-title>Lists</ion-title>
+
+            <ion-buttons slot="primary">
+              <ion-back-button color="secondary" class="ion-focused" default-href="/"></ion-back-button>
+              <ion-menu-button color="secondary" class="ion-focused" auto-hide="false"></ion-menu-button>
+              <ion-button color="secondary" class="ion-focused">Default</ion-button>
+              <ion-button color="secondary" class="ion-focused" fill="solid">Solid</ion-button>
+              <ion-button color="secondary" class="ion-focused" fill="clear">Clear</ion-button>
+              <ion-button color="secondary" class="ion-focused" fill="outline">Outline</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+          <ion-toolbar>
+            <ion-segment value="default" class="theme-picker">
+              <ion-segment-button value="default">
+                <ion-label>Default</ion-label>
               </ion-segment-button>
-              <ion-segment-button value="all">
-                <ion-label>All</ion-label>
+              <ion-segment-button value="oceanic">
+                <ion-label>Oceanic</ion-label>
               </ion-segment-button>
-              <ion-segment-button disabled value="disabled">
-                <ion-label>Disabled</ion-label>
+              <ion-segment-button value="vibrant">
+                <ion-label>Vibrant</ion-label>
               </ion-segment-button>
-              <ion-segment-button value="active">
-                <ion-label>Active</ion-label>
+              <ion-segment-button value="dark">
+                <ion-label>Dark</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="toolbar">
+                <ion-label>Toolbar</ion-label>
+              </ion-segment-button>
+              <ion-segment-button disabled>
+                  <ion-label>Disabled</ion-label>
               </ion-segment-button>
             </ion-segment>
           </ion-toolbar>
@@ -146,9 +168,9 @@
               </ion-card>
 
               <ion-card>
-                <ion-item href="#" class="activated">
+                <ion-item href="#" class="ion-activated">
                   <ion-icon name="wifi" slot="start"></ion-icon>
-                  Card Link Item 1 .activated
+                  Card Link Item 1 activated
                 </ion-item>
 
                 <ion-item href="#">
@@ -156,14 +178,14 @@
                   Card Link Item 2
                 </ion-item>
 
-                <ion-item class="activated">
+                <ion-item button class="ion-activated">
                   <ion-icon name="warning" slot="start"></ion-icon>
-                  Card Button Item 1 .activated
+                  Card Button Item 1 activated
                 </ion-item>
 
-                <ion-item>
+                <ion-item button class="ion-focused">
                   <ion-icon name="walk" slot="start"></ion-icon>
-                  Card Button Item 2
+                  Card Button Item 2 focused
                 </ion-item>
               </ion-card>
             </section>
@@ -182,7 +204,7 @@
                   <ion-label>Mega Man X</ion-label>
                   <ion-note slot="end">Note</ion-note>
                 </ion-item>
-                <ion-item href="#" class="activated">
+                <ion-item href="#" class="ion-activated">
                   <ion-label>The Legend of Zelda</ion-label>
                   <ion-note slot="end">Note</ion-note>
                 </ion-item>
@@ -428,15 +450,15 @@
               </p>
 
               <p>
-                <ion-button class="activated" color="primary">Primary</ion-button>
-                <ion-button class="activated" color="secondary">Secondary</ion-button>
-                <ion-button class="activated" color="tertiary">Tertiary</ion-button>
-                <ion-button class="activated" fill="outline" color="success">Success Outline</ion-button>
-                <ion-button class="activated" fill="clear" color="warning">Warning Clear</ion-button>
-                <ion-button class="activated" color="danger">Danger</ion-button>
-                <ion-button class="activated" color="light">Light</ion-button>
-                <ion-button class="activated" expand="block" fill="outline" color="medium">Medium Outline</ion-button>
-                <ion-button class="activated" expand="full" fill="clear" color="dark">Dark Clear</ion-button>
+                <ion-button class="ion-activated" color="primary">Primary</ion-button>
+                <ion-button class="ion-activated" color="secondary">Secondary</ion-button>
+                <ion-button class="ion-activated" color="tertiary">Tertiary</ion-button>
+                <ion-button class="ion-activated" fill="outline" color="success">Success Outline</ion-button>
+                <ion-button class="ion-activated" fill="clear" color="warning">Warning Clear</ion-button>
+                <ion-button class="ion-activated" color="danger">Danger</ion-button>
+                <ion-button class="ion-activated" color="light">Light</ion-button>
+                <ion-button class="ion-activated" expand="block" fill="outline" color="medium">Medium Outline</ion-button>
+                <ion-button class="ion-activated" expand="full" fill="clear" color="dark">Dark Clear</ion-button>
               </p>
             </section>
 
@@ -562,34 +584,34 @@
                 <ion-searchbar color="dark"></ion-searchbar>
               </p>
               <p>
-                <ion-segment>
-                  <ion-segment-button checked>All</ion-segment-button>
-                  <ion-segment-button>Favorites</ion-segment-button>
+                <ion-segment value="all">
+                  <ion-segment-button value="all">All</ion-segment-button>
+                  <ion-segment-button value="favorites">Favorites</ion-segment-button>
                 </ion-segment>
 
-                <ion-segment color="primary">
-                  <ion-segment-button checked>All</ion-segment-button>
-                  <ion-segment-button>Favorites</ion-segment-button>
+                <ion-segment color="primary" value="all">
+                  <ion-segment-button value="all">All</ion-segment-button>
+                  <ion-segment-button value="favorites">Favorites</ion-segment-button>
                 </ion-segment>
 
-                <ion-segment color="secondary">
-                  <ion-segment-button checked>All</ion-segment-button>
-                  <ion-segment-button>Favorites</ion-segment-button>
+                <ion-segment color="secondary" value="all">
+                  <ion-segment-button value="all">All</ion-segment-button>
+                  <ion-segment-button value="favorites">Favorites</ion-segment-button>
                 </ion-segment>
 
-                <ion-segment color="success">
-                  <ion-segment-button checked>All</ion-segment-button>
-                  <ion-segment-button>Favorites</ion-segment-button>
+                <ion-segment color="success" value="all">
+                  <ion-segment-button value="all">All</ion-segment-button>
+                  <ion-segment-button value="favorites">Favorites</ion-segment-button>
                 </ion-segment>
 
-                <ion-segment color="light">
-                  <ion-segment-button checked>All</ion-segment-button>
-                  <ion-segment-button>Favorites</ion-segment-button>
+                <ion-segment color="light" value="all">
+                  <ion-segment-button value="all">All</ion-segment-button>
+                  <ion-segment-button value="favorites">Favorites</ion-segment-button>
                 </ion-segment>
 
-                <ion-segment color="medium">
-                  <ion-segment-button checked>All</ion-segment-button>
-                  <ion-segment-button>Favorites</ion-segment-button>
+                <ion-segment color="medium" value="all">
+                  <ion-segment-button value="all">All</ion-segment-button>
+                  <ion-segment-button value="favorites">Favorites</ion-segment-button>
                 </ion-segment>
 
               </p>
@@ -626,9 +648,9 @@
                       <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                     </ion-button>
                   </ion-buttons>
-                  <ion-segment>
-                    <ion-segment-button>All</ion-segment-button>
-                    <ion-segment-button checked>Favorites</ion-segment-button>
+                  <ion-segment value="favorites">
+                    <ion-segment-button value="all">All</ion-segment-button>
+                    <ion-segment-button value="favorites">Favorites</ion-segment-button>
                   </ion-segment>
                 </ion-toolbar>
 
@@ -703,9 +725,9 @@
                       <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                     </ion-button>
                   </ion-buttons>
-                  <ion-segment>
-                    <ion-segment-button>All</ion-segment-button>
-                    <ion-segment-button checked>Favorites</ion-segment-button>
+                  <ion-segment value="favorites">
+                    <ion-segment-button value="all">All</ion-segment-button>
+                    <ion-segment-button value="favorites">Favorites</ion-segment-button>
                   </ion-segment>
                 </ion-toolbar>
 
@@ -857,7 +879,7 @@
           }
         }, {
           text: 'Play (open modal)',
-          icon: 'arrow-dropright-circle',
+          icon: 'chevron-forward-circle',
           handler: () => {
             console.log('Play clicked');
           }
@@ -968,11 +990,13 @@
 
     async function presentToast() {
       const toast = Object.assign(document.createElement('ion-toast'), {
-        message: 'Your settings have been saved.',
-        duration: 2000
+        message: 'Hello world!',
+        buttons: [
+          { text: 'Close', role: 'close' }
+        ]
       });
       document.body.appendChild(toast);
-      return await toast.present();
+      await toast.present();
     }
   </script>
 </body>
diff --git a/core/src/utils/tap-click.ts b/core/src/utils/tap-click.ts
index fd4e27105b..02cd574b49 100644
--- a/core/src/utils/tap-click.ts
+++ b/core/src/utils/tap-click.ts
@@ -185,7 +185,7 @@ const getRippleEffect = (el: HTMLElement) => {
   return el.querySelector('ion-ripple-effect');
 };
 
-const ACTIVATED = 'activated';
+const ACTIVATED = 'ion-activated';
 const ADD_ACTIVATED_DEFERS = 200;
 const CLEAR_STATE_DEFERS = 200;
 const MOUSE_WAIT = 2500;