syncfusion-content · LeoLavanyaD · Jun 22, 2026 · Jun 23, 2026 · Jun 23, 2026 · Jun 23, 2026
diff --git a/blazor-toc.html b/blazor-toc.html
@@ -1196,9 +1196,6 @@
 			<li>
 				<a href="/blazor/button-group/selection-and-nesting">Selection and Nesting</a>
 			</li>
-			<li>
-				<a href="/blazor/button-group/style-and-appearance">Style and Appearance</a>
-			</li>
 			<li>
 				<a href="/blazor/button-group/accessibility">Accessibility</a>
 			</li>

diff --git a/blazor/button-group/accessibility.md b/blazor/button-group/accessibility.md
@@ -50,7 +50,7 @@ The Blazor Button Group component followed the [keyboard interaction](https://ww
 
 ## Ensuring accessibility
 
-The Blazor Button Group component's accessibility levels are ensured through an an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
+The Blazor Button Group component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
 
 The accessibility compliance of the Blazor Button Group component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/button-group) in a new window to evaluate the accessibility of the Blazor Button Group component with accessibility tools.
 

diff --git a/blazor/button-group/native-event.md b/blazor/button-group/native-event.md
@@ -1,13 +1,13 @@
 ---
 layout: post
-title: Native Events in Blazor Button Group Component | Syncfusion®
-description: Checkout and learn here all features about Native Events in Blazor Button Group component and much more.
+title: Native Events in Blazor ButtonGroup Component | Syncfusion®
+description: Checkout and learn here all features about Native Events in Blazor ButtonGroup component and much more.
 platform: Blazor
-control: Button Group
+control: ButtonGroup
 documentation: ug
 ---
 
-# Native Events in Blazor Button Group Component
+# Native Events in Blazor ButtonGroup Component
 
 You can define the native event using `event` attribute in component. The value of attribute is treated as an event handler. The event specific data will be available in event arguments.
 
@@ -18,20 +18,20 @@ The different event argument types for each event are,
 * Keyboard Events - UIKeyboardEventArgs
 * Touch Events – UITouchEventArgs
 
-## List of native events supported for default Button Group
+## List of native events supported for default ButtonGroup
 
-The following native event support has been provided to the Button Group component:
+The following native event support has been provided to the ButtonGroup component:
 
 | List of Native events |  |  | |
 | --- | --- | --- | --- |
 | onclick | onblur | onfocus | onfocusout |
-|onmousemove|onmouseover|onmouseout|onmousedown|onmouseup|
+|onmousemove|onmouseover|onmouseout|onmousedown|
 |ondblclick|onkeydown|onkeyup|onkeypress|
 |ontouchend|onfocusin|onmouseup|ontouchstart|
 
-## How to bind click event to Button Group
+## How to bind click event to ButtonGroup
 
-The `onclick` attribute is used to bind the click event for button group. Here, we have explained about the sample code snippets.
+The `onclick` attribute is used to bind the click event for ButtonGroup. Here, we have explained about the sample code snippets.
 
 ```csharp
 
@@ -59,18 +59,18 @@ The `onclick` attribute is used to bind the click event for button group. Here,
 }
 ```
 
-## List of native events supported for Single / Multiple selection mode Button Group
+## List of native events supported for Single / Multiple selection mode ButtonGroup
 
-The following native event support has been provided to the Button Group component:
+The following native event support has been provided to the ButtonGroup component:
 
 | List of Native events |  |  | | |
 | --- | --- | --- | --- | --- |
 | onchange | oninput | onblur | onfocusout | onfocusin |
 |onfocus|onclick|onkeydown|onkeyup|onkeypress|
 
-## How to bind onchange event to Button Group
+## How to bind onchange event to ButtonGroup
 
-The `onchange` attribute is used to bind the change event for button group. Here, we have explained about the sample code snippets.
+The `onchange` attribute is used to bind the change event for ButtonGroup. Here, we have explained about the sample code snippets.
 
 ```csharp
 

diff --git a/blazor/button-group/selection-and-nesting.md b/blazor/button-group/selection-and-nesting.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Selection and Nesting in Blazor ButtonGroup Component
 
-Blazor ButtonGroup component provided two-way binding support in both single and multiple selection modes through the `Selected` property of `ButtonGroupButton`. The `@bind-Selected` directive enables two-way data binding, allowing the state of each button (selected or not) to synchronize between the UI and the backing properties.
+Blazor ButtonGroup component provides two-way binding support in both single and multiple selection modes through the `Selected` property of `ButtonGroupButton`. The `@bind-Selected` directive enables two-way data binding, allowing the state of each button (selected or not) to synchronize between the UI and the backing properties.
 
 ## Single selection
 
@@ -93,7 +93,7 @@ Nesting with other components can be possible in ButtonGroup. The following comp
 
 ### DropDownButton
 
-In the following example, the DropDownButton component can be added in ButtonGroup tag.
+In the following example, the DropDownButton component can be added to the ButtonGroup tag.
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
@@ -116,7 +116,7 @@ In the following example, the DropDownButton component can be added in ButtonGro
 
 ### SplitButton
 
-In the following example, SplitButton component can be added in ButtonGroup tag.
+In the following example, SplitButton component can be added to the ButtonGroup tag.
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons

diff --git a/blazor/button-group/style-and-appearance.md b/blazor/button-group/style-and-appearance.md
diff --git a/blazor/button-group/types-and-styles.md b/blazor/button-group/types-and-styles.md
@@ -44,14 +44,91 @@ The Blazor ButtonGroup has the following predefined styles that can be defined u
 
 N> Predefined ButtonGroup styles provide only the visual indication. So, ButtonGroup content should define the ButtonGroup style for the users of assistive technologies such as screen readers.
 
+### CSS Customization Classes
+
+To modify the ButtonGroup appearance, you need to override the default CSS of the ButtonGroup component. Find the list of CSS classes and their corresponding section in ButtonGroup. You can also create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material).
+
+| CSS Class | Purpose of Class |
+| --------- | ---------------- |
+| `.e-btn` | To customize the ButtonGroup. |
+| `.e-btn:hover` | To customize the ButtonGroup on hover. |
+| `.e-btn:focus` | To customize the ButtonGroup on focus. |
+| `.e-btn:active` | To customize the ButtonGroup on active. |
+
+The following example demonstrates how to apply a custom styles using CSS classes for various properties like color, background color, font, border, padding, margin, and more:
+
+```cshtml
+
+@using Syncfusion.Blazor.SplitButtons
+
+<SfButtonGroup>
+    <ButtonGroupButton>Left</ButtonGroupButton>
+    <ButtonGroupButton>Center</ButtonGroupButton>
+    <ButtonGroupButton>Right</ButtonGroupButton>
+</SfButtonGroup>
+
+<style>
+    .e-btn {
+        /* Color properties */
+        color: #ffffff;
+        background-color: #007bff;
+        border-color: #0056b3;
+
+        /* Border properties */
+        border-width: 2px;
+        border-style: solid;
+        border-radius: 6px;
+        outline: none;
+
+        /* Effects */
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+        cursor: pointer;
+        transition: all 0.3s ease;
+        opacity: 1;
+        overflow: hidden;
+        z-index: 1;
+    }
+
+    /* Hover state styling */
+    .e-btn:hover {
+        color: #e0e0e0;
+        background-color: #0056b3;
+        border-color: #004494;
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+        transform: translateY(-2px);
+        opacity: 0.95;
+    }
+
+    /* Focus state styling */
+    .e-btn:focus {
+        color: #ffffff;
+        background-color: #004494;
+        border-color: #003366;
+        box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.4);
+        outline: 2px solid #007bff;
+        outline-offset: 2px;
+    }
+
+    /* Active state styling */
+    .e-btn:active {
+        color: #ffffff;
+        background-color: #003366;
+        border-color: #002244;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+        transform: translateY(0);
+    }
+
+</style>
+
+```
+
 ## ButtonGroup types
 
 The types of Blazor ButtonGroup are as follows:
 
 * Flat ButtonGroup
 * Outline ButtonGroup
 * Round ButtonGroup
-* Toggle ButtonGroup
 
 ### Flat ButtonGroup
 
@@ -65,6 +142,8 @@ An outline ButtonGroup has a border with transparent background. To create an ou
 
 A round ButtonGroup is shaped like a circle. Usually, it contains an icon representing its action. To create a round ButtonGroup, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfButtonGroup.html#Syncfusion_Blazor_SplitButtons_SfButtonGroup_CssClass) property to `e-round-corner`.
 
+The following example demonstrates the types of Blazor ButtonGroup:
+
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
 
@@ -114,7 +193,7 @@ To create ButtonGroup with icons, [IconCss](https://help.syncfusion.com/cr/blazo
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVRNxiFhfBAtUDm?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor ButtonGroup with Icon](./images/blazor-buttongroup-icon.webp)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVRNxiFhfBAtUDm?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "Blazor ButtonGroup with Icon" %}
 
 ## ButtonGroup size
 

diff --git a/blazor/button/accessibility.md b/blazor/button/accessibility.md
@@ -7,7 +7,7 @@ control: Button
 documentation: ug
 ---
 
-# Accessibility in Blazor Button component
+# Accessibility in Blazor Button Component
 
 The Blazor Button component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 

diff --git a/blazor/button/getting-started-with-web-app.md b/blazor/button/getting-started-with-web-app.md
@@ -178,8 +178,6 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/rtVnZdChVAKGSXRX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Button Component](./images/blazor-button-component.webp)" %}
 
-N> You can also explore our [Blazor Button example](https://blazor.syncfusion.com/demos/buttons/default-functionalities?) that shows how to render and configure the button.
-
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Button).
 
 ## See also

diff --git a/blazor/button/how-to/repeat-button.md b/blazor/button/how-to/repeat-button.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Repeat Button in Blazor Button Component
 
-The Repeat button is a type of Button in that the click event is triggered at regular time interval from the pressed state till the released state.
+The Repeat button is a type of Button in which the click event is triggered at regular time interval from the pressed state till the released state.
 
 The following example explains about how to achieve Repeat Button in mouse and touch events.
 

diff --git a/blazor/button/types-and-styles.md b/blazor/button/types-and-styles.md
@@ -68,13 +68,8 @@ A Round Button is circular in shape. Usually, it contains an icon representing i
 
 <SfButton CssClass="e-flat">Flat</SfButton>
 <SfButton CssClass="e-outline">Outline</SfButton>
-<SfButton CssClass="e-round" IconCss="e-icons e-plus-icon" IsPrimary="true"></SfButton>
+<SfButton CssClass="e-round" IconCss="e-icons e-plus" IsPrimary="true"></SfButton>
 
-<style>
-    .e-plus-icon::before {
-        content: '\e823';
-    }
-</style>
 ```
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hDVxXRiVhUSIxYKT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Button with different Types](./images/blazor-button-types.webp)" %}
@@ -127,7 +122,7 @@ A toggle Button allows you to change between the two states. The Button is activ
     }
 
     .e-pause::before {
-        content: '\e326';
+        content: '\e77b';
     }
 
 </style>
-Original file line number
+Diff line change
@@ Expand Up / @@ -1196,9 +1196,6 @@ @@
     			<li>
     				<a href="/blazor/button-group/selection-and-nesting">Selection and Nesting</a>
     			</li>
-    			<li>
-    				<a href="/blazor/button-group/style-and-appearance">Style and Appearance</a>
-    			</li>
     			<li>
     				<a href="/blazor/button-group/accessibility">Accessibility</a>
     			</li>
@@ Expand Down @@