IgniteUI · adrianptrv · Jun 4, 2026
diff --git a/samples/inputs/button/contained/App.razor b/samples/inputs/button/contained/App.razor
@@ -3,6 +3,12 @@
 
 
 <div class="container vertical">
+    <style>
+        igc-button {
+            width: 40%;
+            margin: auto;
+        }
+    </style>
     <IgbButton Variant="ButtonVariant.Contained">Contained</IgbButton>
 </div>
 

diff --git a/samples/inputs/button/download/App.razor b/samples/inputs/button/download/App.razor
@@ -3,6 +3,12 @@
 
 
 <div class="container vertical">
+    <style>
+        igc-button {
+            width: 40%;
+            margin: auto;
+        }
+    </style>
     <IgbButton Variant="ButtonVariant.Contained" Download="Url" Href="https://www.infragistics.com/" Target="ButtonBaseTarget._blank">
         Download
     </IgbButton>

diff --git a/samples/inputs/button/fab/App.razor b/samples/inputs/button/fab/App.razor
@@ -3,6 +3,12 @@
 
 
 <div class="container vertical">
+    <style>
+        igc-button {
+            width: 40%;
+            margin: auto;
+        }
+    </style>
     <IgbButton Variant="ButtonVariant.Fab">
         <span slot="prefix">+</span>
         Add

diff --git a/samples/inputs/button/flat/App.razor b/samples/inputs/button/flat/App.razor
@@ -3,6 +3,17 @@
 
 
 <div class="container vertical">
+    <style>
+        .container {
+            background: var(--ig-surface-600);
+        }
+
+        igc-button {
+            width: 40%;
+            margin: auto;
+            background: var(--ig-surface-50);
+        }
+    </style>
     <IgbButton Variant="ButtonVariant.Flat">Flat</IgbButton>
 </div>
 

diff --git a/samples/inputs/button/outlined/App.razor b/samples/inputs/button/outlined/App.razor
@@ -3,7 +3,13 @@
 
 
 <div class="container vertical">
-    <IgbButton style="margin:5px" Variant="ButtonVariant.Outlined">Outlined</IgbButton>
+    <style>
+        igc-button {
+            width: 40%;
+            margin: auto;
+        }
+    </style>
+    <IgbButton Variant="ButtonVariant.Outlined">Outlined</IgbButton>
 </div>
 
 @code {

diff --git a/samples/inputs/button/overview/App.razor b/samples/inputs/button/overview/App.razor
@@ -6,7 +6,8 @@
         .buttonContainer {
             display: flex;
             justify-content: space-evenly;
-            margin-top: 20px;
+            align-items: center;
+            height: 100%;
         }
     </style>
 

diff --git a/samples/inputs/button/size/App.razor b/samples/inputs/button/size/App.razor
@@ -2,16 +2,20 @@
 
 
 <style>
+    .container {
+        justify-content: center;
+    }
+
     .buttonContainer {
         display: flex;
         justify-content: space-evenly;
+        align-items: center;
         margin-top: 20px;
     }
 
     #radioGroup {
         display: flex;
-        margin: 0 auto;
-        width: 15%;
+        justify-content: center;
     }
 </style>
 

diff --git a/samples/inputs/button/styling/App.razor b/samples/inputs/button/styling/App.razor
@@ -9,10 +9,13 @@
             color: #011627;
             padding: 18px;
         }
+
+        igc-button {
+            width: 40%;
+            margin: auto;
+        }
     </style>
-    <div>
-        <IgbButton Variant="ButtonVariant.Contained">Contained</IgbButton>
-    </div>
+    <IgbButton Variant="ButtonVariant.Contained">Contained</IgbButton>
 
 </div>
 

diff --git a/samples/inputs/chip/multiple/App.razor b/samples/inputs/chip/multiple/App.razor
@@ -3,31 +3,23 @@
 
 <div class="container sample center size-medium" style="flex-direction: row; gap: 8px">
     <IgbChip Selectable="true" Removable="true" RemoveScript="handleChipRemove">
-        <span slot="select">
-            <IgbIcon @ref="@SelectIconRef" IconName="custom-select" Collection="material" ></IgbIcon>
-        </span>
+        <IgbIcon slot="select" @ref="@SelectIconRef" IconName="custom-select" Collection="material" ></IgbIcon>
         Custom Icons
     </IgbChip>
 
     <IgbChip Selectable="false" Removable="false">
-         <span slot="start">
-            <IgbIcon @ref="@BrushIconRef" IconName="brush" Collection="material" ></IgbIcon>
-        </span>
+        <IgbIcon slot="start" @ref="@BrushIconRef" IconName="brush" Collection="material" ></IgbIcon>
         Start Slot
     </IgbChip>
 
     <IgbChip Selectable="false" Removable="false">
          End Slot
-        <span slot="end">
-            <IgbIcon @ref="@BrickWallIconRef" IconName="brick-wall" Collection="material"></IgbIcon>
-        </span>
+        <IgbIcon slot="end" @ref="@BrickWallIconRef" IconName="brick-wall" Collection="material"></IgbIcon>
     </IgbChip>
 
     <IgbChip Disabled="true">
          Disabled Slot
-        <span slot="end">
-            <IgbIcon @ref="@DogIconRef" IconName="dog-icon" Collection="material" ></IgbIcon>
-        </span>
+        <IgbIcon slot="end" @ref="@DogIconRef" IconName="dog-icon" Collection="material" ></IgbIcon>
     </IgbChip>
 </div>
 

diff --git a/samples/inputs/circular-progress-indicator/dynamic/App.razor b/samples/inputs/circular-progress-indicator/dynamic/App.razor
@@ -6,12 +6,10 @@
         width: 300px;
         display: flex;
         align-items: center;
-        margin-top: 30px;
     }
 
     #circularProgress {
         margin-right: 50px;
-        margin-left: 20px;
         --diameter: 100px;
         --stroke-thickness: 5px;
     }

diff --git a/samples/inputs/circular-progress-indicator/simple/App.razor b/samples/inputs/circular-progress-indicator/simple/App.razor
@@ -5,7 +5,6 @@
 
     <style>
         #circularProgress {
-            margin: 20px;
             --diameter: 50px;
         }
     </style>

diff --git a/samples/inputs/circular-progress-indicator/styling/App.razor b/samples/inputs/circular-progress-indicator/styling/App.razor
@@ -5,7 +5,6 @@
 
     <style>
         igc-circular-progress {
-            margin: 20px;
             --diameter: 50px;
         }
 

diff --git a/samples/inputs/input/size/App.razor b/samples/inputs/input/size/App.razor
@@ -7,7 +7,6 @@
         #radioGroup {
             display: flex;
             margin: 0 auto;
-            width: 15%;
         }
     </style>
 

diff --git a/samples/inputs/rating/custom/App.razor b/samples/inputs/rating/custom/App.razor
@@ -34,7 +34,7 @@
         {
             await this.RegisterIconRef.EnsureReady();
             string fullHeart = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475.82 442.01' version='1.0'><path d='M129.35 9.35c-66.24 0-120 53.76-120 120 0 134.75 135.93 170.08 228.56 303.3 87.57-132.4 228.56-172.85 228.56-303.3 0-66.24-53.76-120-120-120-48.05 0-89.4 28.37-108.56 69.18-19.16-40.81-60.52-69.18-108.56-69.18z' stroke='#000' stroke-width='18.7' fill='#e60000'/></svg>";
-            string emptyHeart = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 241.597 220.057' version='1.0'><path style='opacity:.98000004;fill:none;stroke:#000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0' d='M243.452 1708.979c-26.934.23-51.58 21.476-55.081 48.293-3.114 23.844 7.33 47.4 23.968 64.215 27.515 27.805 61.227 49.794 83.447 82.547 4.39-4.689 9.278-12.066 14.227-17.529 25.23-27.85 58.166-48.013 80.865-78.155 17.175-22.806 19.103-58.113-.538-80.405-18.25-20.712-51.76-25.17-74.37-9.254-8.226 5.791-15.274 13.37-19.932 22.312-10.053-19.32-30.534-32.214-52.586-32.024z' transform='translate(-175.323 -1696.476)'/></svg>";
+            string emptyHeart = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475.82 442.01' version='1.0'><path d='M129.35 9.35c-66.24 0-120 53.76-120 120 0 134.75 135.93 170.08 228.56 303.3 87.57-132.4 228.56-172.85 228.56-303.3 0-66.24-53.76-120-120-120-48.05 0-89.4 28.37-108.56 69.18-19.16-40.81-60.52-69.18-108.56-69.18z' stroke='#000' stroke-width='18.7' fill='#fff'/></svg>";
             await this.RegisterIconRef.RegisterIconFromTextAsync("heart-full", fullHeart, "material");
             await this.RegisterIconRef.RegisterIconFromTextAsync("heart-empty", emptyHeart, "material");
         }

diff --git a/samples/inputs/rating/single-selection/App.razor b/samples/inputs/rating/single-selection/App.razor
@@ -3,24 +3,24 @@
 <div class="container sample center">
     <IgbRating class="size-large" Label="Rate Experience" Single>
         <IgbRatingSymbol>
-          <div>😣</div>
-          <div slot="empty">😣</div>
+          <span>😣</span>
+          <span slot="empty">😣</span>
         </IgbRatingSymbol>
         <IgbRatingSymbol>
-          <div>😔</div>
-          <div slot="empty">😔</div>
+          <span>😔</span>
+          <span slot="empty">😔</span>
         </IgbRatingSymbol>
         <IgbRatingSymbol>
-          <div>😐</div>
-          <div slot="empty">😐</div>
+          <span>😐</span>
+          <span slot="empty">😐</span>
         </IgbRatingSymbol>
         <IgbRatingSymbol>
-          <div>🙂</div>
-          <div slot="empty">🙂</div>
+          <span>🙂</span>
+          <span slot="empty">🙂</span>
         </IgbRatingSymbol>
         <IgbRatingSymbol>
-          <div>😆</div>
-          <div slot="empty">😆</div>
+          <span>😆</span>
+          <span slot="empty">😆</span>
         </IgbRatingSymbol>
     </IgbRating>
 </div>

diff --git a/samples/inputs/select/styling/App.razor b/samples/inputs/select/styling/App.razor
@@ -11,19 +11,16 @@
             <IgbSelectItem>
               <IgbIcon @ref="IconRef" slot="prefix" name="place" collection="material"></IgbIcon>
               Germany
-              <span slot="suffix">DE</span>
             </IgbSelectItem>
 
             <IgbSelectItem>
               <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
               France
-              <span slot="suffix">FR</span>
             </IgbSelectItem>
 
             <IgbSelectItem selected>
               <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
               Spain
-              <span slot="suffix">ES</span>
             </IgbSelectItem>
         </IgbSelectGroup>
 
@@ -33,19 +30,16 @@
             <IgbSelectItem>
               <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
               USA
-              <span slot="suffix">US</span>
             </IgbSelectItem>
 
             <IgbSelectItem>
               <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
               Canada
-              <span slot="suffix">CA</span>
             </IgbSelectItem>
 
             <IgbSelectItem>
               <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
               Mexico
-              <span slot="suffix">MX</span>
             </IgbSelectItem>
         </IgbSelectGroup>
 

diff --git a/samples/inputs/textarea/resize/App.razor b/samples/inputs/textarea/resize/App.razor
@@ -1,10 +1,6 @@
 @using IgniteUI.Blazor.Controls
 
 <style>
-    p {
-        margin: 0;
-    }
-
     .container {
         display: flex;
         flex-direction: column;
@@ -14,13 +10,13 @@
 
 <div class="container center">
     <IgbTextarea Label="Resize: none" Resize="TextareaResize.None">
-        <p slot="helper-text">This textarea does not resize and uses a scroll bar to show overflow text.</p>
+        <span slot="helper-text">This textarea does not resize and uses a scroll bar to show overflow text.</span>
     </IgbTextarea>
     <IgbTextarea Label="Resize: vertical (default)" Resize="TextareaResize.Vertical">
-        <p slot="helper-text">This textarea lets the user resize vertically.</p>
+        <span slot="helper-text">This textarea lets the user resize vertically.</span>
     </IgbTextarea>
     <IgbTextarea Label="Resize: auto" Resize="TextareaResize.Auto">
-        <p slot="helper-text">This textarea shows all the user input at once. Overflow text wraps onto a new line and expands the text area.</p>
+        <span slot="helper-text">This textarea shows all the user input at once. Overflow text wraps onto a new line and expands the text area.</span>
     </IgbTextarea>
 </div>
 

diff --git a/samples/inputs/textarea/slots/App.razor b/samples/inputs/textarea/slots/App.razor
@@ -4,7 +4,7 @@
 <div class="container center">
     <IgbTextarea Label="Your feedback">
        <IgbIcon @ref="RegisterIconRef" IconName="feedback" Collection="material" slot="prefix"></IgbIcon>
-        <p slot="helper-text">Give us a short description of what you liked/disliked</p>
+        <span slot="helper-text">Give us a short description of what you liked/disliked</span>
     </IgbTextarea>
 </div>
 

diff --git a/samples/inputs/textarea/styling/App.razor b/samples/inputs/textarea/styling/App.razor
@@ -22,7 +22,7 @@
 <div class="container center">
     <IgbTextarea Label="Steps to reproduce">
        <IgbIcon @ref="RegisterIconRef" IconName="feedback" Collection="material" slot="prefix"></IgbIcon>
-        <p slot="helper-text">Provide a detailed description of the steps that led to the issue you experienced</p>
+        <span slot="helper-text">Provide a detailed description of the steps that led to the issue you experienced</span>
     </IgbTextarea>
 </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,6 @@ @@
         <style>
             igc-circular-progress {
-                margin: 20px;
                 --diameter: 50px;
             }
@@ Expand Down @@