diff --git a/packages/mdc-ripple/_ripple-theme.scss b/packages/mdc-ripple/_ripple-theme.scss
index 74c1c997c47..5559e97a051 100644
--- a/packages/mdc-ripple/_ripple-theme.scss
+++ b/packages/mdc-ripple/_ripple-theme.scss
@@ -394,8 +394,9 @@ $pressed-light-ink-opacity: 0.32 !default;
   }
 }
 
-// Selector for focus state. Using ':not(.mdc-ripple-upgraded)' to control focus
-// when JS-enabled with '.mdc-ripple-upgraded--background-focused'.
+// Selector for focus state. Using ':not(.mdc-ripple-upgraded)' to continue
+// applying focus styles on JS-disabled components, and control focus
+// on JS-enabled components with '.mdc-ripple-upgraded--background-focused'.
 @mixin focus() {
   &.mdc-ripple-upgraded--background-focused,
   &:not(.mdc-ripple-upgraded):focus {
@@ -403,6 +404,13 @@ $pressed-light-ink-opacity: 0.32 !default;
   }
 }
 
+// Selector for active state. Using `:active:active` to override focus styles.
+@mixin active() {
+  &:active:active {
+    @content;
+  }
+}
+
 /// Keep the ripple (State overlay) behind the content.
 @mixin behind-content(
   $ripple-target,