diff --git a/_config.yml b/_config.yml
index a8364fa070..54e794d511 100644
--- a/_config.yml
+++ b/_config.yml
@@ -280,6 +280,7 @@ intro_columns:
items:
"Button": "components/button/overview"
"Toggle Button": "togglebutton-overview"
+ "Button Group" : "buttongroup-overview"
"Menu": "components/menu/overview"
"Tab Strip": "components/tabstrip/overview"
"TreeView": "components/treeview/overview"
diff --git a/components/buttongroup/events.md b/components/buttongroup/events.md
new file mode 100644
index 0000000000..964aeebd65
--- /dev/null
+++ b/components/buttongroup/events.md
@@ -0,0 +1,111 @@
+---
+title: Events
+page_title: ButtonGroup for Blazor | Events
+description: Events of the ButtonGroup for Blazor
+slug: buttongroup-events
+tags: telerik,blazor,Toggle,button,group
+published: True
+position: 20
+---
+
+# ButtonGroup Events
+
+This article explains the events available in the Telerik buttons in a ButtonGroup for Blazor:
+
+* [SelectedChanged](#selectedchanged)
+* [OnClick](#onclick)
+
+
+## SelectedChanged
+
+The `SelectedChanged` fires when the user changes the state of the button by clicking it (or by using `Space` or `Enter`). You can use it to call local view-model logic. To fetch data or perform async operations, use the [OnClick](#onclick) event.
+
+This event is available only for `ButtonGroupToggleButton` instances, as they are the only selecteble buttons.
+
+>caption Handle the SelectedChanged event
+
+````CSHTML
+@* If you do not update the view-model in the handler, you can effectively cancel the event *@
+
+
+ First
+ Second
+
+
+@code{
+ bool FirstSelected { get; set; }
+ bool SecondSelected { get; set; } = true; // you can pre-select buttons
+
+ void FirstSelectedChangedHandler(bool currState)
+ {
+ FirstSelected = currState;
+ // you have to update the model manually because handling the SelectedChanged event does not let you use @bind-Selected
+ // if you don't update the View-Model, you will effectively cancel the event
+
+ Console.WriteLine($"The first button is selected: {FirstSelected}");
+ }
+
+ void SecondSelectedChangedHandler(bool currState)
+ {
+ SecondSelected = currState;
+ // you have to update the model manually because handling the SelectedChanged event does not let you use @bind-Selected
+ // if you don't update the View-Model, you will effectively cancel the event
+
+ Console.WriteLine($"The Second button is now selected: {FirstSelected}");
+ }
+}
+````
+
+
+## OnClick
+
+The `OnClick` event fires when the user clicks or taps the button. You can use it to invoke async logic such as fetching data or calling a service.
+
+>caption Handle the Button OnClick event in a ButtonGroup
+
+````CSHTML
+@* This example shows how to handle each click individually, and also a way to use the same async handler from several instances, and pass arguments to it *@
+
+@result
+
+
+
+
+ First
+ Second
+ Toggle Button
+ Toggle Button Two
+
+
+@code{
+ string result { get; set; }
+
+ async Task FirstClickHandler()
+ {
+ await Task.Delay(500);//simulate network delay from real data retrieval. Remove from a real app
+
+ result = "First button: " + DateTime.Now.Millisecond;
+ }
+
+ async Task ToggleButtonClickHandler()
+ {
+ await Task.Delay(500);//simulate network delay from real data retrieval. Remove from a real app
+
+ result = "Standalone Toggle Button: " + DateTime.Now.Millisecond;
+ }
+
+ async Task SharedClickHandler(string sender)
+ {
+ await Task.Delay(500);//simulate network delay from real data retrieval. Remove from a real app
+
+ result = sender + DateTime.Now.Millisecond;
+ }
+}
+````
+
+@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)
+
+
+## See Also
+
+ * [ButtonGroup Overview]({%slug buttongroup-overview%})
diff --git a/components/buttongroup/icons.md b/components/buttongroup/icons.md
new file mode 100644
index 0000000000..9d836d6211
--- /dev/null
+++ b/components/buttongroup/icons.md
@@ -0,0 +1,82 @@
+---
+title: Icons
+page_title: ButtonGroup for Blazor | Icon
+description: Icons and images in the ButtonGroup for Blazor
+slug: buttongroup-icons
+tags: telerik,blazor,Toggle,button,group,icon,sprite,image
+published: True
+position: 5
+---
+
+
+# ButtonGroup Icons
+
+You can put an image, sprite or a font icon in the buttons within a ButtonGroup to illustrate its purpose for your end users. To apply them, use the following properties:
+
+* for a [Telerik font icon]({%slug general-information/font-icons%}), use the `Icon` attribute to set the font icon class.
+
+* for a raster image, use the `ImageUrl` attribute to provide the URL to the icon (relative or absolute).
+
+* for a custom font icon class, set the `IconClass` parameter of the component to the desired CSS class list which provides the required rules (like font name and glyph symbol). Make sure to also reference the desired font in your app and to use its own recommendations.
+
+* for a sprite, set the `SpriteClass` attribute to `k-icon MySpriteClass` where `MySpriteClass` defines the CSS rules for the sprite.
+
+
+The following example shows how to use an image from a URL, a sprite image, and the built-in font icons.
+
+>caption How to use icons in the Telerik ButtonGroup Button
+
+````CSHTML
+@* This sample shows how you can use conditional logic to show different icons in the different states.
+It also shows how to use telerik icons, raster icons and sprite images*@
+
+
+ Sprite
+
+ Font Icon
+
+ Image URL
+
+
+
+
+@code{
+ bool FlagSelected { get; set; }
+ bool FontSelected { get; set; }
+ bool RasterSelected { get; set; }
+ string RasterIconUrl => RasterSelected ? "https://docs.telerik.com/blazor-ui/images/snowboarding.png" : "https://docs.telerik.com/blazor-ui/images/swimming.png";
+}
+````
+
+>caption The result from the code snippet above
+
+
+
+>tip You can use relative paths to your images in the `wwwroot` folder. The example above uses absolute paths to make it easy for you to see the results without preparing images.
+
+>tip If you don't add text to the button, the button will center the icon on all sides.
+
+>note Images used as icons should generally be small enough to fit in a line of text - the button is an inline element and is not designed for large images. If you want to use big icon buttons, consider one of the following options:
+>
+> * defining a `Class` on the button that provides `height` and `width`. The width and height can be set in `px` sufficient to accommodate the icon or to `auto`,
+> * or attaching an `@onclick` handler to an icon/`span`/`img` element instead of using a button,
+> * or adding your own HTML inside the button, something like: `
some text`
+
+
+## See Also
+
+ * [ButtonGroup Overview]({%slug buttongroup-overview%})
diff --git a/components/buttongroup/images/button-group-disabled-state.png b/components/buttongroup/images/button-group-disabled-state.png
new file mode 100644
index 0000000000..de6b2343f3
Binary files /dev/null and b/components/buttongroup/images/button-group-disabled-state.png differ
diff --git a/components/buttongroup/images/buttongroup-hide-buttons.png b/components/buttongroup/images/buttongroup-hide-buttons.png
new file mode 100644
index 0000000000..5850d64b78
Binary files /dev/null and b/components/buttongroup/images/buttongroup-hide-buttons.png differ
diff --git a/components/buttongroup/images/buttongroup-icons.png b/components/buttongroup/images/buttongroup-icons.png
new file mode 100644
index 0000000000..53df52e458
Binary files /dev/null and b/components/buttongroup/images/buttongroup-icons.png differ
diff --git a/components/buttongroup/images/buttongroup-multiple-selection.gif b/components/buttongroup/images/buttongroup-multiple-selection.gif
new file mode 100644
index 0000000000..e4d0b3a325
Binary files /dev/null and b/components/buttongroup/images/buttongroup-multiple-selection.gif differ
diff --git a/components/buttongroup/images/buttongroup-overview.png b/components/buttongroup/images/buttongroup-overview.png
new file mode 100644
index 0000000000..43c017cb3d
Binary files /dev/null and b/components/buttongroup/images/buttongroup-overview.png differ
diff --git a/components/buttongroup/images/buttongroup-single-selection.gif b/components/buttongroup/images/buttongroup-single-selection.gif
new file mode 100644
index 0000000000..d064f6c09c
Binary files /dev/null and b/components/buttongroup/images/buttongroup-single-selection.gif differ
diff --git a/components/buttongroup/images/buttongroup-styling.png b/components/buttongroup/images/buttongroup-styling.png
new file mode 100644
index 0000000000..0a36b6dd28
Binary files /dev/null and b/components/buttongroup/images/buttongroup-styling.png differ
diff --git a/components/buttongroup/overview.md b/components/buttongroup/overview.md
new file mode 100644
index 0000000000..4d5135d0e1
--- /dev/null
+++ b/components/buttongroup/overview.md
@@ -0,0 +1,146 @@
+---
+title: Overview
+page_title: ButtonGroup for Blazor Overview
+description: Overview of the ButtonGroup for Blazor
+slug: buttongroup-overview
+tags: telerik,blazor,Toggle,button,group
+published: True
+position: 0
+---
+
+# ButtonGroup Overview
+
+This article provides information about the ButtonGroup component and its core features.
+
+The ButtonGroup component is a container for buttons that can be toggle buttons, and lets you [select one or more]({%slug buttongroup-selection%}), and respond to the [selection and click events]({%slug buttongroup-events%}). The buttons inside fill up the container, match the styling according to the [chosen theme]({%slug general-information/themes%}) and provide the regular button features like images and icons and the other parameters and attributes.
+
+In this article:
+
+* [Basic and Toggle Buttons](#basic-and-toggle-buttons)
+* [Disabled State](#disabled-state)
+* [Hide Buttons](#hide-buttons)
+* [Styling](#styling)
+
+## Basic and Toggle Buttons
+
+To add a Telerik ButtonGroup to your Blazor app:
+
+1. Add the `TelerikButtonGroup` tag.
+1. Inside it, add `ButtonGroupToggleButton` or `ButtonGroupButton` tags that denote each button.
+ * The `ButtonGroupToggleButton` becomes primary when clicked and de-selects when another one is clicked. Read more in the [Selection]({%slug buttongroup-selection%}) article.
+ * The `ButtonGroupButton` does not change its visual state when clicked.
+1. Use the `OnClick` event of these buttons to handle the user actions.
+
+>caption TelerikButtonGroup with regular buttons and toggle buttons, and their respective OnClick handlers
+
+````CSHTML
+@* Each individual button lets you control its selected state, have a click handler and template, icons, text *@
+
+
+ First button
+ Second button
+
+
+@code{
+ async Task FirstClick()
+ {
+ Console.WriteLine("the first button was clicked.");
+ }
+
+ async Task SecondClick()
+ {
+ Console.WriteLine("the second button was clicked. It becomes selected when clicked.");
+ }
+}
+````
+
+>caption The result from the code snippet above, after clicking the second button
+
+
+
+
+## Disabled State
+
+To disable a button, set its `Enabled` attribute to `false`.
+
+>caption Disabled buttons in a button group
+
+````CSHTML
+
+ Enabled
+ Disabled
+ Enabled
+ Disabled
+
+````
+
+>caption Comparison between disabled and enabled button
+
+
+
+
+## Hide Buttons
+
+You can set the `Visible` parameter of individual buttons to `false` to hide them based on certain logic. This lets you maintain the same markup and toggle features on and off with simple flags without affecting indexes and event handlers.
+
+>caption Hide buttons from a ButtonGroup
+
+````CSHTML
+
+ First
+ Hidden
+ Third
+
+````
+
+>caption Only two visible buttons are rendered
+
+
+
+
+## Styling
+
+You can style the individual buttons through their `Class` attribute to define your own CSS rules that apply to the HTML rendering. You may want to make them conditional based on their `Selected` state.
+
+>caption Set CSS class to the button and change its appearance
+
+````CSHTML
+
+ Default
+ Styled - Selected: @IsSelected
+
+
+@code {
+ bool IsSelected { get; set; }
+}
+
+
+````
+
+>caption The result from the code snippet above
+
+
+
+
+
+
+## See Also
+
+ * [Live Demo: ButtonGroup](https://demos.telerik.com/blazor-ui/buttongroup/overview)
+ * [Events]({%slug buttongroup-events%})
+ * [Selection]({%slug buttongroup-selection%})
+ * [Icons]({%slug buttongroup-icons%})
+ * [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikButtonGroup)
+
diff --git a/components/buttongroup/selection.md b/components/buttongroup/selection.md
new file mode 100644
index 0000000000..951caa371e
--- /dev/null
+++ b/components/buttongroup/selection.md
@@ -0,0 +1,105 @@
+---
+title: Selection
+page_title: ButtonGroup for Blazor | Selection
+description: Selected Items in the ButtonGroup for Blazor
+slug: buttongroup-selection
+tags: telerik,blazor,button,group,selection
+published: True
+position: 2
+---
+
+
+# ButtonGroup Selection
+
+The ButtonGroup lets you select one or more of its `ButtonGroupToggleButton` instances depending on the `SelectionMode` setting:
+
+* [Single](#single-selection) - the buttons act like radio buttons
+* [Multiple](#multiple-selection) - the buttons act like checkboxes
+
+You can control whether a button is selected (it is in its `Primary` state) through its `Selected` parameter. It offers two-way binding and an [SelectedChanged event]({%slug buttongroup-events%}) so you can respond to the user actions.
+
+## Single Selection
+
+When you click a button, it becomes selected. When you click another button, the first one will become de-selected and the second one will be selected.
+
+>caption Single Selection in the ButtonGroup
+
+
+
+````CSHTML
+@* You can use more complex logic to show different components. To load data asynchronously, use the OnClick event or the OnParametersSetAsync event of a component you render *@
+
+
+ First
+ Second
+ Third
+
+
+@if (FirstSelected)
+{
+ the first button is selected
+}
+
+@if (SecondSelected)
+{
+ Second button is selected
+}
+
+@if (ThirdSelected)
+{
+ third
+}
+
+@code{
+ bool FirstSelected { get; set; }
+ bool SecondSelected { get; set; } = true; // you can pre-select buttons
+ bool ThirdSelected { get; set; }
+}
+````
+
+
+## Multiple Selection
+
+When you click a button, it becomes selected. When you click another button, the first one retains its selected state, and the second one will also be selected. Clicking on a selected button will deselect it.
+
+>caption Multiple Selection in the ButtonGroup
+
+
+
+````CSHTML
+@* You can use more complex logic to show different components. To load data asynchronously, use the OnClick event or the OnParametersSetAsync event of a component you render *@
+
+
+ First
+ Second
+ Third
+
+
+@if (FirstSelected)
+{
+ the first button is selected
+}
+
+@if (SecondSelected)
+{
+ Second button is selected
+}
+
+@if (ThirdSelected)
+{
+ third
+}
+
+@code{
+ bool FirstSelected { get; set; }
+ bool SecondSelected { get; set; } = true; // you can pre-select buttons
+ bool ThirdSelected { get; set; }
+}
+````
+
+
+## See Also
+
+ * [ButtonGroup Overview]({%slug buttongroup-overview%})
+ * [ButtonGroup Events]({%slug buttongroup-events%})
+ * [Live Demo: ButtonGroup Selection](https://demos.telerik.com/blazor-ui/buttongroup/selection)