Syncfusion.Blazor.SplitButtons

Syncfusion Blazor SplitButton components

A comprehensive suite of Blazor button components for grouped buttons, dropdown menus, split buttons, and progress buttons. Includes Button Group, Dropdown Menu, Split Button, and Progress Button components.

Using this package with an AI coding agent

Before generating Syncfusion code, ask your AI coding agent to run the Syncfusion setup using the following prompt:

Set up this project for Syncfusion before generating code. Fetch and follow the official instructions at https://ai.syncfusion.com, then report the detected platform, installed skill pack, MCP status, and any required licensing action.

The setup detects your project's platform and loads the appropriate Syncfusion skill pack. No Syncfusion account or MCP key is required to install or read Syncfusion agent skills.

Platform reference: https://ai.syncfusion.com/blazor/llms.txt

Supported components

This package includes the following components:

• Blazor Button Group
• Blazor Dropdown Menu
• Blazor Split Button
• Blazor Progress Button

Blazor Button Group component

The Blazor Button Group component is a series of buttons aligned vertically or horizontally.

Key features

• Horizontal and Vertical layout: Arrange buttons horizontally or vertically
• Selection modes: Single or multiple selection modes
• Predefined styles: Built-in button styles and appearances
• Different sizes: Support for various button sizes
• Rounded corners: Customizable border radius options
• Icon support: Include icons within buttons
• RTL support: Right-to-left text direction support
• UI customization: Custom CSS and theme options

Documentation

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Blazor Button Group component features overview
• Blazor Button Group component demos
• API reference

Blazor Dropdown Menu component

The Blazor Dropdown Menu component is a graphical user interface component that lets users choose from a list of actions that can be triggered.

Key features

• Icon support: Built-in icons and custom icon positioning
• Multiple sizes: Predefined button sizes
• Separators: Visual separators between menu items
• Disabled items: Disable specific menu items
• Template support: Rich templates for menu items
• RTL support: Right-to-left text direction support
• Keyboard navigation: Full keyboard support for accessibility
• Custom styling: CSS and theme customization options

Documentation

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Blazor Dropdown Menu component features overview
• Blazor Dropdown Menu component demos
• API reference

Blazor Split Button component

The Blazor Split Button component triggers a default action when clicked and provides a list of actions in a dropdown.

Key features

• Primary and Dropdown actions: Separate primary action and dropdown menu
• Icon support: Built-in icons and custom icon positioning
• Multiple sizes: Predefined button sizes
• Disabled items: Disable specific dropdown items
• Item separators: Visual separators between menu items
• Template support: Rich templates for dropdown items
• RTL support: Right-to-left text direction support
• Keyboard navigation: Full keyboard support for accessibility

Documentation

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Blazor Split Button component features overview
• Blazor Split Button component demos
• API reference

Blazor Progress Button component

The Blazor Progress Button component visualizes the progression of an operation in the background.

Key features

• Progress visualization: Display operation progress with visual indicators
• Predefined styles: Built-in button styles and themes
• Multiple button types: Primary, secondary, and custom button types
• Spinner animation: Animated spinner during progress
• Progress tracking: Display percentage or duration-based progress
• Custom content: Include custom templates and content
• Keyboard navigation: Full keyboard support for accessibility
• UI customization: Custom CSS and theme options

Documentation

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Blazor Progress Button component features overview
• Blazor Progress Button component demos
• API reference

System requirements

• .NET 8.0 or later (Blazor Web App, Blazor Server App, Blazor WebAssembly App and Blazor Hybrid App)
• See full requirements: system requirements.

Installation

Install the SplitButtons package and the themes package, which provides the stylesheets referenced below:

dotnet add package Syncfusion.Blazor.SplitButtons
dotnet add package Syncfusion.Blazor.Themes

Add stylesheet and script references

For Blazor Server App / Blazor Web App, add these to Components/App.razor or App.razor. For Blazor WebAssembly App, add these to wwwroot/index.html:

<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick start

Register the Syncfusion Blazor service in Program.cs:

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

Button Group

<SfButtonGroup>
    <ButtonGroupButton>Left</ButtonGroupButton>
    <ButtonGroupButton>Center</ButtonGroupButton>
    <ButtonGroupButton>Right</ButtonGroupButton>
</SfButtonGroup>

DropDownButton

<SfDropDownButton Content="Edit">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Cut"></DropDownMenuItem>
        <DropDownMenuItem Text="Copy"></DropDownMenuItem>
        <DropDownMenuItem Text="Paste"></DropDownMenuItem>
    </DropDownMenuItems>
</SfDropDownButton>

ProgressButton

<SfProgressButton Content="Spin Left"></SfProgressButton>

SplitButton

<SfSplitButton Content="Paste">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Cut" ></DropDownMenuItem>
        <DropDownMenuItem Text="Copy" ></DropDownMenuItem>
        <DropDownMenuItem Text="Paste"></DropDownMenuItem>
    </DropDownMenuItems>
</SfSplitButton>

Support and feedback

• For queries, reach our Syncfusion support team or post them through the community forums.
• Request new features through the Syncfusion feedback portal.

Other popular Blazor components

Explore other popular Syncfusion Blazor components curated from UI components, standalone SDKs, and document solution suites.

UI components	Standalone UI SDK's	Document processing
Blazor DataGrid	Blazor Gantt Chart	Blazor DOCX Editor
Blazor TreeGrid	Blazor Diagram	Blazor Document
Blazor Map	Blazor Scheduler	Blazor PDF Viewer
Blazor File Manager	Blazor RichTextEditor	Blazor Spreadsheet Editor

License

This is a commercial product and requires a paid license for possession or use. Syncfusion licensed software, including this component, is subject to the terms and conditions of the Syncfusion EULA. You can purchase a license here or start a free 30-day trial here.

About Syncfusion

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1800+ components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

[email protected] | Toll Free: 1-888-9-DOTNET