diff --git a/src/dev-app/system-classes-demo/system-classes-demo.html b/src/dev-app/system-classes-demo/system-classes-demo.html
index 4c2911911942..c1eda95ae802 100644
--- a/src/dev-app/system-classes-demo/system-classes-demo.html
+++ b/src/dev-app/system-classes-demo/system-classes-demo.html
@@ -115,9 +115,7 @@ <h3> Label </h3>
 <section>
   <h2>Shape</h2>
   <div class="demo-section-container demo-grid">
-    <div class="mat-border mat-corner-extra-sm demo-box mat-bg-primary-container">
-      mat-corner-extra-sm
-    </div>
+    <div class="mat-border mat-corner-xs demo-box mat-bg-primary-container">mat-corner-xs</div>
     <div class="mat-border mat-corner-sm demo-box mat-bg-primary-container">mat-corner-sm</div>
     <div class="mat-border mat-corner-md demo-box mat-bg-primary-container">mat-corner-md</div>
     <div class="mat-border mat-corner-lg demo-box mat-bg-primary-container">mat-corner-lg</div>
diff --git a/src/material/core/tokens/_classes.scss b/src/material/core/tokens/_classes.scss
index 83db3ca6ef84..128cb41f03f5 100644
--- a/src/material/core/tokens/_classes.scss
+++ b/src/material/core/tokens/_classes.scss
@@ -306,7 +306,7 @@
 
   // Sets the border radius to extra small. Use for components that need a small amount of rounding,
   // such as a chip. In Angular Material, this is used for the shape of a snackbar and a tooltip.
-  .mat-corner-extra-sm {
+  .mat-corner-xs {
     border-radius: var(--mat-sys-corner-extra-small);
   }