diff --git a/demo/button-lumo-theme-demos.html b/demo/button-theme-variants-demos.html
similarity index 84%
rename from demo/button-lumo-theme-demos.html
rename to demo/button-theme-variants-demos.html
index c37453a..0722e72 100644
--- a/demo/button-lumo-theme-demos.html
+++ b/demo/button-theme-variants-demos.html
@@ -1,4 +1,4 @@
-<dom-module id="button-lumo-theme-demos">
+<dom-module id="button-theme-variants-demos">
   <template>
     <style include="vaadin-component-demo-shared-styles">
       :host {
@@ -9,7 +9,7 @@
     <h3>Types</h3>
     <p>Use the different types to prioritize the actions presented to the end user. Usually, you should only have one primary button in a view. Use tertiary buttons to decrease the priority of an action.</p>
     <p>The <code>"tertiary-inline"</code> type is useful when you want to add a <vaadin-button theme="tertiary-inline">button</vaadin-button> as part of regular text content.</p>
-    <vaadin-demo-snippet id='button-styling-demos-types'>
+    <vaadin-demo-snippet id='button-theme-variants-demos-types'>
       <template preserve-content>
         <vaadin-button theme="primary">Primary</vaadin-button>
         <vaadin-button>Secondary</vaadin-button>
@@ -20,7 +20,7 @@ <h3>Types</h3>
 
     <h3>Colors</h3>
     <p>Use <code>"contrast"</code> if you need increased legibility or a more subdued look. Use <code>"success"</code> for actions that complete a longer sequence of steps, like a checkout flow. Use <code>"error"</code> for actions that can cause permanent data-loss, like deleting content created by the user.</p>
-    <vaadin-demo-snippet id='button-stylings-demos-colors'>
+    <vaadin-demo-snippet id='button-theme-variants-demos-colors'>
       <template preserve-content>
         <h4>Contrast</h4>
 
@@ -44,7 +44,7 @@ <h4>Error</h4>
 
     <h3>Sizes</h3>
     <p>You can combine the sizes with any other theme variation.</p>
-    <vaadin-demo-snippet id='button-stylings-demos-sizes'>
+    <vaadin-demo-snippet id='button-theme-variants-demos-sizes'>
       <template preserve-content>
         <vaadin-button theme="large">Large</vaadin-button>
         <vaadin-button>Normal</vaadin-button>
@@ -54,7 +54,7 @@ <h3>Sizes</h3>
 
     <h3>Icon Buttons</h3>
     <p>Icon-only buttons should use the <code>"icon"</code> variation which reduces the width of the button.</p>
-    <vaadin-demo-snippet id='button-styling-demos-icons'>
+    <vaadin-demo-snippet id='button-theme-variants-demos-icons'>
       <template preserve-content>
         <!-- Icon in place of label -->
         <vaadin-button theme="icon" aria-label="Add new item">
@@ -71,11 +71,11 @@ <h3>Icon Buttons</h3>
 
   </template>
   <script>
-    class ButtonLumoThemeDemos extends DemoReadyEventEmitter(ButtonDemo(Polymer.Element)) {
+    class ButtonThemeVariantsDemos extends DemoReadyEventEmitter(ButtonDemo(Polymer.Element)) {
       static get is() {
-        return 'button-lumo-theme-demos';
+        return 'button-theme-variants-demos';
       }
     }
-    customElements.define(ButtonLumoThemeDemos.is, ButtonLumoThemeDemos);
+    customElements.define(ButtonThemeVariantsDemos.is, ButtonThemeVariantsDemos);
   </script>
 </dom-module>
diff --git a/demo/demos.json b/demo/demos.json
index af9b8a7..3b689da 100644
--- a/demo/demos.json
+++ b/demo/demos.json
@@ -24,11 +24,11 @@
   }
   ,
   {
-    "name": "Lumo Theme",
-    "url": "button-lumo-theme-demos",
-    "src": "button-lumo-theme-demos.html",
+    "name": "Theme Variants",
+    "url": "button-theme-variants-demos",
+    "src": "button-theme-variants-demos.html",
         "meta": {
-      "title": "Vaadin Button Lumo Theme",
+      "title": "Vaadin Button Theme Variants",
       "description": "",
       "image": ""
      }