ButtonGroup Buttons
The ButtonGroup component supports two types of buttons that have different behavior:
You can add the desired button instances by declaring the dedicated button tags. Additionally, you can individually configure their appearance, enabled/disabled state and visibility through the parameters each button tag exposes.
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 article.
The ButtonGroupToggleButton
inherits the parameters and behavior of the TelerikToggleButton
component.
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 component.
Disabled State
To disable a button, set its Enabled
attribute to false
.
<TelerikButtonGroup>
<ButtonGroupButton>Enabled</ButtonGroupButton>
<ButtonGroupButton Enabled="false">Disabled</ButtonGroupButton>
<ButtonGroupToggleButton Selected="true">Enabled</ButtonGroupToggleButton>
<ButtonGroupToggleButton Enabled="false">Disabled</ButtonGroupToggleButton>
</TelerikButtonGroup>
Visibility
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.
<TelerikButtonGroup>
<ButtonGroupButton>First</ButtonGroupButton>
<ButtonGroupButton Visible="false">Hidden</ButtonGroupButton>
<ButtonGroupToggleButton>Third</ButtonGroupToggleButton>
<ButtonGroupToggleButton Visible="false">Fourth</ButtonGroupToggleButton>
</TelerikButtonGroup>