Styles and Appearances in Blazor Button Group Component

4 Aug 20261 minute to read

The appearance of the Button Group can be modified by overriding the default CSS of the Button Group component. The following table lists the CSS classes that can be overridden and the corresponding element or state they target. A custom theme for the controls can also be created using the Theme Studio.

CSS Class Purpose of Class
.e-btn To customize the buttons inside the Button Group.
.e-btn:hover To customize the buttons inside the Button Group on hover.
.e-btn:focus To customize the buttons inside the Button Group on focus.
.e-btn:active To customize the buttons inside the Button Group on active (pressed).

Applying custom styles

The following example demonstrates a global stylesheet override that changes the background color of the buttons on hover.

@using Syncfusion.Blazor.SplitButtons

<SfButtonGroup>
    <ButtonGroupButton>View</ButtonGroupButton>
    <ButtonGroupButton>Edit</ButtonGroupButton>
    <ButtonGroupButton>Delete</ButtonGroupButton>
</SfButtonGroup>

<style>
    .e-btn-group .e-btn:hover {
        background-color: #ffaa00;
        color: #ffffff;
    }
</style>

See also