diff --git a/frontend/demo/component/basiclayouts/basic-layouts-expanding-items.ts b/frontend/demo/component/basiclayouts/basic-layouts-expanding-items.ts
index 1fe6fac262..7cc171cbfd 100644
--- a/frontend/demo/component/basiclayouts/basic-layouts-expanding-items.ts
+++ b/frontend/demo/component/basiclayouts/basic-layouts-expanding-items.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/horizontal-layout';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
@@ -23,9 +22,9 @@ export class Example extends LitElement {
     return html`
       <!-- tag::snippet[] -->
       <vaadin-horizontal-layout theme="padding spacing">
-        <vaadin-button style="flex-grow: 1">Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
+        <div class="example-item" style="flex-grow: 1">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
       </vaadin-horizontal-layout>
       <!-- end::snippet[] -->
     `;
diff --git a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-horizontal-alignment.ts b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-horizontal-alignment.ts
index cb8632d770..7092352f85 100644
--- a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-horizontal-alignment.ts
+++ b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-horizontal-alignment.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/horizontal-layout';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
@@ -23,9 +22,9 @@ export class Example extends LitElement {
     return html`
       <!-- tag::snippet[] -->
       <vaadin-horizontal-layout theme="spacing padding" style="justify-content: center">
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
       </vaadin-horizontal-layout>
       <!-- end::snippet[] -->
     `;
diff --git a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-individual-alignment.ts b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-individual-alignment.ts
index 7fac77d49e..4e215773b3 100644
--- a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-individual-alignment.ts
+++ b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-individual-alignment.ts
@@ -1,6 +1,5 @@
 import 'Frontend/demo/init'; // hidden-source-line
 import '@vaadin/horizontal-layout';
-import '@vaadin/text-area';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { applyTheme } from 'Frontend/generated/theme';
@@ -21,24 +20,17 @@ export class Example extends LitElement {
 
   protected override render() {
     return html`
-    <!-- tag::snippet[] -->
+      <!-- tag::snippet[] -->
       <vaadin-horizontal-layout
         theme="spacing padding"
-        class="height-4xl" // hidden-source-line
+        class="height-4xl"
         style="align-items: stretch"
       >
-        <vaadin-text-area
-          label="Text area 1"
-          style="align-self: start"
-        ></vaadin-text-area>
-        <vaadin-text-area label="Text area 2"></vaadin-text-area>
-        <vaadin-text-area
-          label="Text area 3"
-          style="align-self: end"
-        ></vaadin-text-area>
+        <div class="example-item" style="align-self: start">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item" style="align-self: end">Item 3</div>
       </vaadin-horizontal-layout>
-
-    <!-- end::snippet[] -->
+      <!-- end::snippet[] -->
     `;
   }
 }
diff --git a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-margin.ts b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-margin.ts
index d3b6cc04f6..d55ff0c89c 100644
--- a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-margin.ts
+++ b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-margin.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/horizontal-layout';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
@@ -24,9 +23,9 @@ export class Example extends LitElement {
       <p>Horizontal layout without margin:</p>
       <div class="container">
         <vaadin-horizontal-layout theme="spacing padding">
-          <vaadin-button>Button 1</vaadin-button>
-          <vaadin-button>Button 2</vaadin-button>
-          <vaadin-button>Button 3</vaadin-button>
+          <div class="example-item">Item 1</div>
+          <div class="example-item">Item 2</div>
+          <div class="example-item">Item 3</div>
         </vaadin-horizontal-layout>
       </div>
 
@@ -35,9 +34,9 @@ export class Example extends LitElement {
         <!-- tag::snippet[] -->
         <vaadin-horizontal-layout theme="margin spacing padding">
           <!-- end::snippet[] -->
-          <vaadin-button>Button 1</vaadin-button>
-          <vaadin-button>Button 2</vaadin-button>
-          <vaadin-button>Button 3</vaadin-button>
+          <div class="example-item">Item 1</div>
+          <div class="example-item">Item 2</div>
+          <div class="example-item">Item 3</div>
           <!-- tag::snippet[] -->
         </vaadin-horizontal-layout>
         <!-- end::snippet[] -->
diff --git a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-padding.ts b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-padding.ts
index e13623bc21..d50fc93a86 100644
--- a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-padding.ts
+++ b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-padding.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/horizontal-layout';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
@@ -23,18 +22,18 @@ export class Example extends LitElement {
     return html`
       <p>Horizontal layout without padding:</p>
       <vaadin-horizontal-layout theme="spacing">
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
       </vaadin-horizontal-layout>
 
       <p>Horizontal layout with padding:</p>
       <!-- tag::snippet[] -->
       <vaadin-horizontal-layout theme="padding spacing">
         <!-- end::snippet[] -->
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
         <!-- tag::snippet[] -->
       </vaadin-horizontal-layout>
       <!-- end::snippet[] -->
diff --git a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-spacing-variants.ts b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-spacing-variants.ts
index 6f985c89cc..0d89d9c307 100644
--- a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-spacing-variants.ts
+++ b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-spacing-variants.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/horizontal-layout';
 import '@vaadin/radio-group';
 import { html, LitElement } from 'lit';
@@ -28,9 +27,9 @@ export class Example extends LitElement {
   protected override render() {
     return html`
       <vaadin-horizontal-layout theme="${this.themeVariant} padding" style="align-items: stretch">
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
       </vaadin-horizontal-layout>
       <vaadin-radio-group
         label="Spacing variant"
diff --git a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-spacing.ts b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-spacing.ts
index 71b08955c9..b4bc0cb315 100644
--- a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-spacing.ts
+++ b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-spacing.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/horizontal-layout';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
@@ -23,18 +22,18 @@ export class Example extends LitElement {
     return html`
       <p>Horizontal layout without spacing:</p>
       <vaadin-horizontal-layout theme="padding">
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
       </vaadin-horizontal-layout>
 
       <p>Horizontal layout with spacing:</p>
       <!-- tag::snippet[] -->
       <vaadin-horizontal-layout theme="spacing padding">
         <!-- end::snippet[] -->
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
         <!-- tag::snippet[] -->
       </vaadin-horizontal-layout>
       <!-- end::snippet[] -->
diff --git a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-vertical-alignment.ts b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-vertical-alignment.ts
index 950c7abac1..de3b2c5858 100644
--- a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-vertical-alignment.ts
+++ b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-vertical-alignment.ts
@@ -1,6 +1,5 @@
 import 'Frontend/demo/init'; // hidden-source-line
 import '@vaadin/horizontal-layout';
-import '@vaadin/text-area';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { applyTheme } from 'Frontend/generated/theme';
@@ -21,17 +20,17 @@ export class Example extends LitElement {
 
   protected override render() {
     return html`
-    <!-- tag::snippet[] -->
+      <!-- tag::snippet[] -->
       <vaadin-horizontal-layout
         theme="spacing padding"
-        class="height-4xl" // hidden-source-line
+        class="height-4xl"
         style="align-items: center"
       >
-        <vaadin-text-area label="Text area 1"></vaadin-text-area>
-        <vaadin-text-area label="Text area 2"></vaadin-text-area>
-        <vaadin-text-area label="Text area 3"></vaadin-text-area>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
       </vaadin-horizontal-layout>
-    <!-- end::snippet[] -->
+      <!-- end::snippet[] -->
     `;
   }
 }
diff --git a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-wrapping.ts b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-wrapping.ts
index 74afafcbaa..14747b06fa 100644
--- a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-wrapping.ts
+++ b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-wrapping.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/horizontal-layout';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
@@ -23,22 +22,22 @@ export class Example extends LitElement {
     return html`
       <p>Horizontal layout without wrapping:</p>
       <vaadin-horizontal-layout theme="spacing margin padding" style="width: 350px;">
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
-        <vaadin-button>Button 4</vaadin-button>
-        <vaadin-button>Button 5</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
+        <div class="example-item">Item 4</div>
+        <div class="example-item">Item 5</div>
       </vaadin-horizontal-layout>
 
       <p>Horizontal layout with wrapping:</p>
       <!-- tag::snippet[] -->
       <vaadin-horizontal-layout theme="wrap spacing margin padding" style="width: 350px;">
         <!-- end::snippet[] -->
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
-        <vaadin-button>Button 4</vaadin-button>
-        <vaadin-button>Button 5</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
+        <div class="example-item">Item 4</div>
+        <div class="example-item">Item 5</div>
         <!-- tag::snippet[] -->
       </vaadin-horizontal-layout>
       <!-- end::snippet[] -->
diff --git a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout.ts b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout.ts
index e10fbbf00f..a3f9b3e393 100644
--- a/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout.ts
+++ b/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/horizontal-layout';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
@@ -23,9 +22,9 @@ export class Example extends LitElement {
     return html`
       <!-- tag::snippet[] -->
       <vaadin-horizontal-layout theme="spacing padding">
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
       </vaadin-horizontal-layout>
       <!-- end::snippet[] -->
     `;
diff --git a/frontend/demo/component/basiclayouts/basic-layouts-margin.ts b/frontend/demo/component/basiclayouts/basic-layouts-margin.ts
index 2c414301ac..aefe36442b 100644
--- a/frontend/demo/component/basiclayouts/basic-layouts-margin.ts
+++ b/frontend/demo/component/basiclayouts/basic-layouts-margin.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/horizontal-layout';
 import '@vaadin/vertical-layout';
 import { html, LitElement } from 'lit';
@@ -27,9 +26,9 @@ export class Example extends LitElement {
           <p>Vertical layout without margin:</p>
           <div class="container">
             <vaadin-vertical-layout theme="spacing padding" style="align-items: stretch">
-              <vaadin-button>Button 1</vaadin-button>
-              <vaadin-button>Button 2</vaadin-button>
-              <vaadin-button>Button 3</vaadin-button>
+              <div class="example-item">Item 1</div>
+              <div class="example-item">Item 2</div>
+              <div class="example-item">Item 3</div>
             </vaadin-vertical-layout>
           </div>
         </div>
@@ -39,9 +38,9 @@ export class Example extends LitElement {
             <!-- tag::snippet[] -->
             <vaadin-vertical-layout theme="margin spacing padding" style="align-items: stretch">
               <!-- end::snippet[] -->
-              <vaadin-button>Button 1</vaadin-button>
-              <vaadin-button>Button 2</vaadin-button>
-              <vaadin-button>Button 3</vaadin-button>
+              <div class="example-item">Item 1</div>
+              <div class="example-item">Item 2</div>
+              <div class="example-item">Item 3</div>
               <!-- tag::snippet[] -->
             </vaadin-vertical-layout>
             <!-- end::snippet[] -->
@@ -50,5 +49,4 @@ export class Example extends LitElement {
       </vaadin-horizontal-layout>
     `;
   }
-  // end::snippet[]
 }
diff --git a/frontend/demo/component/basiclayouts/basic-layouts-padding.ts b/frontend/demo/component/basiclayouts/basic-layouts-padding.ts
index 3f7c7a270b..ae3afb771a 100644
--- a/frontend/demo/component/basiclayouts/basic-layouts-padding.ts
+++ b/frontend/demo/component/basiclayouts/basic-layouts-padding.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/horizontal-layout';
 import '@vaadin/vertical-layout';
 import { html, LitElement } from 'lit';
@@ -26,9 +25,9 @@ export class Example extends LitElement {
         <div style="width: 100%">
           <p>Vertical layout without padding:</p>
           <vaadin-vertical-layout theme="spacing" style="align-items: stretch">
-            <vaadin-button>Button 1</vaadin-button>
-            <vaadin-button>Button 2</vaadin-button>
-            <vaadin-button>Button 3</vaadin-button>
+            <div class="example-item">Item 1</div>
+            <div class="example-item">Item 2</div>
+            <div class="example-item">Item 3</div>
           </vaadin-vertical-layout>
         </div>
         <div style="width: 100%">
@@ -36,9 +35,9 @@ export class Example extends LitElement {
           <!-- tag::snippet[] -->
           <vaadin-vertical-layout theme="padding spacing" style="align-items: stretch">
             <!-- end::snippet[] -->
-            <vaadin-button>Button 1</vaadin-button>
-            <vaadin-button>Button 2</vaadin-button>
-            <vaadin-button>Button 3</vaadin-button>
+            <div class="example-item">Item 1</div>
+            <div class="example-item">Item 2</div>
+            <div class="example-item">Item 3</div>
             <!-- tag::snippet[] -->
           </vaadin-vertical-layout>
           <!-- end::snippet[] -->
diff --git a/frontend/demo/component/basiclayouts/basic-layouts-spacing-variants.ts b/frontend/demo/component/basiclayouts/basic-layouts-spacing-variants.ts
index b75fdcacdd..9567c35aaa 100644
--- a/frontend/demo/component/basiclayouts/basic-layouts-spacing-variants.ts
+++ b/frontend/demo/component/basiclayouts/basic-layouts-spacing-variants.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/radio-group';
 import '@vaadin/vertical-layout';
 import { html, LitElement } from 'lit';
@@ -32,9 +31,9 @@ export class Example extends LitElement {
         class="height-4xl"
         style="align-items: stretch"
       >
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
       </vaadin-vertical-layout>
       <vaadin-radio-group
         label="Spacing variant"
diff --git a/frontend/demo/component/basiclayouts/basic-layouts-spacing.ts b/frontend/demo/component/basiclayouts/basic-layouts-spacing.ts
index 341648c2cc..e55265f46c 100644
--- a/frontend/demo/component/basiclayouts/basic-layouts-spacing.ts
+++ b/frontend/demo/component/basiclayouts/basic-layouts-spacing.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/horizontal-layout';
 import '@vaadin/vertical-layout';
 import { html, LitElement } from 'lit';
@@ -26,9 +25,9 @@ export class Example extends LitElement {
         <div style="width: 100%">
           <p>Vertical layout without spacing:</p>
           <vaadin-vertical-layout theme="padding" style="align-items: stretch">
-            <vaadin-button>Button 1</vaadin-button>
-            <vaadin-button>Button 2</vaadin-button>
-            <vaadin-button>Button 3</vaadin-button>
+            <div class="example-item">Item 1</div>
+            <div class="example-item">Item 2</div>
+            <div class="example-item">Item 3</div>
           </vaadin-vertical-layout>
         </div>
         <div style="width: 100%">
@@ -36,9 +35,9 @@ export class Example extends LitElement {
           <!-- tag::snippet[] -->
           <vaadin-vertical-layout theme="spacing padding" style="align-items: stretch">
             <!-- end::snippet[] -->
-            <vaadin-button>Button 1</vaadin-button>
-            <vaadin-button>Button 2</vaadin-button>
-            <vaadin-button>Button 3</vaadin-button>
+            <div class="example-item">Item 1</div>
+            <div class="example-item">Item 2</div>
+            <div class="example-item">Item 3</div>
             <!-- tag::snippet[] -->
           </vaadin-vertical-layout>
           <!-- end::snippet[] -->
diff --git a/frontend/demo/component/basiclayouts/basic-layouts-vertical-layout-horizontal-alignment.ts b/frontend/demo/component/basiclayouts/basic-layouts-vertical-layout-horizontal-alignment.ts
index 68f76e4eef..2920677be9 100644
--- a/frontend/demo/component/basiclayouts/basic-layouts-vertical-layout-horizontal-alignment.ts
+++ b/frontend/demo/component/basiclayouts/basic-layouts-vertical-layout-horizontal-alignment.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/vertical-layout';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
@@ -23,9 +22,9 @@ export class Example extends LitElement {
     return html`
       <!-- tag::snippet[] -->
       <vaadin-vertical-layout theme="spacing padding" style="align-items: center">
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
       </vaadin-vertical-layout>
       <!-- end::snippet[] -->
     `;
diff --git a/frontend/demo/component/basiclayouts/basic-layouts-vertical-layout-individual-alignment.ts b/frontend/demo/component/basiclayouts/basic-layouts-vertical-layout-individual-alignment.ts
index e050af10d4..e84b84d481 100644
--- a/frontend/demo/component/basiclayouts/basic-layouts-vertical-layout-individual-alignment.ts
+++ b/frontend/demo/component/basiclayouts/basic-layouts-vertical-layout-individual-alignment.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/vertical-layout';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
@@ -23,9 +22,9 @@ export class Example extends LitElement {
     return html`
       <!-- tag::snippet[] -->
       <vaadin-vertical-layout theme="spacing padding" style="align-items: start">
-        <vaadin-button style="align-self: end" theme="primary">Button 1</vaadin-button>
-        <vaadin-button style="align-self: center"> Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
+        <div class="example-item" style="align-self: end">Item 1</div>
+        <div class="example-item" style="align-self: center">Item 2</div>
+        <div class="example-item">Item 3</div>
       </vaadin-vertical-layout>
       <!-- end::snippet[] -->
     `;
diff --git a/frontend/demo/component/basiclayouts/basic-layouts-vertical-layout-vertical-alignment.ts b/frontend/demo/component/basiclayouts/basic-layouts-vertical-layout-vertical-alignment.ts
index 876c76afee..039d6b6b7d 100644
--- a/frontend/demo/component/basiclayouts/basic-layouts-vertical-layout-vertical-alignment.ts
+++ b/frontend/demo/component/basiclayouts/basic-layouts-vertical-layout-vertical-alignment.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/vertical-layout';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
@@ -21,15 +20,15 @@ export class Example extends LitElement {
 
   protected override render() {
     return html`
-    <!-- tag::snippet[] -->
+      <!-- tag::snippet[] -->
       <vaadin-vertical-layout
         theme="spacing padding"
-        class="height-4xl" // hidden-source-line
+        class="height-4xl"
         style="justify-content: center"
       >
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
       </vaadin-vertical-layout>
       <!-- end::snippet[] -->
     `;
diff --git a/frontend/demo/component/basiclayouts/basic-layouts-vertical-layout-wrapping.ts b/frontend/demo/component/basiclayouts/basic-layouts-vertical-layout-wrapping.ts
index 20c2ac4c4f..743e7a8e7d 100644
--- a/frontend/demo/component/basiclayouts/basic-layouts-vertical-layout-wrapping.ts
+++ b/frontend/demo/component/basiclayouts/basic-layouts-vertical-layout-wrapping.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/vertical-layout';
 import '@vaadin/horizontal-layout';
 import { html, LitElement } from 'lit';
@@ -29,10 +28,10 @@ export class Example extends LitElement {
             theme="spacing padding"
             style="align-items: stretch; height: 200px;"
           >
-            <vaadin-button>Button 1</vaadin-button>
-            <vaadin-button>Button 2</vaadin-button>
-            <vaadin-button>Button 3</vaadin-button>
-            <vaadin-button>Button 4</vaadin-button>
+            <div class="example-item">Item 1</div>
+            <div class="example-item">Item 2</div>
+            <div class="example-item">Item 3</div>
+            <div class="example-item">Item 4</div>
           </vaadin-vertical-layout>
         </div>
         <div style="width: 100%;">
@@ -43,10 +42,10 @@ export class Example extends LitElement {
             style="align-items: stretch; height: 200px;"
           >
             <!-- end::snippet[] -->
-            <vaadin-button>Button 1</vaadin-button>
-            <vaadin-button>Button 2</vaadin-button>
-            <vaadin-button>Button 3</vaadin-button>
-            <vaadin-button>Button 4</vaadin-button>
+            <div class="example-item">Item 1</div>
+            <div class="example-item">Item 2</div>
+            <div class="example-item">Item 3</div>
+            <div class="example-item">Item 4</div>
             <!-- tag::snippet[] -->
           </vaadin-vertical-layout>
           <!-- end::snippet[] -->
diff --git a/frontend/demo/component/basiclayouts/basic-layouts-vertical-layout.ts b/frontend/demo/component/basiclayouts/basic-layouts-vertical-layout.ts
index 73ccc75a23..07a1c3c2c8 100644
--- a/frontend/demo/component/basiclayouts/basic-layouts-vertical-layout.ts
+++ b/frontend/demo/component/basiclayouts/basic-layouts-vertical-layout.ts
@@ -1,5 +1,4 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/button';
 import '@vaadin/vertical-layout';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
@@ -23,9 +22,9 @@ export class Example extends LitElement {
     return html`
       <!-- tag::snippet[] -->
       <vaadin-vertical-layout theme="spacing padding">
-        <vaadin-button>Button 1</vaadin-button>
-        <vaadin-button>Button 2</vaadin-button>
-        <vaadin-button>Button 3</vaadin-button>
+        <div class="example-item">Item 1</div>
+        <div class="example-item">Item 2</div>
+        <div class="example-item">Item 3</div>
       </vaadin-vertical-layout>
       <!-- end::snippet[] -->
     `;
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-expanding-items.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-expanding-items.tsx
index d89fcadae8..66b131dcd8 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-expanding-items.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-expanding-items.tsx
@@ -1,6 +1,6 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react'; // hidden-source-line
-import { Button, HorizontalLayout } from '@vaadin/react-components';
+import { HorizontalLayout } from '@vaadin/react-components';
 import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
 
 function Example() {
@@ -8,9 +8,9 @@ function Example() {
     <>
       {/* tag::snippet[] */}
       <HorizontalLayout theme="padding spacing">
-        <Button style={{ flexGrow: 1 }}>Button 1</Button>
-        <Button>Button 2</Button>
-        <Button>Button 3</Button>
+        <div className="example-item" style={{ flexGrow: 1 }}>Item 1</div>
+        <div className="example-item">Item 2</div>
+        <div className="example-item">Item 3</div>
       </HorizontalLayout>
       {/* end::snippet[] */}
     </>
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-horizontal-alignment.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-horizontal-alignment.tsx
index c9c96e9327..0103cd3933 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-horizontal-alignment.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-horizontal-alignment.tsx
@@ -1,19 +1,15 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
-import { Button, HorizontalLayout } from '@vaadin/react-components';
+import { HorizontalLayout } from '@vaadin/react-components';
 import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
 
 function Example() {
   return (
     // tag::snippet[]
-    <HorizontalLayout
-      theme="spacing padding"
-      className="height-4xl"
-      style={{ justifyContent: 'center' }}
-    >
-      <Button>Button 1</Button>
-      <Button>Button 2</Button>
-      <Button>Button 3</Button>
+    <HorizontalLayout theme="spacing padding" style={{ justifyContent: 'center' }}>
+      <div className="example-item">Item 1</div>
+      <div className="example-item">Item 2</div>
+      <div className="example-item">Item 3</div>
     </HorizontalLayout>
     // end::snippet[]
   );
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-individual-alignment.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-individual-alignment.tsx
index 7f0ba2c28c..0987633ceb 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-individual-alignment.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-individual-alignment.tsx
@@ -1,6 +1,6 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
-import { HorizontalLayout, TextArea } from '@vaadin/react-components';
+import { HorizontalLayout } from '@vaadin/react-components';
 import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
 
 function Example() {
@@ -9,11 +9,11 @@ function Example() {
     <HorizontalLayout
       theme="spacing padding"
       className="height-4xl"
-      style={{ alignItems: 'stretch', ...layoutExampleStyle }}
+      style={{ alignItems: 'stretch' }}
     >
-      <TextArea label="Text area 1" style={{ alignSelf: 'start' }} />
-      <TextArea label="Text area 2" />
-      <TextArea label="Text area 3" style={{ alignSelf: 'end' }} />
+      <div className="example-item" style={{ alignSelf: 'start' }}>Item 1</div>
+      <div className="example-item">Item 2</div>
+      <div className="example-item" style={{ alignSelf: 'end' }}>Item 3</div>
     </HorizontalLayout>
     // end::snippet[]
   );
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-margin.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-margin.tsx
index 34396ff664..479d18ad7a 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-margin.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-margin.tsx
@@ -1,6 +1,6 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react'; // hidden-source-line
-import { Button, HorizontalLayout } from '@vaadin/react-components';
+import { HorizontalLayout } from '@vaadin/react-components';
 import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
 
 function Example() {
@@ -9,9 +9,9 @@ function Example() {
       <p>Horizontal layout without margin:</p>
       <div className="container">
         <HorizontalLayout theme="spacing padding">
-          <Button>Button 1</Button>
-          <Button>Button 2</Button>
-          <Button>Button 3</Button>
+          <div className="example-item">Item 1</div>
+          <div className="example-item">Item 2</div>
+          <div className="example-item">Item 3</div>
         </HorizontalLayout>
       </div>
 
@@ -20,9 +20,9 @@ function Example() {
         {/* tag::snippet[] */}
         <HorizontalLayout theme="margin spacing padding">
           {/* end::snippet[] */}
-          <Button>Button 1</Button>
-          <Button>Button 2</Button>
-          <Button>Button 3</Button>
+          <div className="example-item">Item 1</div>
+          <div className="example-item">Item 2</div>
+          <div className="example-item">Item 3</div>
           {/* tag::snippet[] */}
         </HorizontalLayout>
         {/* end::snippet[] */}
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-padding.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-padding.tsx
index ac0c125f5c..a7286288af 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-padding.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-padding.tsx
@@ -1,6 +1,6 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react'; // hidden-source-line
-import { Button, HorizontalLayout } from '@vaadin/react-components';
+import { HorizontalLayout } from '@vaadin/react-components';
 import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
 
 function Example() {
@@ -8,18 +8,18 @@ function Example() {
     <>
       <p>Horizontal layout without padding:</p>
       <HorizontalLayout theme="spacing">
-        <Button>Button 1</Button>
-        <Button>Button 2</Button>
-        <Button>Button 3</Button>
+        <div className="example-item">Item 1</div>
+        <div className="example-item">Item 2</div>
+        <div className="example-item">Item 3</div>
       </HorizontalLayout>
 
       <p>Horizontal layout with padding:</p>
       {/* tag::snippet[] */}
       <HorizontalLayout theme="padding spacing">
         {/* end::snippet[] */}
-        <Button>Button 1</Button>
-        <Button>Button 2</Button>
-        <Button>Button 3</Button>
+        <div className="example-item">Item 1</div>
+        <div className="example-item">Item 2</div>
+        <div className="example-item">Item 3</div>
         {/* tag::snippet[] */}
       </HorizontalLayout>
       {/* end::snippet[] */}
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-spacing.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-spacing.tsx
index e03bfe130e..e8d326ff3d 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-spacing.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-spacing.tsx
@@ -1,6 +1,6 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react'; // hidden-source-line
-import { Button, HorizontalLayout } from '@vaadin/react-components';
+import { HorizontalLayout } from '@vaadin/react-components';
 import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
 
 function Example() {
@@ -8,18 +8,18 @@ function Example() {
     <div>
       <p>Horizontal layout without spacing:</p>
       <HorizontalLayout theme="padding">
-        <Button>Button 1</Button>
-        <Button>Button 2</Button>
-        <Button>Button 3</Button>
+        <div className="example-item">Item 1</div>
+        <div className="example-item">Item 2</div>
+        <div className="example-item">Item 3</div>
       </HorizontalLayout>
 
       <p>Horizontal layout with spacing:</p>
       {/* tag::snippet[] */}
       <HorizontalLayout theme="spacing padding">
         {/* end::snippet[] */}
-        <Button>Button 1</Button>
-        <Button>Button 2</Button>
-        <Button>Button 3</Button>
+        <div className="example-item">Item 1</div>
+        <div className="example-item">Item 2</div>
+        <div className="example-item">Item 3</div>
         {/* tag::snippet[] */}
       </HorizontalLayout>
       {/* end::snippet[] */}
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-vertical-alignment.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-vertical-alignment.tsx
index 1ad7827a57..2c53b445c6 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-vertical-alignment.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-vertical-alignment.tsx
@@ -1,7 +1,6 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
-import { TextArea } from '@vaadin/react-components';
-import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout';
+import { HorizontalLayout } from '@vaadin/react-components';
 import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
 
 function Example() {
@@ -12,9 +11,9 @@ function Example() {
       className="height-4xl"
       style={{ alignItems: 'center' }}
     >
-      <TextArea label="Text area 1" />
-      <TextArea label="Text area 2" />
-      <TextArea label="Text area 3" />
+      <div className="example-item">Item 1</div>
+      <div className="example-item">Item 2</div>
+      <div className="example-item">Item 3</div>
     </HorizontalLayout>
     // end::snippet[]
   );
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-wrapping.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-wrapping.tsx
index d9822eda28..060702222b 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-wrapping.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-wrapping.tsx
@@ -1,5 +1,5 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import { Button, HorizontalLayout } from '@vaadin/react-components';
+import { HorizontalLayout } from '@vaadin/react-components';
 import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
 
 function Example() {
@@ -10,11 +10,11 @@ function Example() {
         theme="spacing margin padding"
         style={{ alignItems: 'stretch', width: '350px' }}
       >
-        <Button>Button 1</Button>
-        <Button>Button 2</Button>
-        <Button>Button 3</Button>
-        <Button>Button 4</Button>
-        <Button>Button 5</Button>
+        <div className="example-item">Item 1</div>
+        <div className="example-item">Item 2</div>
+        <div className="example-item">Item 3</div>
+        <div className="example-item">Item 4</div>
+        <div className="example-item">Item 5</div>
       </HorizontalLayout>
       <p>Horizontal layout with wrapping:</p>
       {/* tag::snippet[] */}
@@ -23,11 +23,11 @@ function Example() {
         style={{ alignItems: 'stretch', width: '350px' }}
       >
         {/* end::snippet[] */}
-        <Button>Button 1</Button>
-        <Button>Button 2</Button>
-        <Button>Button 3</Button>
-        <Button>Button 4</Button>
-        <Button>Button 5</Button>
+        <div className="example-item">Item 1</div>
+        <div className="example-item">Item 2</div>
+        <div className="example-item">Item 3</div>
+        <div className="example-item">Item 4</div>
+        <div className="example-item">Item 5</div>
         {/* tag::snippet[] */}
       </HorizontalLayout>
       {/* end::snippet[] */}
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout.tsx
index 5c5940a7f9..1fed7344cd 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout.tsx
@@ -1,15 +1,15 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
-import { Button, HorizontalLayout } from '@vaadin/react-components';
+import { HorizontalLayout } from '@vaadin/react-components';
 import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
 
 function Example() {
   return (
     // tag::snippet[]
     <HorizontalLayout theme="spacing padding">
-      <Button>Button 1</Button>
-      <Button>Button 2</Button>
-      <Button>Button 3</Button>
+      <div className="example-item">Item 1</div>
+      <div className="example-item">Item 2</div>
+      <div className="example-item">Item 3</div>
     </HorizontalLayout>
     // end::snippet[]
   );
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-margin.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-margin.tsx
index 6732ec6a06..bd87ca6269 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-margin.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-margin.tsx
@@ -1,6 +1,6 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react'; // hidden-source-line
-import { Button, HorizontalLayout, VerticalLayout } from '@vaadin/react-components';
+import { HorizontalLayout, VerticalLayout } from '@vaadin/react-components';
 import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
 
 function Example() {
@@ -10,9 +10,9 @@ function Example() {
         <p>Vertical layout without margin:</p>
         <div className="container">
           <VerticalLayout theme="spacing padding" style={{ alignItems: 'stretch' }}>
-            <Button>Button 1</Button>
-            <Button>Button 2</Button>
-            <Button>Button 3</Button>
+            <div className="example-item">Item 1</div>
+            <div className="example-item">Item 2</div>
+            <div className="example-item">Item 3</div>
           </VerticalLayout>
         </div>
       </div>
@@ -22,9 +22,9 @@ function Example() {
           {/* tag::snippet[] */}
           <VerticalLayout theme="margin spacing padding" style={{ alignItems: 'stretch' }}>
             {/* end::snippet[] */}
-            <Button>Button 1</Button>
-            <Button>Button 2</Button>
-            <Button>Button 3</Button>
+            <div className="example-item">Item 1</div>
+            <div className="example-item">Item 2</div>
+            <div className="example-item">Item 3</div>
             {/* tag::snippet[] */}
           </VerticalLayout>
           {/* end::snippet[] */}
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-padding.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-padding.tsx
index 93d6d74da4..93aa03df41 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-padding.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-padding.tsx
@@ -1,6 +1,6 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react'; // hidden-source-line
-import { Button, HorizontalLayout, VerticalLayout } from '@vaadin/react-components';
+import { HorizontalLayout, VerticalLayout } from '@vaadin/react-components';
 import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
 
 function Example() {
@@ -9,9 +9,9 @@ function Example() {
       <div style={{ width: '100%' }}>
         <p>Vertical layout without padding:</p>
         <VerticalLayout theme="spacing" style={{ alignItems: 'stretch' }}>
-          <Button>Button 1</Button>
-          <Button>Button 2</Button>
-          <Button>Button 3</Button>
+          <div className="example-item">Item 1</div>
+          <div className="example-item">Item 2</div>
+          <div className="example-item">Item 3</div>
         </VerticalLayout>
       </div>
       <div style={{ width: '100%' }}>
@@ -19,9 +19,9 @@ function Example() {
         {/* tag::snippet[] */}
         <VerticalLayout theme="padding spacing" style={{ alignItems: 'stretch' }}>
           {/* end::snippet[] */}
-          <Button>Button 1</Button>
-          <Button>Button 2</Button>
-          <Button>Button 3</Button>
+          <div className="example-item">Item 1</div>
+          <div className="example-item">Item 2</div>
+          <div className="example-item">Item 3</div>
           {/* tag::snippet[] */}
         </VerticalLayout>
         {/* end::snippet[] */}
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-spacing.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-spacing.tsx
index c31d03786c..20102134b3 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-spacing.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-spacing.tsx
@@ -1,6 +1,6 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react'; // hidden-source-line
-import { Button, HorizontalLayout, VerticalLayout } from '@vaadin/react-components';
+import { HorizontalLayout, VerticalLayout } from '@vaadin/react-components';
 import layoutExampleStyle from './layoutExampleStyle';
 
 function Example() {
@@ -9,9 +9,9 @@ function Example() {
       <div style={{ width: '100%' }}>
         <p>Vertical layout without spacing:</p>
         <VerticalLayout theme="padding" style={{ alignItems: 'stretch' }}>
-          <Button>Button 1</Button>
-          <Button>Button 2</Button>
-          <Button>Button 3</Button>
+          <div className="example-item">Item 1</div>
+          <div className="example-item">Item 2</div>
+          <div className="example-item">Item 3</div>
         </VerticalLayout>
       </div>
       <div style={{ width: '100%' }}>
@@ -19,9 +19,9 @@ function Example() {
         {/* tag::snippet[] */}
         <VerticalLayout theme="spacing padding" style={{ alignItems: 'stretch' }}>
           {/* end::snippet[] */}
-          <Button>Button 1</Button>
-          <Button>Button 2</Button>
-          <Button>Button 3</Button>
+          <div className="example-item">Item 1</div>
+          <div className="example-item">Item 2</div>
+          <div className="example-item">Item 3</div>
           {/* tag::snippet[] */}
         </VerticalLayout>
         {/* end::snippet[] */}
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-horizontal-alignment.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-horizontal-alignment.tsx
index 08a196cdf1..5eeed48dc6 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-horizontal-alignment.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-horizontal-alignment.tsx
@@ -1,15 +1,15 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
-import { Button, VerticalLayout } from '@vaadin/react-components';
+import { VerticalLayout } from '@vaadin/react-components';
 import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
 
 function Example() {
   return (
     // tag::snippet[]
     <VerticalLayout theme="spacing padding" style={{ alignItems: 'center' }}>
-      <Button>Button 1</Button>
-      <Button>Button 2</Button>
-      <Button>Button 3</Button>
+      <div className="example-item">Item 1</div>
+      <div className="example-item">Item 2</div>
+      <div className="example-item">Item 3</div>
     </VerticalLayout>
     // end::snippet[]
   );
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-individual-alignment.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-individual-alignment.tsx
index a4fc7461b8..23872caee9 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-individual-alignment.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-individual-alignment.tsx
@@ -1,17 +1,19 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
-import { Button, VerticalLayout } from '@vaadin/react-components';
+import { VerticalLayout } from '@vaadin/react-components';
 import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
 
 function Example() {
   return (
     // tag::snippet[]
     <VerticalLayout theme="spacing padding" style={{ alignItems: 'start' }}>
-      <Button style={{ alignSelf: 'end' }} theme="primary">
-        Button 1
-      </Button>
-      <Button style={{ alignSelf: 'center' }}>Button 2</Button>
-      <Button>Button 3</Button>
+      <div className="example-item" style={{ alignSelf: 'end' }}>
+        Item 1
+      </div>
+      <div className="example-item" style={{ alignSelf: 'center' }}>
+        Item 2
+      </div>
+      <div className="example-item">Item 3</div>
     </VerticalLayout>
     // end::snippet[]
   );
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-vertical-alignment.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-vertical-alignment.tsx
index cdb7c51c28..a6dff89b1e 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-vertical-alignment.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-vertical-alignment.tsx
@@ -1,6 +1,6 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
-import { Button, VerticalLayout } from '@vaadin/react-components';
+import { VerticalLayout } from '@vaadin/react-components';
 import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
 
 function Example() {
@@ -11,9 +11,9 @@ function Example() {
       className="height-4xl"
       style={{ justifyContent: 'center' }}
     >
-      <Button>Button 1</Button>
-      <Button>Button 2</Button>
-      <Button>Button 3</Button>
+      <div className="example-item">Item 1</div>
+      <div className="example-item">Item 2</div>
+      <div className="example-item">Item 3</div>
     </VerticalLayout>
     // end::snippet[]
   );
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-wrapping.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-wrapping.tsx
index 48ff36080a..78f002f02b 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-wrapping.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-wrapping.tsx
@@ -1,5 +1,5 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import { Button, HorizontalLayout, VerticalLayout } from '@vaadin/react-components';
+import { HorizontalLayout, VerticalLayout } from '@vaadin/react-components';
 import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
 
 function Example() {
@@ -8,10 +8,10 @@ function Example() {
       <div style={{ width: '100%' }}>
         <p>Vertical layout without wrapping:</p>
         <VerticalLayout theme="spacing padding" style={{ alignItems: 'stretch', height: '200px' }}>
-          <Button>Button 1</Button>
-          <Button>Button 2</Button>
-          <Button>Button 3</Button>
-          <Button>Button 4</Button>
+          <div className="example-item">Item 1</div>
+          <div className="example-item">Item 2</div>
+          <div className="example-item">Item 3</div>
+          <div className="example-item">Item 4</div>
         </VerticalLayout>
       </div>
       <div style={{ width: '100%' }}>
@@ -22,10 +22,10 @@ function Example() {
           style={{ alignItems: 'stretch', height: '200px' }}
         >
           {/* end::snippet[] */}
-          <Button>Button 1</Button>
-          <Button>Button 2</Button>
-          <Button>Button 3</Button>
-          <Button>Button 4</Button>
+          <div className="example-item">Item 1</div>
+          <div className="example-item">Item 2</div>
+          <div className="example-item">Item 3</div>
+          <div className="example-item">Item 4</div>
           {/* tag::snippet[] */}
         </VerticalLayout>
         {/* end::snippet[] */}
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout.tsx
index 0f206d5556..89400d2e15 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout.tsx
@@ -1,15 +1,15 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
-import { Button, VerticalLayout } from '@vaadin/react-components';
+import { VerticalLayout } from '@vaadin/react-components';
 import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
 
 function Example() {
   return (
     // tag::snippet[]
     <VerticalLayout theme="spacing padding">
-      <Button>Button 1</Button>
-      <Button>Button 2</Button>
-      <Button>Button 3</Button>
+      <div className="example-item">Item 1</div>
+      <div className="example-item">Item 2</div>
+      <div className="example-item">Item 3</div>
     </VerticalLayout>
     // end::snippet[]
   );
diff --git a/frontend/demo/component/basiclayouts/react/layoutExampleStyle.ts b/frontend/demo/component/basiclayouts/react/layoutExampleStyle.ts
index c378bb8af8..81f2c01c6a 100644
--- a/frontend/demo/component/basiclayouts/react/layoutExampleStyle.ts
+++ b/frontend/demo/component/basiclayouts/react/layoutExampleStyle.ts
@@ -21,6 +21,14 @@ const layoutExampleStyles = css`
     border: 1px solid var(--lumo-success-color);
     border-radius: var(--lumo-border-radius-l);
   }
+
+  .example-item {
+    background: var(--lumo-primary-color);
+    color: var(--lumo-primary-contrast-color);
+    border-radius: var(--lumo-border-radius-m);
+    padding: var(--lumo-space-s) var(--lumo-space-l);
+    white-space: nowrap;
+  }
 `;
 
 export default layoutExampleStyles;
diff --git a/frontend/themes/docs/basic-layouts.css b/frontend/themes/docs/basic-layouts.css
index 28bd2e4e67..4f27e2e076 100644
--- a/frontend/themes/docs/basic-layouts.css
+++ b/frontend/themes/docs/basic-layouts.css
@@ -24,4 +24,13 @@
 :host(.basic-layouts-example) .container {
     border: 1px solid var(--lumo-success-color);
     border-radius: var(--lumo-border-radius-l);
-}
\ No newline at end of file
+}
+
+.basic-layouts-example .example-item,
+:host(.basic-layouts-example) .example-item {
+    background: var(--lumo-primary-color);
+    color: var(--lumo-primary-contrast-color);
+    border-radius: var(--lumo-border-radius-m);
+    padding: var(--lumo-space-s) var(--lumo-space-l);
+    white-space: nowrap;
+}
diff --git a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsExpandingItems.java b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsExpandingItems.java
index 4fcfa0d302..7887ceab7a 100644
--- a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsExpandingItems.java
+++ b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsExpandingItems.java
@@ -2,7 +2,6 @@
 
 import com.vaadin.demo.DemoExporter; // hidden-source-line
 import com.vaadin.flow.component.html.Div;
-import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.router.Route;
 
@@ -11,16 +10,23 @@ public class BasicLayoutsExpandingItems extends Div {
 
     public BasicLayoutsExpandingItems() {
         // tag::snippet[]
-        Button button1 = new Button("Button 1");
+        Div item1 = new Div("Item 1");
+        item1.setClassName("example-item");
         HorizontalLayout layout = new HorizontalLayout();
-        layout.setFlexGrow(1, button1);
+        layout.setFlexGrow(1, item1);
         // end::snippet[]
         layout.setPadding(true);
-        layout.add(button1);
-        layout.add(new Button("Button 2"));
-        layout.add(new Button("Button 3"));
+        layout.add(item1);
+        
+        Div item2 = new Div("Item 2");
+        item2.setClassName("example-item");
+        layout.add(item2);
+        
+        Div item3 = new Div("Item 3");
+        item3.setClassName("example-item");
+        layout.add(item3);
+        
         this.add(layout);
-
         this.setClassName("basic-layouts-example");
     }
 
diff --git a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayout.java b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayout.java
index 69962a38d0..f3475d9385 100644
--- a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayout.java
+++ b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayout.java
@@ -2,7 +2,6 @@
 
 import com.vaadin.demo.DemoExporter; // hidden-source-line
 import com.vaadin.flow.component.html.Div;
-import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.router.Route;
 
@@ -12,13 +11,20 @@ public BasicLayoutsHorizontalLayout() {
         // tag::snippet[]
         HorizontalLayout layout = new HorizontalLayout();
         layout.setPadding(true);
-        layout.add(new Button("Button 1"));
-        layout.add(new Button("Button 2"));
-        layout.add(new Button("Button 3"));
+
+        Div item1 = new Div("Item 1");
+        item1.setClassName("example-item");
+
+        Div item2 = new Div("Item 2");
+        item2.setClassName("example-item");
+
+        Div item3 = new Div("Item 3");
+        item3.setClassName("example-item");
+
+        layout.add(item1, item2, item3);
         // end::snippet[]
 
         this.setClassName("basic-layouts-example");
-
         this.add(layout);
     }
 
diff --git a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutHorizontalAlignment.java b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutHorizontalAlignment.java
index e6b33477cc..9f3dd7e80d 100644
--- a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutHorizontalAlignment.java
+++ b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutHorizontalAlignment.java
@@ -2,7 +2,6 @@
 
 import com.vaadin.demo.DemoExporter; // hidden-source-line
 import com.vaadin.flow.component.html.Div;
-import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.orderedlayout.FlexComponent;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.router.Route;
@@ -15,9 +14,17 @@ public BasicLayoutsHorizontalLayoutHorizontalAlignment() {
         HorizontalLayout layout = new HorizontalLayout();
         layout.setPadding(true);
         layout.setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);
-        layout.add(new Button("Button 1"));
-        layout.add(new Button("Button 2"));
-        layout.add(new Button("Button 3"));
+
+        Div item1 = new Div("Item 1");
+        item1.setClassName("example-item");
+
+        Div item2 = new Div("Item 2");
+        item2.setClassName("example-item");
+
+        Div item3 = new Div("Item 3");
+        item3.setClassName("example-item");
+
+        layout.add(item1, item2, item3);
         // end::layout[]
 
         this.setClassName("basic-layouts-example");
diff --git a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutIndividualAlignment.java b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutIndividualAlignment.java
index ef4be81cc4..ce495461f5 100644
--- a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutIndividualAlignment.java
+++ b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutIndividualAlignment.java
@@ -4,7 +4,6 @@
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.orderedlayout.FlexComponent;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
-import com.vaadin.flow.component.textfield.TextArea;
 import com.vaadin.flow.router.Route;
 
 @Route("basic-layouts/horizontal-layout-individual-alignment")
@@ -12,16 +11,23 @@ public class BasicLayoutsHorizontalLayoutIndividualAlignment extends Div {
 
     public BasicLayoutsHorizontalLayoutIndividualAlignment() {
         // tag::layout[]
-        TextArea textArea1 = new TextArea("Text area 1");
         HorizontalLayout layout = new HorizontalLayout();
         layout.setPadding(true);
         layout.setAlignItems(FlexComponent.Alignment.STRETCH);
-        layout.add(textArea1);
-        layout.setAlignSelf(FlexComponent.Alignment.START, textArea1);
-        layout.add(new TextArea("Text area 2"));
-        TextArea textArea3 = new TextArea("Text area 3");
-        layout.add(textArea3);
-        layout.setAlignSelf(FlexComponent.Alignment.END, textArea3);
+
+        Div item1 = new Div("Item 1");
+        item1.setClassName("example-item");
+        layout.add(item1);
+        layout.setAlignSelf(FlexComponent.Alignment.START, item1);
+
+        Div item2 = new Div("Item 2");
+        item2.setClassName("example-item");
+        layout.add(item2);
+
+        Div item3 = new Div("Item 3");
+        item3.setClassName("example-item");
+        layout.add(item3);
+        layout.setAlignSelf(FlexComponent.Alignment.END, item3);
         // end::layout[]
 
         this.setClassName("basic-layouts-example");
diff --git a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutMargin.java b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutMargin.java
index 350b380db2..0beb406758 100644
--- a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutMargin.java
+++ b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutMargin.java
@@ -2,7 +2,6 @@
 
 import com.vaadin.demo.DemoExporter; // hidden-source-line
 import com.vaadin.flow.component.html.Div;
-import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.html.Paragraph;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.router.Route;
@@ -15,9 +14,15 @@ public BasicLayoutsHorizontalLayoutMargin() {
         HorizontalLayout layoutWithoutMargin = new HorizontalLayout();
         layoutWithoutMargin.setPadding(true);
         layoutWithoutMargin.setWidth("auto");
-        layoutWithoutMargin.add(new Button("Button 1"));
-        layoutWithoutMargin.add(new Button("Button 2"));
-        layoutWithoutMargin.add(new Button("Button 3"));
+
+        Div item1 = new Div("Item 1");
+        item1.setClassName("example-item");
+        Div item2 = new Div("Item 2");
+        item2.setClassName("example-item");
+        Div item3 = new Div("Item 3");
+        item3.setClassName("example-item");
+
+        layoutWithoutMargin.add(item1, item2, item3);
 
         Div container2 = new Div();
         container2.setClassName("container");
@@ -31,9 +36,15 @@ public BasicLayoutsHorizontalLayoutMargin() {
         // end::snippet[]
         layoutWithMargin.setPadding(true);
         layoutWithMargin.setWidth("auto");
-        layoutWithMargin.add(new Button("Button 1"));
-        layoutWithMargin.add(new Button("Button 2"));
-        layoutWithMargin.add(new Button("Button 3"));
+
+        Div marginItem1 = new Div("Item 1");
+        marginItem1.setClassName("example-item");
+        Div marginItem2 = new Div("Item 2");
+        marginItem2.setClassName("example-item");
+        Div marginItem3 = new Div("Item 3");
+        marginItem3.setClassName("example-item");
+
+        layoutWithMargin.add(marginItem1, marginItem2, marginItem3);
 
         Div container1 = new Div();
         container1.setClassName("container");
diff --git a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutPadding.java b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutPadding.java
index d3a86db9e3..2df8873bbb 100644
--- a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutPadding.java
+++ b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutPadding.java
@@ -2,7 +2,6 @@
 
 import com.vaadin.demo.DemoExporter; // hidden-source-line
 import com.vaadin.flow.component.html.Div;
-import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.html.Paragraph;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.router.Route;
@@ -13,9 +12,15 @@ public class BasicLayoutsHorizontalLayoutPadding extends Div {
     public BasicLayoutsHorizontalLayoutPadding() {
         add(new Paragraph("Horizontal layout without padding:"));
         HorizontalLayout layoutWithoutPadding = new HorizontalLayout();
-        layoutWithoutPadding.add(new Button("Button 1"));
-        layoutWithoutPadding.add(new Button("Button 2"));
-        layoutWithoutPadding.add(new Button("Button 3"));
+
+        Div item1 = new Div("Item 1");
+        item1.setClassName("example-item");
+        Div item2 = new Div("Item 2");
+        item2.setClassName("example-item");
+        Div item3 = new Div("Item 3");
+        item3.setClassName("example-item");
+
+        layoutWithoutPadding.add(item1, item2, item3);
         this.add(layoutWithoutPadding);
 
         add(new Paragraph("Horizontal layout with padding:"));
@@ -23,9 +28,15 @@ public BasicLayoutsHorizontalLayoutPadding() {
         HorizontalLayout layoutWithPadding = new HorizontalLayout();
         layoutWithPadding.setPadding(true);
         // end::snippet[]
-        layoutWithPadding.add(new Button("Button 1"));
-        layoutWithPadding.add(new Button("Button 2"));
-        layoutWithPadding.add(new Button("Button 3"));
+
+        Div paddingItem1 = new Div("Item 1");
+        paddingItem1.setClassName("example-item");
+        Div paddingItem2 = new Div("Item 2");
+        paddingItem2.setClassName("example-item");
+        Div paddingItem3 = new Div("Item 3");
+        paddingItem3.setClassName("example-item");
+
+        layoutWithPadding.add(paddingItem1, paddingItem2, paddingItem3);
         this.add(layoutWithPadding);
 
         this.setClassName("basic-layouts-example");
diff --git a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutSpacing.java b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutSpacing.java
index fd62df168a..5a927903b7 100644
--- a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutSpacing.java
+++ b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutSpacing.java
@@ -2,7 +2,6 @@
 
 import com.vaadin.demo.DemoExporter; // hidden-source-line
 import com.vaadin.flow.component.html.Div;
-import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.html.Paragraph;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.router.Route;
@@ -18,17 +17,29 @@ public BasicLayoutsHorizontalLayoutSpacing() {
         layoutWithoutSpacing.setSpacing(false);
         // end::snippet[]
         layoutWithoutSpacing.setPadding(true);
-        layoutWithoutSpacing.add(new Button("Button 1"));
-        layoutWithoutSpacing.add(new Button("Button 2"));
-        layoutWithoutSpacing.add(new Button("Button 3"));
+
+        Div item1 = new Div("Item 1");
+        item1.setClassName("example-item");
+        Div item2 = new Div("Item 2");
+        item2.setClassName("example-item");
+        Div item3 = new Div("Item 3");
+        item3.setClassName("example-item");
+
+        layoutWithoutSpacing.add(item1, item2, item3);
         add(layoutWithoutSpacing);
 
         add(new Paragraph("Horizontal layout with spacing:"));
         HorizontalLayout layoutWithSpacing = new HorizontalLayout();
         layoutWithSpacing.setPadding(true);
-        layoutWithSpacing.add(new Button("Button 1"));
-        layoutWithSpacing.add(new Button("Button 2"));
-        layoutWithSpacing.add(new Button("Button 3"));
+
+        Div spacingItem1 = new Div("Item 1");
+        spacingItem1.setClassName("example-item");
+        Div spacingItem2 = new Div("Item 2");
+        spacingItem2.setClassName("example-item");
+        Div spacingItem3 = new Div("Item 3");
+        spacingItem3.setClassName("example-item");
+
+        layoutWithSpacing.add(spacingItem1, spacingItem2, spacingItem3);
         add(layoutWithSpacing);
 
         this.setClassName("basic-layouts-example");
diff --git a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutVerticalAlignment.java b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutVerticalAlignment.java
index 9df42f682e..8356aab2e0 100644
--- a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutVerticalAlignment.java
+++ b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutVerticalAlignment.java
@@ -4,7 +4,6 @@
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.orderedlayout.FlexComponent;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
-import com.vaadin.flow.component.textfield.TextArea;
 import com.vaadin.flow.router.Route;
 
 @Route("basic-layouts/horizontal-layout-vertical-alignment")
@@ -15,9 +14,17 @@ public BasicLayoutsHorizontalLayoutVerticalAlignment() {
         HorizontalLayout layout = new HorizontalLayout();
         layout.setPadding(true);
         layout.setAlignItems(FlexComponent.Alignment.CENTER);
-        layout.add(new TextArea("Text area 1"));
-        layout.add(new TextArea("Text area 2"));
-        layout.add(new TextArea("Text area 3"));
+
+        Div item1 = new Div("Item 1");
+        item1.setClassName("example-item");
+
+        Div item2 = new Div("Item 2");
+        item2.setClassName("example-item");
+
+        Div item3 = new Div("Item 3");
+        item3.setClassName("example-item");
+
+        layout.add(item1, item2, item3);
         // end::layout[]
 
         this.setClassName("basic-layouts-example");
diff --git a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutWrapping.java b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutWrapping.java
index 8080c28c27..4de56b809e 100644
--- a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutWrapping.java
+++ b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutWrapping.java
@@ -3,7 +3,6 @@
 import com.vaadin.demo.DemoExporter; // hidden-source-line
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.Paragraph;
-import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.router.Route;
 
@@ -17,11 +16,19 @@ public BasicLayoutsHorizontalLayoutWrapping() {
         layoutWithoutWrap.setSpacing(true);
         layoutWithoutWrap.setMargin(true);
         layoutWithoutWrap.setWidth("350px");
-        layoutWithoutWrap.add(new Button("Button 1"));
-        layoutWithoutWrap.add(new Button("Button 2"));
-        layoutWithoutWrap.add(new Button("Button 3"));
-        layoutWithoutWrap.add(new Button("Button 4"));
-        layoutWithoutWrap.add(new Button("Button 5"));
+
+        Div item1 = new Div("Item 1");
+        item1.setClassName("example-item");
+        Div item2 = new Div("Item 2");
+        item2.setClassName("example-item");
+        Div item3 = new Div("Item 3");
+        item3.setClassName("example-item");
+        Div item4 = new Div("Item 4");
+        item4.setClassName("example-item");
+        Div item5 = new Div("Item 5");
+        item5.setClassName("example-item");
+
+        layoutWithoutWrap.add(item1, item2, item3, item4, item5);
         this.add(layoutWithoutWrap);
 
         add(new Paragraph("Horizontal layout with wrapping:"));
@@ -33,11 +40,19 @@ public BasicLayoutsHorizontalLayoutWrapping() {
         layoutWithWrap.setPadding(true);
         layoutWithWrap.setSpacing(true);
         layoutWithWrap.setWidth("350px");
-        layoutWithWrap.add(new Button("Button 1"));
-        layoutWithWrap.add(new Button("Button 2"));
-        layoutWithWrap.add(new Button("Button 3"));
-        layoutWithWrap.add(new Button("Button 4"));
-        layoutWithWrap.add(new Button("Button 5"));
+
+        Div wrapItem1 = new Div("Item 1");
+        wrapItem1.setClassName("example-item");
+        Div wrapItem2 = new Div("Item 2");
+        wrapItem2.setClassName("example-item");
+        Div wrapItem3 = new Div("Item 3");
+        wrapItem3.setClassName("example-item");
+        Div wrapItem4 = new Div("Item 4");
+        wrapItem4.setClassName("example-item");
+        Div wrapItem5 = new Div("Item 5");
+        wrapItem5.setClassName("example-item");
+
+        layoutWithWrap.add(wrapItem1, wrapItem2, wrapItem3, wrapItem4, wrapItem5);
 
         this.setClassName("basic-layouts-example");
         this.add(layoutWithWrap);
diff --git a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsMargin.java b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsMargin.java
index ca6e35e4f2..086113f22a 100644
--- a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsMargin.java
+++ b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsMargin.java
@@ -2,7 +2,6 @@
 
 import com.vaadin.demo.DemoExporter; // hidden-source-line
 import com.vaadin.flow.component.html.Div;
-import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.html.Paragraph;
 import com.vaadin.flow.component.orderedlayout.FlexComponent;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
@@ -29,9 +28,16 @@ public BasicLayoutsMargin() {
         VerticalLayout layoutWithoutMargin = new VerticalLayout();
         layoutWithoutMargin.setWidth("auto");
         layoutWithoutMargin.setAlignItems(FlexComponent.Alignment.STRETCH);
-        layoutWithoutMargin.add(new Button("Button 1"));
-        layoutWithoutMargin.add(new Button("Button 2"));
-        layoutWithoutMargin.add(new Button("Button 3"));
+
+        Div item1 = new Div("Item 1");
+        item1.setClassName("example-item");
+        Div item2 = new Div("Item 2");
+        item2.setClassName("example-item");
+        Div item3 = new Div("Item 3");
+        item3.setClassName("example-item");
+
+        layoutWithoutMargin.add(item1, item2, item3);
+
         container.add(layoutWithoutMargin);
 
         wrapper = new Div();
@@ -49,9 +55,16 @@ public BasicLayoutsMargin() {
         // end::snippet[]
         layoutWithMargin.setWidth("auto");
         layoutWithMargin.setAlignItems(FlexComponent.Alignment.STRETCH);
-        layoutWithMargin.add(new Button("Button 1"));
-        layoutWithMargin.add(new Button("Button 2"));
-        layoutWithMargin.add(new Button("Button 3"));
+
+        Div marginItem1 = new Div("Item 1");
+        marginItem1.setClassName("example-item");
+        Div marginItem2 = new Div("Item 2");
+        marginItem2.setClassName("example-item");
+        Div marginItem3 = new Div("Item 3");
+        marginItem3.setClassName("example-item");
+
+        layoutWithMargin.add(marginItem1, marginItem2, marginItem3);
+
         container.add(layoutWithMargin);
 
         setClassName("basic-layouts-example");
diff --git a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsPadding.java b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsPadding.java
index f1a415cb80..b00ce97924 100644
--- a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsPadding.java
+++ b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsPadding.java
@@ -2,7 +2,6 @@
 
 import com.vaadin.demo.DemoExporter; // hidden-source-line
 import com.vaadin.flow.component.html.Div;
-import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.html.Paragraph;
 import com.vaadin.flow.component.orderedlayout.FlexComponent;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
@@ -28,9 +27,15 @@ public BasicLayoutsPadding() {
         layoutWithoutPadding.setPadding(false);
         // end::snippet[]
         layoutWithoutPadding.setAlignItems(FlexComponent.Alignment.STRETCH);
-        layoutWithoutPadding.add(new Button("Button 1"));
-        layoutWithoutPadding.add(new Button("Button 2"));
-        layoutWithoutPadding.add(new Button("Button 3"));
+
+        Div item1 = new Div("Item 1");
+        item1.setClassName("example-item");
+        Div item2 = new Div("Item 2");
+        item2.setClassName("example-item");
+        Div item3 = new Div("Item 3");
+        item3.setClassName("example-item");
+
+        layoutWithoutPadding.add(item1, item2, item3);
         wrapper.add(layoutWithoutPadding);
 
         wrapper = new Div();
@@ -40,9 +45,15 @@ public BasicLayoutsPadding() {
 
         VerticalLayout layoutWithPadding = new VerticalLayout();
         layoutWithPadding.setAlignItems(FlexComponent.Alignment.STRETCH);
-        layoutWithPadding.add(new Button("Button 1"));
-        layoutWithPadding.add(new Button("Button 2"));
-        layoutWithPadding.add(new Button("Button 3"));
+
+        Div paddingItem1 = new Div("Item 1");
+        paddingItem1.setClassName("example-item");
+        Div paddingItem2 = new Div("Item 2");
+        paddingItem2.setClassName("example-item");
+        Div paddingItem3 = new Div("Item 3");
+        paddingItem3.setClassName("example-item");
+
+        layoutWithPadding.add(paddingItem1, paddingItem2, paddingItem3);
         wrapper.add(layoutWithPadding);
 
         setClassName("basic-layouts-example");
diff --git a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsSpacing.java b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsSpacing.java
index 5368488a2b..9cc91ba6ce 100644
--- a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsSpacing.java
+++ b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsSpacing.java
@@ -2,7 +2,6 @@
 
 import com.vaadin.demo.DemoExporter; // hidden-source-line
 import com.vaadin.flow.component.html.Div;
-import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.html.Paragraph;
 import com.vaadin.flow.component.orderedlayout.FlexComponent;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
@@ -28,9 +27,15 @@ public BasicLayoutsSpacing() {
         layoutWithoutSpacing.setSpacing(false);
         // end::snippet[]
         layoutWithoutSpacing.setAlignItems(FlexComponent.Alignment.STRETCH);
-        layoutWithoutSpacing.add(new Button("Button 1"));
-        layoutWithoutSpacing.add(new Button("Button 2"));
-        layoutWithoutSpacing.add(new Button("Button 3"));
+
+        Div item1 = new Div("Item 1");
+        item1.setClassName("example-item");
+        Div item2 = new Div("Item 2");
+        item2.setClassName("example-item");
+        Div item3 = new Div("Item 3");
+        item3.setClassName("example-item");
+
+        layoutWithoutSpacing.add(item1, item2, item3);
         wrapper.add(layoutWithoutSpacing);
 
         wrapper = new Div();
@@ -40,9 +45,15 @@ public BasicLayoutsSpacing() {
 
         VerticalLayout layoutWithSpacing = new VerticalLayout();
         layoutWithSpacing.setAlignItems(FlexComponent.Alignment.STRETCH);
-        layoutWithSpacing.add(new Button("Button 1"));
-        layoutWithSpacing.add(new Button("Button 2"));
-        layoutWithSpacing.add(new Button("Button 3"));
+
+        Div spacingItem1 = new Div("Item 1");
+        spacingItem1.setClassName("example-item");
+        Div spacingItem2 = new Div("Item 2");
+        spacingItem2.setClassName("example-item");
+        Div spacingItem3 = new Div("Item 3");
+        spacingItem3.setClassName("example-item");
+
+        layoutWithSpacing.add(spacingItem1, spacingItem2, spacingItem3);
         wrapper.add(layoutWithSpacing);
 
         setClassName("basic-layouts-example");
diff --git a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayout.java b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayout.java
index 7d44bd9c55..b555d44b30 100644
--- a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayout.java
+++ b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayout.java
@@ -2,7 +2,6 @@
 
 import com.vaadin.demo.DemoExporter; // hidden-source-line
 import com.vaadin.flow.component.html.Div;
-import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.router.Route;
 
@@ -11,9 +10,17 @@ public class BasicLayoutsVerticalLayout extends Div {
     public BasicLayoutsVerticalLayout() {
         // tag::snippet[]
         VerticalLayout layout = new VerticalLayout();
-        layout.add(new Button("Button 1"));
-        layout.add(new Button("Button 2"));
-        layout.add(new Button("Button 3"));
+
+        Div item1 = new Div("Item 1");
+        item1.setClassName("example-item");
+
+        Div item2 = new Div("Item 2");
+        item2.setClassName("example-item");
+
+        Div item3 = new Div("Item 3");
+        item3.setClassName("example-item");
+
+        layout.add(item1, item2, item3);
         // end::snippet[]
 
         this.setClassName("basic-layouts-example");
diff --git a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayoutHorizontalAlignment.java b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayoutHorizontalAlignment.java
index 791f5263b6..fe844c0529 100644
--- a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayoutHorizontalAlignment.java
+++ b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayoutHorizontalAlignment.java
@@ -2,7 +2,6 @@
 
 import com.vaadin.demo.DemoExporter; // hidden-source-line
 import com.vaadin.flow.component.html.Div;
-import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.orderedlayout.FlexComponent;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.router.Route;
@@ -14,9 +13,17 @@ public BasicLayoutsVerticalLayoutHorizontalAlignment() {
         // tag::layout[]
         VerticalLayout layout = new VerticalLayout();
         layout.setAlignItems(FlexComponent.Alignment.CENTER);
-        layout.add(new Button("Button 1"));
-        layout.add(new Button("Button 2"));
-        layout.add(new Button("Button 3"));
+
+        Div item1 = new Div("Item 1");
+        item1.setClassName("example-item");
+
+        Div item2 = new Div("Item 2");
+        item2.setClassName("example-item");
+
+        Div item3 = new Div("Item 3");
+        item3.setClassName("example-item");
+
+        layout.add(item1, item2, item3);
         // end::layout[]
 
         this.setClassName("basic-layouts-example");
diff --git a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayoutIndividualAlignment.java b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayoutIndividualAlignment.java
index 3402d4f5d7..bf4a795776 100644
--- a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayoutIndividualAlignment.java
+++ b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayoutIndividualAlignment.java
@@ -2,8 +2,6 @@
 
 import com.vaadin.demo.DemoExporter; // hidden-source-line
 import com.vaadin.flow.component.html.Div;
-import com.vaadin.flow.component.button.Button;
-import com.vaadin.flow.component.button.ButtonVariant;
 import com.vaadin.flow.component.orderedlayout.FlexComponent;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment;
@@ -14,16 +12,22 @@ public class BasicLayoutsVerticalLayoutIndividualAlignment extends Div {
 
     public BasicLayoutsVerticalLayoutIndividualAlignment() {
         // tag::layout[]
-        Button button1 = new Button("Button 1");
-        Button button2 = new Button("Button 2");
-        button1.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
         VerticalLayout layout = new VerticalLayout();
-        layout.add(button1);
-        layout.setAlignSelf(Alignment.END, button1);
-        layout.add(button2);
-        layout.setAlignSelf(Alignment.CENTER, button2);
         layout.setAlignItems(FlexComponent.Alignment.START);
-        layout.add(new Button("Button 3"));
+
+        Div item1 = new Div("Item 1");
+        item1.setClassName("example-item");
+        layout.add(item1);
+        layout.setAlignSelf(Alignment.END, item1);
+
+        Div item2 = new Div("Item 2");
+        item2.setClassName("example-item");
+        layout.add(item2);
+        layout.setAlignSelf(Alignment.CENTER, item2);
+
+        Div item3 = new Div("Item 3");
+        item3.setClassName("example-item");
+        layout.add(item3);
         // end::layout[]
 
         this.setClassName("basic-layouts-example");
diff --git a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayoutVerticalAlignment.java b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayoutVerticalAlignment.java
index f6d683b28c..e18540637e 100644
--- a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayoutVerticalAlignment.java
+++ b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayoutVerticalAlignment.java
@@ -2,7 +2,6 @@
 
 import com.vaadin.demo.DemoExporter; // hidden-source-line
 import com.vaadin.flow.component.html.Div;
-import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.orderedlayout.FlexComponent;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.router.Route;
@@ -14,9 +13,17 @@ public BasicLayoutsVerticalLayoutVerticalAlignment() {
         // tag::layout[]
         VerticalLayout layout = new VerticalLayout();
         layout.setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);
-        layout.add(new Button("Button 1"));
-        layout.add(new Button("Button 2"));
-        layout.add(new Button("Button 3"));
+
+        Div item1 = new Div("Item 1");
+        item1.setClassName("example-item");
+
+        Div item2 = new Div("Item 2");
+        item2.setClassName("example-item");
+
+        Div item3 = new Div("Item 3");
+        item3.setClassName("example-item");
+
+        layout.add(item1, item2, item3);
         // end::layout[]
 
         this.setClassName("basic-layouts-example");
diff --git a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayoutWrapping.java b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayoutWrapping.java
index 6776db7d5d..aa17ae5cbd 100644
--- a/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayoutWrapping.java
+++ b/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayoutWrapping.java
@@ -3,7 +3,6 @@
 import com.vaadin.demo.DemoExporter; // hidden-source-line
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.Paragraph;
-import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.orderedlayout.FlexComponent;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
@@ -27,10 +26,17 @@ public BasicLayoutsVerticalLayoutWrapping() {
         layoutWithoutWrap.setSpacing(true);
         layoutWithoutWrap.setAlignItems(FlexComponent.Alignment.STRETCH);
         layoutWithoutWrap.setHeight("200px");
-        layoutWithoutWrap.add(new Button("Button 1"));
-        layoutWithoutWrap.add(new Button("Button 2"));
-        layoutWithoutWrap.add(new Button("Button 3"));
-        layoutWithoutWrap.add(new Button("Button 4"));
+        
+        Div item1 = new Div("Item 1");
+        item1.setClassName("example-item");
+        Div item2 = new Div("Item 2");
+        item2.setClassName("example-item");
+        Div item3 = new Div("Item 3");
+        item3.setClassName("example-item");
+        Div item4 = new Div("Item 4");
+        item4.setClassName("example-item");
+        
+        layoutWithoutWrap.add(item1, item2, item3, item4);
         wrapper.add(layoutWithoutWrap);
         parent.add(wrapper);
 
@@ -46,11 +52,17 @@ public BasicLayoutsVerticalLayoutWrapping() {
         layoutWithWrap.setSpacing(true);
         layoutWithWrap.setAlignItems(FlexComponent.Alignment.STRETCH);
         layoutWithWrap.setHeight("200px");
-        layoutWithWrap.add(new Button("Button 1"));
-        layoutWithWrap.add(new Button("Button 2"));
-        layoutWithWrap.add(new Button("Button 3"));
-        layoutWithWrap.add(new Button("Button 4"));
-
+        
+        Div wrapItem1 = new Div("Item 1");
+        wrapItem1.setClassName("example-item");
+        Div wrapItem2 = new Div("Item 2");
+        wrapItem2.setClassName("example-item");
+        Div wrapItem3 = new Div("Item 3");
+        wrapItem3.setClassName("example-item");
+        Div wrapItem4 = new Div("Item 4");
+        wrapItem4.setClassName("example-item");
+        
+        layoutWithWrap.add(wrapItem1, wrapItem2, wrapItem3, wrapItem4);
         wrapper.add(layoutWithWrap);
         parent.add(wrapper);
         this.setClassName("basic-layouts-example");