Syncfusion.Blazor.Buttons 35.1.40

Syncfusion Blazor Button components

A comprehensive suite of Blazor button and toggle components for building modern interactive user interfaces. Includes Button, CheckBox, Chips, Radio Button, Toggle Switch, Floating Action Button, and Speed Dial 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
• Blazor CheckBox
• Blazor Chips
• Blazor Radio Button
• Blazor Toggle Switch
• Blazor Floating Action Button
• Blazor Speed Dial

Blazor Button component

The Blazor Button component is a custom HTML5 button control with built-in features for icons, predefined styles, button types, sizes, and UI customization.

Key features

• Button types: Basic, flat, outline, and rounded button styles
• Icon support: Built-in Material, Bootstrap, and custom icon integration with flexible positioning
• Button states: Normal, hover, active, disabled, and focus states
• Sizing options: Small, normal, and large predefined sizes with custom sizing
• Toggle button: Enable/disable button toggle functionality for state management
• Accessibility: Full keyboard navigation and ARIA support
• UI customization: Custom colors, themes, and CSS class integration

Documentation

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

Blazor CheckBox component

The Blazor CheckBox component is a custom checkbox input component for selecting one or more options from a predefined list.

Key features

• Checkbox states: Checked, unchecked, indeterminate, and disabled states
• Multi-select support: Select multiple options from a list of predefined choices
• Indeterminate state: Mixed state for parent-child hierarchical selections
• Label positioning: Flexible label placement (before, after) with custom text
• Size options: Small, normal, and large predefined sizes with custom sizing
• Accessibility: Full keyboard navigation (Space to toggle) and ARIA labeling
• Event handling: Change, focus, and blur events for reactive form handling
• Styling: Theme support and custom CSS class integration

Documentation

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Blazor CheckBox component features overview
• Blazor CheckBox component demos
• API reference
• Blazor CheckBox component video tutorials

Blazor Chips component

The Blazor Chips component displays small blocks of information with optional avatars, images, and icons. Ideal for tagging, filtering, and multi-select scenarios.

Key features

• Content types: Text, avatars, images, and icons in compact chip format
• Removable chips: Built-in close button for dismissible chip removal
• Selection modes: Single-select or multi-select chip collections
• Template support: Custom templates for complex chip content
• Chip variants: Outlined and filled chip styling options
• Size options: Small, normal, and large predefined sizes
• Accessibility: Keyboard navigation and ARIA attributes for screen readers

Documentation

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

Blazor Radio Button component

The Blazor Radio Button component is a custom radio input component for selecting a single option from a group of choices.

Key features

• Single selection: Mutually exclusive radio button groups for one-from-many selection
• Grouping support: Automatic grouping by name attribute for cohesive behavior
• Radio states: Checked, unchecked, disabled, and focus states
• Label positioning: Flexible label placement with custom text and styling
• Size options: Small, normal, and large predefined sizes with custom sizing
• Value binding: Two-way data binding for reactive form updates
• Accessibility: Full keyboard navigation (Arrow keys) and ARIA roles
• Event handling: Change and focus events for form validation and submission

Documentation

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Blazor Radio Button component features overview
• Blazor Radio Button component demos
• API reference
• Blazor Radio Button video tutorials

Blazor Toggle Switch component

The Blazor Toggle Switch component is a binary toggle component for on/off state control. Perfect for settings, preferences, and conditional feature activation.

Key features

• Binary states: On/Off toggle with checked and unchecked states
• Custom labels: Text labels for both on and off states
• Disabled state: Support for disabled toggles in forms
• Size options: Small, normal, and large predefined sizes with custom sizing
• Value binding: Two-way data binding for reactive state management
• Animation: Smooth toggle animation between states
• Accessibility: Full keyboard navigation (Space to toggle) and ARIA attributes
• Styling options: Multiple themes and custom CSS class integration

Documentation

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Blazor Toggle Switch component features overview
• Blazor Toggle Switch component demos
• API reference
• Blazor Toggle Switch component video tutorials

Blazor Floating Action Button component

The Blazor Floating Action Button component is a primary action button that floats above screen content. Commonly used for the main action on a page.

Key features

• Floating overlay: Fixed positioning above all page content for primary actions
• Icon integration: Built-in Material and Bootstrap icon support with custom icons
• Position flexibility: Configurable positions (top-left, top-right, bottom-left, bottom-right)
• Size options: Small, normal, and large predefined sizes with custom sizing
• Multiple styles: Solid, outlined, and custom styling options
• Visibility control: Show/hide animations and conditional rendering
• Icon buttons: Support for multiple action buttons in a single FAB
• Accessibility: Full keyboard navigation and ARIA labeling for screen readers

Documentation

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

Blazor Speed Dial component

The Blazor Speed Dial component is an extension of the Floating Action Button that displays a list of related actions when clicked. Ideal for presenting multiple quick actions.

Key features

• Expandable menu: Click to reveal a collection of related action items
• Multiple items: Support for multiple action buttons with icons and labels
• Item content: Icons, text labels, and badges for each action item
• Position control: Customizable FAB positions (all four corners supported)
• Direction options: Radial, linear (up, down, left, right) menu layouts
• Animation effects: Smooth opening/closing animations and transitions
• Keyboard navigation: Full keyboard support for menu interactions
• Accessibility: ARIA roles and labels for screen reader compatibility

Documentation

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Blazor Speed Dial component features overview
• Blazor Speed Dial component demos
• API reference

System requirements

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

Installation

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

dotnet add package Syncfusion.Blazor.Buttons
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 file. 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

<SfButton>Button</SfButton>

CheckBox

<SfCheckBox Label="Default" @bind-Checked="isChecked"></SfCheckBox>

@code
{
    private bool isChecked = true;
}

Chips

@using Syncfusion.Blazor.Buttons

<SfChip>
    <ChipItems>
        <ChipItem Text="Janet Leverling"></ChipItem>
    </ChipItems>
</SfChip>

FAB

@using Syncfusion.Blazor.Buttons

<div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
    <SfFab Target="#target" Content="Add"></SfFab>
</div>

RadioButton

<SfRadioButton Label="Credit Card" Name="options" Value="card" @bind-Checked="stringChecked"></SfRadioButton>
<SfRadioButton Label="Debit Card" Name="options" Value="cash" @bind-Checked="stringChecked"></SfRadioButton>

@code {
    private string stringChecked = "cash";
}

Speed Dial

<div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
    <SfSpeedDial Target="#target" Position="FabPosition.BottomLeft" Mode="SpeedDialMode.Radial" OpenIconCss="e-icons e-edit">
        <SpeedDialRadialSettings OffSet="80px"/>
        <SpeedDialItems>
            <SpeedDialItem IconCss="e-icons e-cut"/>
            <SpeedDialItem IconCss="e-icons e-copy"/>
            <SpeedDialItem IconCss="e-icons e-paste"/>
        </SpeedDialItems>
    </SfSpeedDial>
    <SfSpeedDial Target="#target" Position="FabPosition.BottomRight" Mode="SpeedDialMode.Linear" OpenIconCss="e-icons e-edit">
        <SpeedDialItems>
            <SpeedDialItem IconCss="e-icons e-cut" Text="Cut"/>
            <SpeedDialItem IconCss="e-icons e-copy" Text="Copy"/>
            <SpeedDialItem IconCss="e-icons e-paste" Text="Paste"/>
        </SpeedDialItems>
    </SfSpeedDial>
</div>

Switch

<label for="checked" style="padding: 10px 10px 10px 0">USB Tethering</label>

<SfSwitch @bind-Checked="isChecked"></SfSwitch>

@code {
    private bool isChecked = true;
}

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.

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.

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