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.

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
• Feature Overview
• Live Demos
• API Reference

Blazor Dropdown Menu Component

The Blazor Dropdown Menu Component is a graphical UI component that lets users choose from a list of actions.

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
• Feature Overview
• Live 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
• Feature Overview
• Live 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
• Feature Overview
• Live Demos
• API Reference

System Requirements

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

Installation

.NET CLI

dotnet add package Syncfusion.Blazor.SplitButtons

NuGet Package Manager

Install-Package Syncfusion.Blazor.SplitButtons

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/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick Start

Register the Syncfusion® Blazor services 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

• Support portal
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA.

• Purchase a license
• Start a free 30-day trial

About Syncfusion®

Syncfusion® provides 1600+ UI 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.

sales@syncfusion.com | Toll Free: 1-888-9-DOTNET