Types and Styles in Blazor Button Group

27 Aug 20264 minutes to read

This section explains the different types and styles available for the Blazor Button Group component.

Blazor Button Group styles

The Blazor Button Group has the following predefined styles that can be defined using the CssClass property.

Class Description
e-primary Used to represent a primary action.
e-success Used to represent a positive action.
e-info Used to represent an informative action.
e-warning Used to represent an action with caution.
e-danger Used to represent a negative action.
e-link Changes the appearance of the Button like a hyperlink. 
@using Syncfusion.Blazor.SplitButtons

<SfButtonGroup>
    <ButtonGroupButton CssClass="e-primary">View</ButtonGroupButton>
    <ButtonGroupButton CssClass="e-success">Edit</ButtonGroupButton>
    <ButtonGroupButton CssClass="e-info">Delete</ButtonGroupButton>
</SfButtonGroup>
 <SfButtonGroup>
    <ButtonGroupButton CssClass="e-link">View</ButtonGroupButton>
    <ButtonGroupButton CssClass="e-warning">Edit</ButtonGroupButton>
    <ButtonGroupButton CssClass="e-danger">Delete</ButtonGroupButton>
</SfButtonGroup>
Blazor Button Group with different Style

NOTE

Predefined Button Group styles provide only the visual indication. So, Button Group content should define the Button Group style for the users of assistive technologies such as screen readers.

Blazor Button Group types

The types of Blazor Button Group are as follows:

  • Flat Button Group
  • Outline Button Group
  • Round Button Group
  • Toggle Button Group

Flat Button Group

The Flat Button Group is styled with no background color. To create a flat Button Group, set the CssClass property to e-flat.

@using Syncfusion.Blazor.SplitButtons

<SfButtonGroup CssClass="e-flat">
    <ButtonGroupButton>View</ButtonGroupButton>
    <ButtonGroupButton>Edit</ButtonGroupButton>
    <ButtonGroupButton>Delete</ButtonGroupButton>
</SfButtonGroup>

Outline Button Group

An outline Button Group has a border with a transparent background. To create an outline Button Group, set the CssClass property to e-outline.

@using Syncfusion.Blazor.SplitButtons

<SfButtonGroup CssClass="e-outline">
    <ButtonGroupButton>View</ButtonGroupButton>
    <ButtonGroupButton>Edit</ButtonGroupButton>
    <ButtonGroupButton>Delete</ButtonGroupButton>
</SfButtonGroup>

Round Button Group

A round Button Group is styled with rounded corners. It is commonly used to contain an icon that represents its action. To create a round Button Group, set the CssClass property to e-round-corner.

@using Syncfusion.Blazor.SplitButtons

<SfButtonGroup CssClass="e-round-corner">
    <ButtonGroupButton>View</ButtonGroupButton>
    <ButtonGroupButton>Edit</ButtonGroupButton>
    <ButtonGroupButton>Delete</ButtonGroupButton>
</SfButtonGroup>
Displaying different Type of Blazor Button Group Component

Icons

ButtonGroup with font icons

Use the IconCss property to add an icon to a button. Customize the icon position by using the IconPosition property. The available values are IconPosition.Left (default) and IconPosition.Right.

@using Syncfusion.Blazor.SplitButtons
@using Syncfusion.Blazor.Buttons

<SfButtonGroup Mode="SelectionMode.Single">
    <ButtonGroupButton IconCss="e-icons e-play-icon" IconPosition="IconPosition.Right">PLAY</ButtonGroupButton>
    <ButtonGroupButton IconCss="e-icons e-pause-icon">PAUSE</ButtonGroupButton>
    <ButtonGroupButton>Delete</ButtonGroupButton>
</SfButtonGroup>

<style>
    .e-play-icon::before {
        content: '\e70c';
    }
    .e-pause-icon::before {
        content: '\e77b';
    }
</style>
Blazor Blazor Button Group with Icon

Button Group size

The Button Group supports the following size options, applied using the CssClass property:

Size CSS Class Description
Default (none) Renders the standard-sized Button Group.
Small e-small Renders a smaller-sized Button Group.

The following example shows the default and small Button Group rendered side by side.

@using Syncfusion.Blazor.SplitButtons

<SfButtonGroup CssClass="e-small">
    <ButtonGroupButton>View</ButtonGroupButton>
    <ButtonGroupButton>Edit</ButtonGroupButton>
    <ButtonGroupButton>Delete</ButtonGroupButton>
</SfButtonGroup>
 <SfButtonGroup>
    <ButtonGroupButton>View</ButtonGroupButton>
    <ButtonGroupButton>Edit</ButtonGroupButton>
    <ButtonGroupButton>Delete</ButtonGroupButton>
</SfButtonGroup>
Changing Blazor Button Group Size

See also