Blazor ButtonGroup Overview
This article provides information about the Blazor ButtonGroup component and its core features.
The ButtonGroup component is a container for regular and toggle buttons. Before continuing, make sure you are familiar with the differences between regular buttons and toggle buttons.
The ButtonGroup component lets you select one or more toggle buttons, and respond to the selection and click events. The buttons inside fill up the container, match the styling according to the chosen theme and provide the regular button features like images and icons and the other parameters and attributes.
The ButtonGroup component is part of Telerik UI for Blazor, a
professional grade UI library with 100 native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Creating Blazor ButtonGroup
- Use the
<TelerikButtonGroup>tag to add the component to your razor page. - Inside it, add the desired button tags that denote each button -
<ButtonGroupToggleButton>or<ButtonGroupButton>. - Optionally, use the
OnClickevent of these buttons to handle the user actions. Read more in the Events article.
TelerikButtonGroup with regular buttons and toggle buttons, and their respective OnClick handlers
<TelerikButtonGroup>
<ButtonGroupButton OnClick="@FirstClick">First button</ButtonGroupButton>
<ButtonGroupToggleButton OnClick="@SecondClick">Second button</ButtonGroupToggleButton>
</TelerikButtonGroup>
@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.");
}
}
Buttons
The ButtonGroup incorporates two types of buttons - ButtonGroupToggleButton and ButtonGroupButton. You can individually configure their settings, control their enabled/disabled state and visibility. Read more about the Blazor ButtonGroup buttons...
Icons
To visually communicate the purpose of a button, you can add an image, sprite, or font icon. You can choose between a wide range of built-in font icons or use your custom font icons. Read more about the Blazor ButtonGroup icons...
Selection
The ButtonGroup allows you to control the selection mode of its ButtonGroupToggleButton instances. The user can select single or multiple ButtonGroupToggleButton. Read more about the selection in the ButtonGroup component...
Appearance
The separate button instances of the ButtonGroup provide several parameters that control their styling and appearance, including background color, shape, rounded corners and fill.
Events
The Blazor ButtonGroup fires events that you can handle and respond to user actions. Read more about the Blazor ButtonGroup events....
ButtonGroup Parameters
The following table lists ButtonGroup parameters. Check the ButtonGroup API Reference for a full list of properties, methods and events.
| Parameter | Type and Default Value | Description |
|---|---|---|
Class |
string |
Additional CSS class to the <button class="k-button"> element. Use it to apply custom styles or override the theme. See Custom Styling below. |
Enabled |
bool ( true) |
Whether the ButtonGroup is enabled and accepts clicks. |
SelectionMode |
ButtonGroupSelectionMode ( ButtonGroupSelectionMode.Single) |
The selection mode of the ButtonGroup. |
Width |
string |
The width of the ButtonGroup. |
Custom 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.
Set CSS class to the button and change its appearance
<TelerikButtonGroup>
<ButtonGroupToggleButton>Default</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@IsSelected"
Class="@( IsSelected ? "my-on-class" : "the-off-class" )">Styled - Selected: @IsSelected</ButtonGroupToggleButton>
</TelerikButtonGroup>
@code {
bool IsSelected { get; set; }
}
<style>
.k-button-group button.k-button.my-on-class,
.k-button-group button.k-button.my-on-class:hover {
color: yellow;
font-weight: 700;
}
.k-button-group button.k-button.the-off-class,
.k-button-group button.k-button.the-off-class:hover {
color: pink;
}
</style>