Skip to content

docs(ButtonGroup): Add more examples to Buttons page #3021

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 13, 2025
Merged

docs(ButtonGroup): Add more examples to Buttons page #3021

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 95 additions & 16 deletions components/buttongroup/buttons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,85 @@ position: 5

# ButtonGroup Buttons

The ButtonGroup component supports two types of buttons that have different behavior:
The ButtonGroup component supports two types of buttons that have different behaviors:

* [`ButtonGroupToggleButton`](#buttongroup-togglebutton)
* [`ButtonGroupButton`](#buttongroup-button)
* [`ButtonGroupToggleButton`](#buttongroup-togglebutton)

You can add the desired button instances by declaring the dedicated button tags. Additionally, you can individually configure their [appearance](slug:buttongroup-appearance), [enabled/disabled state](#disabled-state) and [visibility](#visibility) through the parameters of each button tag.

## ButtonGroup Button

The `ButtonGroupButton` does not change its visual state when clicked. It behaves as a regular button and does not support selection.

The `ButtonGroupButton` inherits the parameters and behavior of the [Telerik UI for Blazor Button](slug:components/button/overview) component.

>caption Using Buttons in a group

````RAZOR
<TelerikButtonGroup>
<ButtonGroupButton OnClick="@OnButton1Click">Button 1</ButtonGroupButton>
<ButtonGroupButton OnClick="@OnButton2Click">Button 2</ButtonGroupButton>
<ButtonGroupButton OnClick="@OnButton3Click">Button 3</ButtonGroupButton>
</TelerikButtonGroup>

You can add the desired button instances by declaring the dedicated button tags. Additionally, you can individually configure their [appearance](slug:buttongroup-appearance), [enabled/disabled state](#disabled-state) and [visibility](#visibility) through the parameters each button tag exposes.
@code {
private void OnButton1Click()
{
// ...
}

private void OnButton2Click()
{
// ...
}

private void OnButton3Click()
{
// ...
}
}
````

## ButtonGroup ToggleButton

The `ButtonGroupToggleButton` becomes selected when clicked and deselects when another one is clicked. If multiple selection is enabled, the user can select more than one `ButtonGroupToggleButton` at a time. Clicking on a selected button in this case will deselect it. Read more in the [Selection](slug:buttongroup-selection) article.

The `ButtonGroupToggleButton` inherits the parameters and behavior of the [`TelerikToggleButton`](slug:togglebutton-overview) component.

## ButtonGroup Button
>caption Using ToogleButtons in a group

The `ButtonGroupButton` does not change its visual state when clicked. It behaves as a regular button and does not support selection.
````RAZOR
<TelerikButtonGroup>
<ButtonGroupToggleButton OnClick="@OnToggleButton1Click"
@bind-Selected="@ToggleButton1Selected">Toggle Button 1</ButtonGroupToggleButton>
<ButtonGroupToggleButton OnClick="@OnToggleButton2Click"
@bind-Selected="@ToggleButton2Selected">Toggle Button 2</ButtonGroupToggleButton>
<ButtonGroupToggleButton OnClick="@OnToggleButton3Click"
@bind-Selected="@ToggleButton3Selected">Toggle Button 3</ButtonGroupToggleButton>
</TelerikButtonGroup>

The `ButtonGroupButton` inherits the parameters and behavior of the [Telerik UI for Blazor Button](slug:components/button/overview) component.
@code {
private bool ToggleButton1Selected { get; set; } = true;
private bool ToggleButton2Selected { get; set; }
private bool ToggleButton3Selected { get; set; }

private void OnToggleButton1Click()
{
// ...
}

private void OnToggleButton2Click()
{
// ...
}

private void OnToggleButton3Click()
{
// ...
}
}
````

## Disabled State

Expand All @@ -37,13 +98,18 @@ To disable a button, set its `Enabled` attribute to `false`.

````RAZOR
<TelerikButtonGroup>
<ButtonGroupButton>Enabled</ButtonGroupButton>
<ButtonGroupButton Enabled="false">Disabled</ButtonGroupButton>
<ButtonGroupToggleButton Selected="true">Enabled</ButtonGroupToggleButton>
<ButtonGroupToggleButton Enabled="false">Disabled</ButtonGroupToggleButton>
<ButtonGroupButton>Enabled Button</ButtonGroupButton>
<ButtonGroupButton Enabled="false">Disabled Button</ButtonGroupButton>
<ButtonGroupToggleButton @bind-Selected="@ToggleButton1Selected">Enabled ToggleButton</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@ToggleButton2Selected">Enabled ToggleButton</ButtonGroupToggleButton>
<ButtonGroupToggleButton Enabled="false">Disabled ToggleButton</ButtonGroupToggleButton>
</TelerikButtonGroup>
````

@code {
private bool ToggleButton1Selected { get; set; } = true;
private bool ToggleButton2Selected { get; set; }
}
````

## Visibility

Expand All @@ -53,13 +119,26 @@ You can set the `Visible` parameter of individual buttons to `false` to hide the

````RAZOR
<TelerikButtonGroup>
<ButtonGroupButton>First</ButtonGroupButton>
<ButtonGroupButton Visible="false">Hidden</ButtonGroupButton>
<ButtonGroupToggleButton>Third</ButtonGroupToggleButton>
<ButtonGroupToggleButton Visible="false">Fourth</ButtonGroupToggleButton>
<ButtonGroupButton>Button</ButtonGroupButton>
<ButtonGroupButton Visible="@ShowHiddenButtons">Button Hidden</ButtonGroupButton>
<ButtonGroupToggleButton @bind-Selected="@ToggleButton1Selected">ToggleButton</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@ToggleButton2Selected"
Visible="@ShowHiddenButtons">ToggleButton Hidden</ButtonGroupToggleButton>
</TelerikButtonGroup>

<br />
<br />

<TelerikToggleButton @bind-Selected="@ShowHiddenButtons">Show Hidden Buttons</TelerikToggleButton>

@code {
private bool ShowHiddenButtons { get; set; }

private bool ToggleButton1Selected { get; set; } = true;
private bool ToggleButton2Selected { get; set; }
}
````

## See Also

* [Live Demo: Button Types](https://demos.telerik.com/blazor-ui/buttongroup/button-types)
* [Live Demo: Button Types](https://demos.telerik.com/blazor-ui/buttongroup/button-types)