npm - @siemens/ix-docs - Versions diffs - 4.3.0 → 4.4.0 - Mend

@siemens/ix-docs 4.3.0 → 4.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1286) hide show

package/build/docs/autogenerated/prompt/ix-button/readme.md CHANGED Viewed

@@ -3,33 +3,33 @@
 ## HTML Examples
-### Example: button-danger-ghost
+### Example: button-danger-primary
 ```html
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button danger ghost example</title>
-    <link rel="stylesheet" href="./button-danger-ghost.css" />
+    <title>Button danger primary example</title>
+    <link rel="stylesheet" href="./button-danger-primary.css" />
   </head>
   <body>
-    <ix-button variant="danger-tertiary"> Button </ix-button>
-    <ix-button disabled variant="danger-tertiary"> Button </ix-button>
+    <ix-button variant="danger-primary"> Button </ix-button>
+    <ix-button disabled variant="danger-primary"> Button </ix-button>
     <script type="module" src="./init.js"></script>
   </body>
 </html>
 ```
-### Example: button-danger-outline
+### Example: button-danger-secondary
 ```html
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button danger outline example</title>
-    <link rel="stylesheet" href="./button-danger-outline.css" />
+    <title>Button danger secondary example</title>
+    <link rel="stylesheet" href="./button-danger-secondary.css" />
   </head>
   <body>
     <ix-button variant="danger-secondary"> Button </ix-button>
@@ -39,87 +39,116 @@
 </html>
 ```
-### Example: button-danger
+### Example: button-danger-tertiary
 ```html
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button danger example</title>
-    <link rel="stylesheet" href="./button-danger.css" />
+    <title>Button danger tertiary example</title>
+    <link rel="stylesheet" href="./button-danger-tertiary.css" />
   </head>
   <body>
-    <ix-button variant="danger-primary"> Button </ix-button>
-    <ix-button disabled variant="danger-primary"> Button </ix-button>
+    <ix-button variant="danger-tertiary"> Button </ix-button>
+    <ix-button disabled variant="danger-tertiary"> Button </ix-button>
     <script type="module" src="./init.js"></script>
   </body>
 </html>
 ```
-### Example: button-ghost
+### Example: button-group
 ```html
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button ghost example</title>
-    <link rel="stylesheet" href="./button-ghost.css" />
+    <title>Button group example</title>
   </head>
   <body>
-    <ix-button variant="tertiary"> Button </ix-button>
-    <ix-button variant="tertiary" disabled> Button </ix-button>
+    <div class="ix-button-group">
+      <ix-button variant="subtle-secondary">Button 1</ix-button>
+      <ix-button>Button 2</ix-button>
+      <ix-button variant="subtle-secondary">Button 3</ix-button>
+      <ix-button variant="subtle-secondary">Button 4</ix-button>
+    </div>
     <script type="module" src="./init.js"></script>
   </body>
 </html>
 ```
-### Example: button-grey-ghost
+### Example: button-loading
 ```html
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button grey ghost example</title>
-    <link rel="stylesheet" href="./button-grey-ghost.css" />
+    <title>Button loading example</title>
+    <link rel="stylesheet" href="./button-loading.css" />
+    <script type="module">
+      import { addIcons } from '@siemens/ix-icons';
+      import { iconStar } from '@siemens/ix-icons/icons';
+      addIcons({
+        iconStar,
+      });
+    </script>
   </head>
   <body>
-    <ix-button variant="subtle-tertiary"> Button </ix-button>
-    <ix-button disabled variant="subtle-tertiary"> Button </ix-button>
+    <script>
+      function toggle(obj) {
+        obj.loading = true;
+        setTimeout(() => {
+          obj.loading = false;
+        }, 2500);
+      }
+    </script>
+    <ix-button variant="subtle-primary" onclick="toggle(this)"> Button </ix-button>
+    <ix-button variant="subtle-primary" onclick="toggle(this)"> Button </ix-button>
+    <ix-button variant="subtle-primary" onclick="toggle(this)" icon="star"> Button </ix-button>
+    <ix-icon-button variant="subtle-primary" onclick="toggle(this)" icon="star">
+    </ix-icon-button>
+    <ix-button variant="subtle-primary" loading> Button </ix-button>
+    <ix-icon-button variant="subtle-primary" loading icon="star"></ix-icon-button>
     <script type="module" src="./init.js"></script>
   </body>
 </html>
 ```
-### Example: button-grey-secondary
+### Example: button-secondary
 ```html
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button grey secondary example</title>
-    <link rel="stylesheet" href="./button-grey-secondary.css" />
+    <title>Button secondary example</title>
+    <link rel="stylesheet" href="./button-secondary.css" />
   </head>
   <body>
-    <ix-button variant="subtle-secondary"> Button </ix-button>
-    <ix-button disabled variant="subtle-secondary"> Button </ix-button>
+    <ix-button variant="secondary"> Button </ix-button>
+    <ix-button variant="secondary" disabled> Button </ix-button>
     <script type="module" src="./init.js"></script>
   </body>
 </html>
 ```
-### Example: button-grey
+### Example: button-subtle-primary
 ```html
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button grey example</title>
-    <link rel="stylesheet" href="./button-grey.css" />
+    <title>Button subtle primary example</title>
+    <link rel="stylesheet" href="./button-subtle-primary.css" />
   </head>
   <body>
     <ix-button variant="subtle-primary"> Button </ix-button>
@@ -129,84 +158,55 @@
 </html>
 ```
-### Example: button-group
+### Example: button-subtle-secondary
 ```html
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button group example</title>
+    <title>Button subtle secondary example</title>
+    <link rel="stylesheet" href="./button-subtle-secondary.css" />
   </head>
   <body>
-    <div class="ix-button-group">
-      <ix-button variant="subtle-secondary">Button 1</ix-button>
-      <ix-button>Button 2</ix-button>
-      <ix-button variant="subtle-secondary">Button 3</ix-button>
-      <ix-button variant="subtle-secondary">Button 4</ix-button>
-    </div>
+    <ix-button variant="subtle-secondary"> Button </ix-button>
+    <ix-button disabled variant="subtle-secondary"> Button </ix-button>
     <script type="module" src="./init.js"></script>
   </body>
 </html>
 ```
-### Example: button-loading
+### Example: button-subtle-tertiary
 ```html
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button loading example</title>
-    <link rel="stylesheet" href="./button-loading.css" />
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconStar } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconStar,
-      });
-    </script>
+    <title>Button subtle tertiary example</title>
+    <link rel="stylesheet" href="./button-subtle-tertiary.css" />
   </head>
   <body>
-    <script>
-      function toggle(obj) {
-        obj.loading = true;
-        setTimeout(() => {
-          obj.loading = false;
-        }, 2500);
-      }
-    </script>
-    <ix-button variant="subtle-primary" onclick="toggle(this)"> Button </ix-button>
-    <ix-button variant="subtle-primary" onclick="toggle(this)"> Button </ix-button>
-    <ix-button variant="subtle-primary" onclick="toggle(this)" icon="star"> Button </ix-button>
-    <ix-icon-button variant="subtle-primary" onclick="toggle(this)" icon="star">
-    </ix-icon-button>
-    <ix-button variant="subtle-primary" loading> Button </ix-button>
-    <ix-icon-button variant="subtle-primary" loading icon="star"></ix-icon-button>
+    <ix-button variant="subtle-tertiary"> Button </ix-button>
+    <ix-button disabled variant="subtle-tertiary"> Button </ix-button>
     <script type="module" src="./init.js"></script>
   </body>
 </html>
 ```
-### Example: button-secondary
+### Example: button-tertiary
 ```html
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button secondary example</title>
-    <link rel="stylesheet" href="./button-secondary.css" />
+    <title>Button tertiary example</title>
+    <link rel="stylesheet" href="./button-tertiary.css" />
   </head>
   <body>
-    <ix-button variant="subtle-primary"> Button </ix-button>
-    <ix-button variant="subtle-primary" disabled> Button </ix-button>
+    <ix-button variant="tertiary"> Button </ix-button>
+    <ix-button variant="tertiary" disabled> Button </ix-button>
     <script type="module" src="./init.js"></script>
   </body>
 </html>
@@ -288,15 +288,15 @@
         <ix-button href="https://siemens.com" variant="secondary"
           >Secondary Link</ix-button
         >
-        <ix-button href="https://siemens.com" variant="danger"
+        <ix-button href="https://siemens.com" variant="danger-primary"
           >Danger Link</ix-button
         >
       </div>
       <div style="margin-bottom: 1rem">
-        <h3>Outline and Ghost Links</h3>
-        <ix-button href="https://siemens.com" outline> Outline Link </ix-button>
-        <ix-button href="https://siemens.com" ghost> Ghost Link </ix-button>
+        <h3>Secondary and Tertiary Links</h3>
+        <ix-button href="https://siemens.com" variant="secondary"> Secondary Link </ix-button>
+        <ix-button href="https://siemens.com" variant="tertiary"> Tertiary Link </ix-button>
       </div>
       <div style="margin-bottom: 1rem">
@@ -376,9 +376,9 @@
         header-subtitle="Subtitle"
       >
         <ix-pill slot="header" icon="info" class="margin-top">Label</ix-pill>
-        <ix-button ghost>Button1</ix-button>
-        <ix-button ghost>Button2</ix-button>
-        <ix-button ghost>Button3</ix-button>
+        <ix-button variant="tertiary">Button1</ix-button>
+        <ix-button variant="tertiary">Button2</ix-button>
+        <ix-button variant="tertiary">Button3</ix-button>
       </ix-content-header>
     </div>
@@ -721,7 +721,7 @@
       const btn = document.querySelector('ix-button');
       btn.addEventListener('click', () => {
         let count = 0;
-        const progress = showModalLoading('Loading 0/2');
+        const progress = showModalLoading({ message: 'Loading 0/2' });
         const interval = setInterval(() => {
           count++;
           progress.update(`Loading ${count}/2`);
@@ -1860,49 +1860,9 @@
 ## React Examples
-### Example: button-danger-ghost
-```tsx
-import './button-danger-ghost.scoped.css';
-import { IxButton } from '@siemens/ix-react';
-export default () => {
-  return (
-    <>
-      <IxButton variant="subtle-tertiary">
-        Button
-      </IxButton>
-      <IxButton disabled variant="subtle-tertiary">
-        Button
-      </IxButton>
-    </>
-  );
-};
-```
-### Example: button-danger-outline
-```tsx
-import './button-danger-outline.scoped.css';
-import { IxButton } from '@siemens/ix-react';
-export default () => {
-  return (
-    <>
-      <IxButton variant="danger-secondary">
-        Button
-      </IxButton>
-      <IxButton disabled variant="danger-secondary">
-        Button
-      </IxButton>
-    </>
-  );
-};
-```
-### Example: button-danger
+### Example: button-danger-primary
 ```tsx
-import './button-danger.scoped.css';
+import './button-danger-primary.scoped.css';
 import { IxButton } from '@siemens/ix-react';
@@ -1918,39 +1878,19 @@ export default () => {
 };
 ```
-### Example: button-ghost
-```tsx
-import './button-ghost.scoped.css';
-import { IxButton } from '@siemens/ix-react';
-export default () => {
-  return (
-    <>
-      <IxButton variant="tertiary">
-        Button
-      </IxButton>
-      <IxButton variant="tertiary" disabled>
-        Button
-      </IxButton>
-    </>
-  );
-};
-```
-### Example: button-grey-ghost
+### Example: button-danger-secondary
 ```tsx
-import './button-grey-ghost.scoped.css';
+import './button-danger-secondary.scoped.css';
 import { IxButton } from '@siemens/ix-react';
 export default () => {
   return (
     <>
-      <IxButton variant="subtle-tertiary">
+      <IxButton variant="danger-secondary">
         Button
       </IxButton>
-      <IxButton disabled variant="subtle-tertiary">
+      <IxButton disabled variant="danger-secondary">
         Button
       </IxButton>
     </>
@@ -1958,37 +1898,19 @@ export default () => {
 };
 ```
-### Example: button-grey-secondary
+### Example: button-danger-tertiary
 ```tsx
-import './button-grey-secondary.scoped.css';
+import './button-danger-tertiary.scoped.css';
 import { IxButton } from '@siemens/ix-react';
 export default () => {
   return (
     <>
-      <IxButton variant="subtle-secondary">
+      <IxButton variant="danger-tertiary">
         Button
       </IxButton>
-      <IxButton disabled variant="subtle-secondary">
-        Button
-      </IxButton>
-    </>
-  );
-};
-```
-### Example: button-grey
-```tsx
-import './button-grey.scoped.css';
-import { IxButton } from '@siemens/ix-react';
-export default () => {
-  return (
-    <>
-      <IxButton variant="subtle-primary">Button</IxButton>
-      <IxButton disabled variant="subtle-primary">
+      <IxButton disabled variant="danger-tertiary">
         Button
       </IxButton>
     </>
@@ -2092,10 +2014,88 @@ import { IxButton } from '@siemens/ix-react';
 export default () => {
   return (
     <>
-      <IxButton variant="subtle-primary">
+      <IxButton variant="secondary">
+        Button
+      </IxButton>
+      <IxButton variant="secondary" disabled>
+        Button
+      </IxButton>
+    </>
+  );
+};
+```
+### Example: button-subtle-primary
+```tsx
+import './button-subtle-primary.scoped.css';
+import { IxButton } from '@siemens/ix-react';
+export default () => {
+  return (
+    <>
+      <IxButton variant="subtle-primary">Button</IxButton>
+      <IxButton disabled variant="subtle-primary">
+        Button
+      </IxButton>
+    </>
+  );
+};
+```
+### Example: button-subtle-secondary
+```tsx
+import './button-subtle-secondary.scoped.css';
+import { IxButton } from '@siemens/ix-react';
+export default () => {
+  return (
+    <>
+      <IxButton variant="subtle-secondary">
+        Button
+      </IxButton>
+      <IxButton disabled variant="subtle-secondary">
+        Button
+      </IxButton>
+    </>
+  );
+};
+```
+### Example: button-subtle-tertiary
+```tsx
+import './button-subtle-tertiary.scoped.css';
+import { IxButton } from '@siemens/ix-react';
+export default () => {
+  return (
+    <>
+      <IxButton variant="subtle-tertiary">
+        Button
+      </IxButton>
+      <IxButton disabled variant="subtle-tertiary">
+        Button
+      </IxButton>
+    </>
+  );
+};
+```
+### Example: button-tertiary
+```tsx
+import './button-tertiary.scoped.css';
+import { IxButton } from '@siemens/ix-react';
+export default () => {
+  return (
+    <>
+      <IxButton variant="tertiary">
         Button
       </IxButton>
-      <IxButton variant="subtle-primary" disabled>
+      <IxButton variant="tertiary" disabled>
         Button
       </IxButton>
     </>
@@ -2164,18 +2164,18 @@ export const ButtonWithLink: React.FC = () => {
         <IxButton href="https://siemens.com" variant="secondary">
           Secondary Link
         </IxButton>
-        <IxButton href="https://siemens.com" variant="danger">
+        <IxButton href="https://siemens.com" variant="danger-primary">
           Danger Link
         </IxButton>
       </div>
       <div style={{ marginBottom: '1rem' }}>
-        <h3>Outline and Ghost Links</h3>
-        <IxButton href="https://siemens.com" outline>
-          Outline Link
+        <h3>Secondary and Tertiary Links</h3>
+        <IxButton href="https://siemens.com" variant="secondary">
+          Secondary Link
         </IxButton>
-        <IxButton href="https://siemens.com" ghost>
-          Ghost Link
+        <IxButton href="https://siemens.com" variant="tertiary">
+          Tertiary Link
         </IxButton>
       </div>
@@ -2246,9 +2246,9 @@ export default () => {
       <IxPill slot="header" icon={iconInfo} className="margin-top">
         Label
       </IxPill>
-      <IxButton ghost>Button1</IxButton>
-      <IxButton ghost>Button2</IxButton>
-      <IxButton ghost>Button3</IxButton>
+      <IxButton variant='tertiary'>Button1</IxButton>
+      <IxButton variant='tertiary'>Button2</IxButton>
+      <IxButton variant='tertiary'>Button3</IxButton>
     </IxContentHeader>
   );
 };
@@ -2521,7 +2521,7 @@ import { IxButton, showModalLoading } from '@siemens/ix-react';
 export default () => {
   const startLoading = () => {
     let count = 0;
-    const progress: ModalLoadingContext = showModalLoading('Loading 0/2');
+    const progress: ModalLoadingContext = showModalLoading({ message: 'Loading 0/2' });
     const interval = setInterval(() => {
       count++;
       progress.update(`Loading ${count}/2`);
@@ -3400,41 +3400,13 @@ export default function () {
 ## Vue Examples
-### Example: button-danger-ghost
+### Example: button-danger-primary
 ```tsx
 <script setup lang="ts">
 import { IxButton } from '@siemens/ix-vue';
 </script>
-<style scoped src="./button-danger-ghost.css"></style>
-<template>
-  <IxButton variant="danger-tertiary"> Button </IxButton>
-  <IxButton disabled variant="danger-tertiary"> Button </IxButton>
-</template>
-```
-### Example: button-danger-outline
-```tsx
-<script setup lang="ts">
-import { IxButton } from '@siemens/ix-vue';
-</script>
-<style scoped src="./button-danger-outline.css"></style>
-<template>
-  <IxButton variant="danger-secondary"> Button </IxButton>
-  <IxButton disabled variant="danger-secondary"> Button </IxButton>
-</template>
-```
-### Example: button-danger
-```tsx
-<script setup lang="ts">
-import { IxButton } from '@siemens/ix-vue';
-</script>
-<style scoped src="./button-danger.css"></style>
+<style scoped src="./button-danger-primary.css"></style>
 <template>
   <IxButton variant="danger-primary"> Button </IxButton>
@@ -3442,59 +3414,31 @@ import { IxButton } from '@siemens/ix-vue';
 </template>
 ```
-### Example: button-ghost
+### Example: button-danger-secondary
 ```tsx
 <script setup lang="ts">
 import { IxButton } from '@siemens/ix-vue';
 </script>
-<style scoped src="./button-ghost.css"></style>
+<style scoped src="./button-danger-secondary.css"></style>
 <template>
-  <IxButton variant="tertiary"> Button </IxButton>
-  <IxButton variant="tertiary" disabled> Button </IxButton>
-</template>
-```
-### Example: button-grey-ghost
-```tsx
-<script setup lang="ts">
-import { IxButton } from '@siemens/ix-vue';
-</script>
-<style scoped src="./button-grey-ghost.css"></style>
-<template>
-  <IxButton variant="subtle-tertiary"> Button </IxButton>
-  <IxButton disabled variant="subtle-tertiary"> Button </IxButton>
-</template>
-```
-### Example: button-grey-secondary
-```tsx
-<script setup lang="ts">
-import { IxButton } from '@siemens/ix-vue';
-</script>
-<style scoped src="./button-grey-secondary.css"></style>
-<template>
-  <IxButton variant="subtle-secondary"> Button </IxButton>
-  <IxButton disabled variant="subtle-secondary"> Button </IxButton>
+  <IxButton variant="danger-secondary"> Button </IxButton>
+  <IxButton disabled variant="danger-secondary"> Button </IxButton>
 </template>
 ```
-### Example: button-grey
+### Example: button-danger-tertiary
 ```tsx
 <script setup lang="ts">
 import { IxButton } from '@siemens/ix-vue';
 </script>
-<style scoped src="./button-grey.css"></style>
+<style scoped src="./button-danger-tertiary.css"></style>
 <template>
-  <IxButton variant="subtle-primary"> Button </IxButton>
-  <IxButton disabled variant="subtle-primary"> Button </IxButton>
+  <IxButton variant="danger-tertiary"> Button </IxButton>
+  <IxButton disabled variant="danger-tertiary"> Button </IxButton>
 </template>
 ```
@@ -3561,9 +3505,65 @@ import { IxButton } from '@siemens/ix-vue';
 <style scoped src="./button-secondary.css"></style>
+<template>
+  <IxButton variant="secondary"> Button </IxButton>
+  <IxButton variant="secondary" disabled> Button </IxButton>
+</template>
+```
+### Example: button-subtle-primary
+```tsx
+<script setup lang="ts">
+import { IxButton } from '@siemens/ix-vue';
+</script>
+<style scoped src="./button-subtle-primary.css"></style>
 <template>
   <IxButton variant="subtle-primary"> Button </IxButton>
-  <IxButton variant="subtle-primary" disabled> Button </IxButton>
+  <IxButton disabled variant="subtle-primary"> Button </IxButton>
+</template>
+```
+### Example: button-subtle-secondary
+```tsx
+<script setup lang="ts">
+import { IxButton } from '@siemens/ix-vue';
+</script>
+<style scoped src="./button-subtle-secondary.css"></style>
+<template>
+  <IxButton variant="subtle-secondary"> Button </IxButton>
+  <IxButton disabled variant="subtle-secondary"> Button </IxButton>
+</template>
+```
+### Example: button-subtle-tertiary
+```tsx
+<script setup lang="ts">
+import { IxButton } from '@siemens/ix-vue';
+</script>
+<style scoped src="./button-subtle-tertiary.css"></style>
+<template>
+  <IxButton variant="subtle-tertiary"> Button </IxButton>
+  <IxButton disabled variant="subtle-tertiary"> Button </IxButton>
+</template>
+```
+### Example: button-tertiary
+```tsx
+<script setup lang="ts">
+import { IxButton } from '@siemens/ix-vue';
+</script>
+<style scoped src="./button-tertiary.css"></style>
+<template>
+  <IxButton variant="tertiary"> Button </IxButton>
+  <IxButton variant="tertiary" disabled> Button </IxButton>
 </template>
 ```
@@ -3622,18 +3622,18 @@ addIcons({ iconHome, iconOpenExternal, iconInfo });
       <IxButton href="https://siemens.com" variant="secondary">
         Secondary Link
       </IxButton>
-      <IxButton href="https://siemens.com" variant="danger">
+      <IxButton href="https://siemens.com" variant="danger-primary">
         Danger Link
       </IxButton>
     </div>
     <div style="margin-bottom: 1rem;">
-      <h3>Outline and Ghost Links</h3>
-      <IxButton href="https://siemens.com" outline>
-        Outline Link
+      <h3>Secondary and Tertiary Links</h3>
+      <IxButton href="https://siemens.com" variant="secondary">
+        Secondary Link
       </IxButton>
-      <IxButton href="https://siemens.com" ghost>
-        Ghost Link
+      <IxButton href="https://siemens.com" variant="tertiary">
+        Tertiary Link
       </IxButton>
     </div>
@@ -3693,9 +3693,9 @@ import { iconInfo } from '@siemens/ix-icons/icons';
 <template>
   <IxContentHeader has-back-button header-title="Content title" header-subtitle="Subtitle">
     <IxPill slot="header" :icon="iconInfo" class="margin-top">Label</IxPill>
-    <IxButton ghost>Button1</IxButton>
-    <IxButton ghost>Button2</IxButton>
-    <IxButton ghost>Button3</IxButton>
+    <IxButton variant="tertiary">Button1</IxButton>
+    <IxButton variant="tertiary">Button2</IxButton>
+    <IxButton variant="tertiary">Button3</IxButton>
   </IxContentHeader>
 </template>
 ```
@@ -3951,11 +3951,11 @@ import { IxButton, IxGroup, IxGroupItem } from '@siemens/ix-vue';
 ```tsx
 <script setup lang="ts">
 import { IxButton, showModalLoading } from '@siemens/ix-vue';
-import { ModalLoadingContext } from '@siemens/ix';
+import type { ModalLoadingContext } from '@siemens/ix';
 const startLoading = () => {
   let count = 0;
-  const progress: ModalLoadingContext = showModalLoading('Loading 0/2');
+  const progress: ModalLoadingContext = showModalLoading({ message: 'Loading 0/2' });
   const interval = setInterval(() => {
     count++;
     progress.update(`Loading ${count}/2`);
@@ -4754,7 +4754,7 @@ export default {
 ## Angular Examples
-### Example: button-danger-ghost
+### Example: button-danger-primary
 #### Component typescript
 ```typescript
@@ -4764,19 +4764,20 @@ import { Component } from '@angular/core';
 @Component({
   standalone: false,
   selector: 'app-example',
-  templateUrl: './button-danger-ghost.html',
+  templateUrl: './button-danger-primary.html',
+  styleUrls: ['./button-danger-primary.css'],
 })
 export default class Buttons {}
 ```
 #### Component template
 ```html
-<ix-button variant="subtle-tertiary"> Button </ix-button>
-<ix-button disabled variant="subtle-tertiary"> Button </ix-button>
+<ix-button variant="danger-primary"> Button </ix-button>
+<ix-button disabled variant="danger-primary"> Button </ix-button>
 ```
-### Example: button-danger-outline
+### Example: button-danger-secondary
 #### Component typescript
 ```typescript
@@ -4786,8 +4787,8 @@ import { Component } from '@angular/core';
 @Component({
   standalone: false,
   selector: 'app-example',
-  templateUrl: './button-danger-outline.html',
-  styleUrls: ['./button-danger-outline.css'],
+  templateUrl: './button-danger-secondary.html',
+  styleUrls: ['./button-danger-secondary.css'],
 })
 export default class Buttons {}
@@ -4799,7 +4800,7 @@ export default class Buttons {}
 ```
-### Example: button-danger
+### Example: button-danger-tertiary
 #### Component typescript
 ```typescript
@@ -4809,20 +4810,18 @@ import { Component } from '@angular/core';
 @Component({
   standalone: false,
   selector: 'app-example',
-  templateUrl: './button-danger.html',
-  styleUrls: ['./button-danger.css'],
+  templateUrl: './button-danger-tertiary.html',
 })
 export default class Buttons {}
 ```
 #### Component template
 ```html
-<ix-button variant="danger-primary"> Button </ix-button>
-<ix-button disabled variant="danger-primary"> Button </ix-button>
+<ix-button variant="danger-tertiary"> Button </ix-button>
+<ix-button disabled variant="danger-tertiary"> Button </ix-button>
 ```
-### Example: button-ghost
+### Example: button-group
 #### Component typescript
 ```typescript
@@ -4833,16 +4832,19 @@ import { Component } from '@angular/core';
   standalone: false,
   selector: 'app-example',
   template: `
-    <ix-button variant="tertiary"> Button </ix-button>
-    <ix-button variant="tertiary" disabled> Button </ix-button>
+    <div class="ix-button-group">
+      <ix-button variant="subtle-secondary"> Button 1 </ix-button>
+      <ix-button> Button 2 </ix-button>
+      <ix-button variant="subtle-secondary"> Button 3 </ix-button>
+      <ix-button variant="subtle-secondary"> Button 4 </ix-button>
+    </div>
   `,
-  styleUrls: ['./button-ghost.css'],
 })
-export default class Buttons {}
+export default class ButtonGroup {}
 ```
-### Example: button-grey-ghost
+### Example: button-loading
 #### Component typescript
 ```typescript
@@ -4852,25 +4854,57 @@ import { Component } from '@angular/core';
 @Component({
   standalone: false,
   selector: 'app-example',
-  template: buttonGreyGhost(),
-  styleUrls: ['./button-grey-ghost.css'],
+  template: './button-loading.html',
+  styleUrls: ['./button-loading.css'],
 })
-export default class Buttons {}
+export default class ButtonLoading {
+  loading = false;
+  loading2 = false;
+  loading3 = false;
-function buttonGreyGhost(): string | undefined {
-  return `
-      <ix-button variant="subtle-tertiary">
-        Button
-      </ix-button>
-      <ix-button disabled variant="subtle-tertiary">
-        Button
-      </ix-button>
-  `;
+  toggle() {
+    this.loading = true;
+    setTimeout(() => {
+      this.loading = false;
+    }, 2500);
+  }
+  toggle2() {
+    this.loading2 = true;
+    setTimeout(() => {
+      this.loading2 = false;
+    }, 2500);
+  }
+  toggle3() {
+    this.loading3 = true;
+    setTimeout(() => {
+      this.loading3 = false;
+    }, 2500);
+  }
 }
+```
+#### Component template
+```html
+<ix-button variant="subtle-primary" (click)="toggle()" [loading]="loading">
+  Button
+</ix-button>
+<ix-button variant="subtle-primary" (click)="toggle2()" [loading]="loading2" icon="star">
+  Button
+</ix-button>
+<ix-icon-button variant="subtle-primary" (click)="toggle3()" [loading]="loading3" icon="star">
+</ix-icon-button>
+<ix-button variant="subtle-primary" loading> Button </ix-button>
+<ix-icon-button variant="subtle-primary" loading icon="star"></ix-icon-button>
 ```
-### Example: button-grey-secondary
+### Example: button-secondary
 #### Component typescript
 ```typescript
@@ -4880,17 +4914,15 @@ import { Component } from '@angular/core';
 @Component({
   standalone: false,
   selector: 'app-example',
-  template: `
-    <ix-button variant="subtle-secondary"> Button </ix-button>
-    <ix-button disabled variant="subtle-secondary"> Button </ix-button>
-  `,
-  styleUrls: ['./button-grey-secondary.css'],
+  template: ` <ix-button variant="secondary"> Button </ix-button>
+    <ix-button variant="secondary" disabled> Button </ix-button>`,
+  styleUrls: ['./button-secondary.css'],
 })
 export default class Buttons {}
 ```
-### Example: button-grey
+### Example: button-subtle-primary
 #### Component typescript
 ```typescript
@@ -4904,13 +4936,13 @@ import { Component } from '@angular/core';
     <ix-button variant="subtle-primary"> Button </ix-button>
     <ix-button disabled variant="subtle-primary"> Button </ix-button>
   `,
-  styleUrls: ['./button-grey.css'],
+  styleUrls: ['./button-subtle-primary.css'],
 })
 export default class Buttons {}
 ```
-### Example: button-group
+### Example: button-subtle-secondary
 #### Component typescript
 ```typescript
@@ -4921,19 +4953,16 @@ import { Component } from '@angular/core';
   standalone: false,
   selector: 'app-example',
   template: `
-    <div class="ix-button-group">
-      <ix-button variant="subtle-secondary"> Button 1 </ix-button>
-      <ix-button> Button 2 </ix-button>
-      <ix-button variant="subtle-secondary"> Button 3 </ix-button>
-      <ix-button variant="subtle-secondary"> Button 4 </ix-button>
-    </div>
+    <ix-button variant="subtle-secondary"> Button </ix-button>
+    <ix-button disabled variant="subtle-secondary"> Button </ix-button>
   `,
+  styleUrls: ['./button-subtle-secondary.css'],
 })
-export default class ButtonGroup {}
+export default class Buttons {}
 ```
-### Example: button-loading
+### Example: button-subtle-tertiary
 #### Component typescript
 ```typescript
@@ -4943,57 +4972,25 @@ import { Component } from '@angular/core';
 @Component({
   standalone: false,
   selector: 'app-example',
-  template: './button-loading.html',
-  styleUrls: ['./button-loading.css'],
+  template: buttonSubtleTertiary(),
+  styleUrls: ['./button-subtle-tertiary.css'],
 })
-export default class ButtonLoading {
-  loading = false;
-  loading2 = false;
-  loading3 = false;
-  toggle() {
-    this.loading = true;
-    setTimeout(() => {
-      this.loading = false;
-    }, 2500);
-  }
-  toggle2() {
-    this.loading2 = true;
-    setTimeout(() => {
-      this.loading2 = false;
-    }, 2500);
-  }
+export default class Buttons {}
-  toggle3() {
-    this.loading3 = true;
-    setTimeout(() => {
-      this.loading3 = false;
-    }, 2500);
-  }
+function buttonSubtleTertiary(): string | undefined {
+  return `
+      <ix-button variant="subtle-tertiary">
+        Button
+      </ix-button>
+      <ix-button disabled variant="subtle-tertiary">
+        Button
+      </ix-button>
+  `;
 }
 ```
-#### Component template
-```html
-<ix-button variant="subtle-primary" (click)="toggle()" [loading]="loading">
-  Button
-</ix-button>
-<ix-button variant="subtle-primary" (click)="toggle2()" [loading]="loading2" icon="star">
-  Button
-</ix-button>
-<ix-icon-button variant="subtle-primary" (click)="toggle3()" [loading]="loading3" icon="star">
-</ix-icon-button>
-<ix-button variant="subtle-primary" loading> Button </ix-button>
-<ix-icon-button variant="subtle-primary" loading icon="star"></ix-icon-button>
-```
-### Example: button-secondary
+### Example: button-tertiary
 #### Component typescript
 ```typescript
@@ -5003,9 +5000,11 @@ import { Component } from '@angular/core';
 @Component({
   standalone: false,
   selector: 'app-example',
-  template: ` <ix-button variant="subtle-primary"> Button </ix-button>
-    <ix-button variant="subtle-primary" disabled> Button </ix-button>`,
-  styleUrls: ['./button-secondary.css'],
+  template: `
+    <ix-button variant="tertiary"> Button </ix-button>
+    <ix-button variant="tertiary" disabled> Button </ix-button>
+  `,
+  styleUrls: ['./button-tertiary.css'],
 })
 export default class Buttons {}
@@ -5076,15 +5075,15 @@ export default class ButtonWithLink {}
     <ix-button href="https://siemens.com" variant="secondary"
       >Secondary Link</ix-button
     >
-    <ix-button href="https://siemens.com" variant="danger"
+    <ix-button href="https://siemens.com" variant="danger-primary"
       >Danger Link</ix-button
     >
   </div>
   <div style="margin-bottom: 1rem">
-    <h3>Outline and Ghost Links</h3>
-    <ix-button href="https://siemens.com" outline> Outline Link </ix-button>
-    <ix-button href="https://siemens.com" ghost> Ghost Link </ix-button>
+    <h3>Secondary and Tertiary Links</h3>
+    <ix-button href="https://siemens.com" variant="secondary"> Secondary Link </ix-button>
+    <ix-button href="https://siemens.com" variant="tertiary"> Tertiary Link </ix-button>
   </div>
   <div style="margin-bottom: 1rem">
@@ -5172,9 +5171,9 @@ LICENSE file in the root directory of this source tree.
   header-subtitle="Subtitle"
 >
   <ix-pill slot="header" icon="info" class="margin-top">Label</ix-pill>
-  <ix-button ghost>Button1</ix-button>
-  <ix-button ghost>Button2</ix-button>
-  <ix-button ghost>Button3</ix-button>
+  <ix-button variant="tertiary">Button1</ix-button>
+  <ix-button variant="tertiary">Button2</ix-button>
+  <ix-button variant="tertiary">Button3</ix-button>
 </ix-content-header>
 ```
@@ -5498,7 +5497,7 @@ export default class Loading {
   startLoading = () => {
     let count = 0;
     const progress: ModalLoadingContext =
-      this.loadingService.showModalLoading('Loading 0/2');
+      this.loadingService.showModalLoading({ message: 'Loading 0/2' });
     const interval = setInterval(() => {
       count++;
       progress.update(`Loading ${count}/2`);
@@ -6436,7 +6435,7 @@ LICENSE file in the root directory of this source tree.
 ## Angular Standalone Examples
-### Example: button-danger-ghost
+### Example: button-danger-primary
 #### Component typescript
 ```typescript
@@ -6447,7 +6446,8 @@ import { IxButton } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
   imports: [IxButton],
-  templateUrl: './button-danger-ghost.html',
+  templateUrl: './button-danger-primary.html',
+  styleUrls: ['./button-danger-primary.css'],
 })
 export default class Buttons {}
@@ -6463,12 +6463,12 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 -->
-<ix-button variant="subtle-tertiary"> Button </ix-button>
-<ix-button disabled variant="subtle-tertiary"> Button </ix-button>
+<ix-button variant="danger-primary"> Button </ix-button>
+<ix-button disabled variant="danger-primary"> Button </ix-button>
 ```
-### Example: button-danger-outline
+### Example: button-danger-secondary
 #### Component typescript
 ```typescript
@@ -6479,8 +6479,8 @@ import { IxButton } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
   imports: [IxButton],
-  templateUrl: './button-danger-outline.html',
-  styleUrls: ['./button-danger-outline.css'],
+  templateUrl: './button-danger-secondary.html',
+  styleUrls: ['./button-danger-secondary.css'],
 })
 export default class Buttons {}
@@ -6501,7 +6501,7 @@ LICENSE file in the root directory of this source tree.
 ```
-### Example: button-danger
+### Example: button-danger-tertiary
 #### Component typescript
 ```typescript
@@ -6512,8 +6512,7 @@ import { IxButton } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
   imports: [IxButton],
-  templateUrl: './button-danger.html',
-  styleUrls: ['./button-danger.css'],
+  templateUrl: './button-danger-tertiary.html',
 })
 export default class Buttons {}
@@ -6529,12 +6528,12 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 -->
-<ix-button variant="danger-primary"> Button </ix-button>
-<ix-button disabled variant="danger-primary"> Button </ix-button>
+<ix-button variant="danger-tertiary"> Button </ix-button>
+<ix-button disabled variant="danger-tertiary"> Button </ix-button>
 ```
-### Example: button-ghost
+### Example: button-group
 #### Component typescript
 ```typescript
@@ -6546,45 +6545,85 @@ import { IxButton } from '@siemens/ix-angular/standalone';
   selector: 'app-example',
   imports: [IxButton],
   template: `
-    <ix-button variant="tertiary"> Button </ix-button>
-    <ix-button variant="tertiary" disabled> Button </ix-button>
+    <div class="ix-button-group">
+      <ix-button variant="subtle-secondary"> Button 1 </ix-button>
+      <ix-button> Button 2 </ix-button>
+      <ix-button variant="subtle-secondary"> Button 3 </ix-button>
+      <ix-button variant="subtle-secondary"> Button 4 </ix-button>
+    </div>
   `,
-  styleUrls: ['./button-ghost.css'],
 })
-export default class Buttons {}
+export default class ButtonGroup {}
 ```
-### Example: button-grey-ghost
+### Example: button-loading
 #### Component typescript
 ```typescript
 import { Component } from '@angular/core';
-import { IxButton } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
-  imports: [IxButton],
-  template: buttonGreyGhost(),
-  styleUrls: ['./button-grey-ghost.css'],
+  template: './button-loading.html',
+  styleUrls: ['./button-loading.css'],
 })
-export default class Buttons {}
+export default class ButtonLoading {
+  loading = false;
+  loading2 = false;
+  loading3 = false;
-function buttonGreyGhost(): string | undefined {
-  return `
-      <ix-button variant="subtle-tertiary">
-        Button
-      </ix-button>
-      <ix-button disabled variant="subtle-tertiary">
-        Button
-      </ix-button>
-  `;
+  toggle() {
+    this.loading = true;
+    setTimeout(() => {
+      this.loading = false;
+    }, 2500);
+  }
+  toggle2() {
+    this.loading2 = true;
+    setTimeout(() => {
+      this.loading2 = false;
+    }, 2500);
+  }
+  toggle3() {
+    this.loading3 = true;
+    setTimeout(() => {
+      this.loading3 = false;
+    }, 2500);
+  }
 }
 ```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2025 Siemens AG
-### Example: button-grey-secondary
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-button variant="subtle-primary" (click)="toggle()" [loading]="loading"> Button </ix-button>
+<ix-button variant="subtle-primary" (click)="toggle2()" [loading]="loading2" icon="star">
+  Button
+</ix-button>
+<ix-icon-button variant="subtle-primary" (click)="toggle3()" [loading]="loading3" icon="star">
+</ix-icon-button>
+<ix-button variant="subtle-primary" loading> Button </ix-button>
+<ix-icon-button variant="subtle-primary" loading icon="star"></ix-icon-button>
+```
+### Example: button-secondary
 #### Component typescript
 ```typescript
@@ -6595,17 +6634,15 @@ import { IxButton } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
   imports: [IxButton],
-  template: `
-    <ix-button variant="subtle-secondary"> Button </ix-button>
-    <ix-button disabled variant="subtle-secondary"> Button </ix-button>
-  `,
-  styleUrls: ['./button-grey-secondary.css'],
+  template: ` <ix-button variant="secondary"> Button </ix-button>
+    <ix-button variant="secondary" disabled> Button </ix-button>`,
+  styleUrls: ['./button-secondary.css'],
 })
 export default class Buttons {}
 ```
-### Example: button-grey
+### Example: button-subtle-primary
 #### Component typescript
 ```typescript
@@ -6620,13 +6657,13 @@ import { IxButton } from '@siemens/ix-angular/standalone';
     <ix-button variant="subtle-primary"> Button </ix-button>
     <ix-button disabled variant="subtle-primary"> Button </ix-button>
   `,
-  styleUrls: ['./button-grey.css'],
+  styleUrls: ['./button-subtle-primary.css'],
 })
 export default class Buttons {}
 ```
-### Example: button-group
+### Example: button-subtle-secondary
 #### Component typescript
 ```typescript
@@ -6638,85 +6675,45 @@ import { IxButton } from '@siemens/ix-angular/standalone';
   selector: 'app-example',
   imports: [IxButton],
   template: `
-    <div class="ix-button-group">
-      <ix-button variant="subtle-secondary"> Button 1 </ix-button>
-      <ix-button> Button 2 </ix-button>
-      <ix-button variant="subtle-secondary"> Button 3 </ix-button>
-      <ix-button variant="subtle-secondary"> Button 4 </ix-button>
-    </div>
+    <ix-button variant="subtle-secondary"> Button </ix-button>
+    <ix-button disabled variant="subtle-secondary"> Button </ix-button>
   `,
+  styleUrls: ['./button-subtle-secondary.css'],
 })
-export default class ButtonGroup {}
+export default class Buttons {}
 ```
-### Example: button-loading
+### Example: button-subtle-tertiary
 #### Component typescript
 ```typescript
 import { Component } from '@angular/core';
+import { IxButton } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
-  template: './button-loading.html',
-  styleUrls: ['./button-loading.css'],
+  imports: [IxButton],
+  template: buttonSubtleTertiary(),
+  styleUrls: ['./button-subtle-tertiary.css'],
 })
-export default class ButtonLoading {
-  loading = false;
-  loading2 = false;
-  loading3 = false;
-  toggle() {
-    this.loading = true;
-    setTimeout(() => {
-      this.loading = false;
-    }, 2500);
-  }
-  toggle2() {
-    this.loading2 = true;
-    setTimeout(() => {
-      this.loading2 = false;
-    }, 2500);
-  }
+export default class Buttons {}
-  toggle3() {
-    this.loading3 = true;
-    setTimeout(() => {
-      this.loading3 = false;
-    }, 2500);
-  }
+function buttonSubtleTertiary(): string | undefined {
+  return `
+      <ix-button variant="subtle-tertiary">
+        Button
+      </ix-button>
+      <ix-button disabled variant="subtle-tertiary">
+        Button
+      </ix-button>
+  `;
 }
 ```
-#### Component template
-```html
-<!--
-SPDX-FileCopyrightText: 2025 Siemens AG
-SPDX-License-Identifier: MIT
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
--->
-<ix-button variant="subtle-primary" (click)="toggle()" [loading]="loading"> Button </ix-button>
-<ix-button variant="subtle-primary" (click)="toggle2()" [loading]="loading2" icon="star">
-  Button
-</ix-button>
-<ix-icon-button variant="subtle-primary" (click)="toggle3()" [loading]="loading3" icon="star">
-</ix-icon-button>
-<ix-button variant="subtle-primary" loading> Button </ix-button>
-<ix-icon-button variant="subtle-primary" loading icon="star"></ix-icon-button>
-```
-### Example: button-secondary
+### Example: button-tertiary
 #### Component typescript
 ```typescript
@@ -6727,9 +6724,11 @@ import { IxButton } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
   imports: [IxButton],
-  template: ` <ix-button variant="subtle-primary"> Button </ix-button>
-    <ix-button variant="subtle-primary" disabled> Button </ix-button>`,
-  styleUrls: ['./button-secondary.css'],
+  template: `
+    <ix-button variant="tertiary"> Button </ix-button>
+    <ix-button variant="tertiary" disabled> Button </ix-button>
+  `,
+  styleUrls: ['./button-tertiary.css'],
 })
 export default class Buttons {}
@@ -6800,15 +6799,15 @@ export default class ButtonWithLink {}
     <ix-button href="https://siemens.com" variant="secondary"
       >Secondary Link</ix-button
     >
-    <ix-button href="https://siemens.com" variant="danger"
+    <ix-button href="https://siemens.com" variant="danger-primary"
       >Danger Link</ix-button
     >
   </div>
   <div style="margin-bottom: 1rem">
-    <h3>Outline and Ghost Links</h3>
-    <ix-button href="https://siemens.com" outline> Outline Link </ix-button>
-    <ix-button href="https://siemens.com" ghost> Ghost Link </ix-button>
+    <h3>Secondary and Tertiary Links</h3>
+    <ix-button href="https://siemens.com" variant="secondary"> Secondary Link </ix-button>
+    <ix-button href="https://siemens.com" variant="tertiary"> Tertiary Link </ix-button>
   </div>
   <div style="margin-bottom: 1rem">
@@ -6902,9 +6901,9 @@ LICENSE file in the root directory of this source tree.
   header-subtitle="Subtitle"
 >
   <ix-pill slot="header" icon="info" class="margin-top">Label</ix-pill>
-  <ix-button ghost>Button1</ix-button>
-  <ix-button ghost>Button2</ix-button>
-  <ix-button ghost>Button3</ix-button>
+  <ix-button variant="tertiary">Button1</ix-button>
+  <ix-button variant="tertiary">Button2</ix-button>
+  <ix-button variant="tertiary">Button3</ix-button>
 </ix-content-header>
 ```
@@ -7331,7 +7330,7 @@ export default class Loading {
   startLoading = () => {
     let count = 0;
     const progress: ModalLoadingContext =
-      this.loadingService.showModalLoading('Loading 0/2');
+      this.loadingService.showModalLoading({ message: 'Loading 0/2' });
     const interval = setInterval(() => {
       count++;
       progress.update(`Loading ${count}/2`);
@@ -7918,36 +7917,45 @@ import {
   selector: 'app-example',
   imports: [IxTile, IxIconButton, IxButton, IxIcon],
   template: `
-    <ix-tile size="small">92.8 °C</ix-tile>
+    <div class="example">
+      <ix-tile size="small">92.8 °C</ix-tile>
-    <ix-tile size="medium">
-      <div slot="header">Tile header</div>
-      <div class="text-l">92.8 °C</div>
-    </ix-tile>
+      <ix-tile size="medium">
+        <div slot="header">Tile header</div>
+        <div class="text-l">92.8 °C</div>
+      </ix-tile>
-    <ix-tile size="big">
-      <div class="tile-header" slot="header">
-        Tile header
-        <ix-icon-button variant="tertiary" icon="context-menu"></ix-icon-button>
-      </div>
-      <div slot="subheader">Temperature</div>
-      <div
-        style="
+      <ix-tile size="big">
+        <div class="tile-header" slot="header">
+          Tile header
+          <ix-icon-button
+            variant="tertiary"
+            icon="context-menu"
+          ></ix-icon-button>
+        </div>
+        <div slot="subheader">Temperature</div>
+        <div
+          style="
         display: flex;
         flex-direction: column;
         height: 100%;
         align-items: flex-end;
         justify-content: space-between;
       "
-      >
-        <span>92.8 °C</span>
-      </div>
-      <div class="tile-footer" slot="footer">
-        <ix-button variant="tertiary" slot="footer">
-          <ix-icon name="chevron-right-small"></ix-icon>Details
-        </ix-button>
-      </div>
-    </ix-tile>
+        >
+          <span>92.8 °C</span>
+        </div>
+        <div class="tile-footer" slot="footer">
+          <ix-button
+            variant="tertiary"
+            slot="footer"
+            icon="chevron-right-small"
+          >
+            Details
+          </ix-button>
+        </div>
+      </ix-tile>
+    </div>
   `,
   styleUrls: ['./tile.css'],
 })