From 2acda48277f866205aa13a26b9f91c743dc8b91e Mon Sep 17 00:00:00 2001 From: LeoLavanyaDhanaraj Date: Mon, 22 Jun 2026 16:25:46 +0530 Subject: [PATCH 1/3] 1033785: Documentation Correction in Blazor Button Component --- blazor/button/accessibility.md | 2 +- blazor/button/getting-started-with-web-app.md | 2 -- blazor/button/how-to/repeat-button.md | 2 +- blazor/button/types-and-styles.md | 9 ++------- 4 files changed, 4 insertions(+), 11 deletions(-) diff --git a/blazor/button/accessibility.md b/blazor/button/accessibility.md index 64b09018e6..5e12ac2820 100644 --- 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 index 63e97dc986..e73f5db39a 100644 --- 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 index 58448a4dad..68e96209db 100644 --- 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 index 823b1a12b0..e27be4cec8 100644 --- 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 Flat Outline - + - ``` {% 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'; } From 38d95f2dc36cdacaf68627b4d016c4839a9090a0 Mon Sep 17 00:00:00 2001 From: LeoLavanyaDhanaraj Date: Tue, 23 Jun 2026 17:09:48 +0530 Subject: [PATCH 2/3] 1033785: Documentation Correction in Blazor ButtonGroup Component --- blazor/button-group/accessibility.md | 2 +- blazor/button-group/native-event.md | 26 +++--- blazor/button-group/selection-and-nesting.md | 6 +- blazor/button-group/style-and-appearance.md | 19 ----- blazor/button-group/types-and-styles.md | 83 +++++++++++++++++++- 5 files changed, 98 insertions(+), 38 deletions(-) delete mode 100644 blazor/button-group/style-and-appearance.md diff --git a/blazor/button-group/accessibility.md b/blazor/button-group/accessibility.md index fab6ebf8ec..540cbab43a 100644 --- 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 index 705527660f..0ddf58d8f4 100644 --- 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 index c652059a4f..144b15a28d 100644 --- 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 deleted file mode 100644 index 5ebd1ec1cc..0000000000 --- a/blazor/button-group/style-and-appearance.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -layout: post -title: Styles and Appearances in Blazor ButtonGroup Component | Syncfusion® -description: Checkout and learn here all features about Styles and Appearances in Blazor ButtonGroup component and more. -platform: Blazor -control: ButtonGroup -documentation: ug ---- - -# Styles and Appearances in Blazor ButtonGroup Component - -To modify the ButtonGroup appearance, you need to override the default CSS of ButtonGroup component. Find the list of CSS classes and its corresponding section in ButtonGroup. Also, you have an option to 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.| \ No newline at end of file diff --git a/blazor/button-group/types-and-styles.md b/blazor/button-group/types-and-styles.md index 3eeceb9056..ff437e72d2 100644 --- a/blazor/button-group/types-and-styles.md +++ b/blazor/button-group/types-and-styles.md @@ -44,6 +44,84 @@ 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 + + + Left + Center + Right + + + + +``` + ## ButtonGroup types The types of Blazor ButtonGroup are as follows: @@ -51,7 +129,6 @@ 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 ``` -{% 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 From 72bd34b2aa8b076725d2ef2ee192c3f102823f39 Mon Sep 17 00:00:00 2001 From: LeoLavanyaD Date: Tue, 23 Jun 2026 18:06:17 +0530 Subject: [PATCH 3/3] 1033785: Removed the link. --- blazor-toc.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/blazor-toc.html b/blazor-toc.html index a960b24026..5215760395 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -1196,9 +1196,6 @@
  • Selection and Nesting
    • -
  • - Style and Appearance -
  • Accessibility