Skip to main content Home Creators syncfusion blazor-ui-components-skills syncfusion-blazor-buttons
syncfusion-blazor-buttons Implement Syncfusion Blazor button components including Button, ButtonGroup, CheckBox, Chip, DropdownMenu, FloatingActionButton, ProgressButton, SpeedDial, SplitButton, and ToggleSwitch. Use this skill when working with button-related components in Blazor applications. Covers installation, configuration, styling, accessibility, event handling, and advanced features for all button component types.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-buttonsThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository Implement Syncfusion Blazor Chart (SfChart) component for comprehensive data visualization. Use this when creating line charts, bar/column charts, area charts, financial charts, or statistical visualizations. This skill covers 30+ chart types including scatter plots, bubble charts, candlestick charts, and specialized charts like waterfall, histogram, and polar charts for Blazor applications.
syncfusion-blazor-diagram Build and troubleshoot Syncfusion Blazor diagrams using SfDiagramComponent. Trigger for flowcharts, org charts, mind maps, BPMN, UML sequence, swimlanes, symbol palettes, nodes/connectors/ports/annotations, layouts, data binding, serialization (load/save), export/print, and collaborative editing questions. Provide Blazor + Syncfusion setup steps, configuration patterns, and sample snippets.
syncfusion-blazor-pivot-table Use this skill when users ask how to implement Syncfusion Pivot Table/PivotView in Blazor. Trigger for Blazor components, data binding, OLAP analysis, aggregation, drill-down/drill-through, grouping, filtering, conditional formatting, exports (Excel/PDF/CSV), or pivot charts. Blazor-only, not React/Angular/Vue/JS.
Related occupations SOC
Based on SOC occupation classification
name syncfusion-blazor-buttons description Implement Syncfusion Blazor button components including Button, ButtonGroup, CheckBox, Chip, DropdownMenu, FloatingActionButton, ProgressButton, SpeedDial, SplitButton, and ToggleSwitch. Use this skill when working with button-related components in Blazor applications. Covers installation, configuration, styling, accessibility, event handling, and advanced features for all button component types. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Blazor UI Components - Buttons"}
Syncfusion Blazor Buttons Components
Table of Contents
Components Overview
The Syncfusion.Blazor.Buttons package provides 11 comprehensive button components:
Core Buttons
Button (SfButton) - Standard button with multiple types, styles, icons, and statesButtonGroup (SfButtonGroup) - Grouped button controls with selection modesCheckBox (SfCheckBox) - Tri-state checkbox with checked, unchecked, and indeterminate statesRadioButton (SfRadioButton) - Radio button for mutually exclusive selections
ToggleSwitch (SfSwitch) - On/off toggle switch control
Interactive Buttons
DropdownMenu (SfDropDownButton) - Button with dropdown menu optionsSplitButton (SfSplitButton) - Button with primary action and dropdown menuProgressButton (SfProgressButton) - Button with built-in progress indication
Floating Actions
FloatingActionButton (SfFab) - Circular floating action buttonSpeedDial (SfSpeedDial) - FAB with expandable action items (linear/radial)
Chip Components
Chip (SfChip) - Compact elements for tags, filters, selections, and actions Package: Syncfusion.Blazor.Buttons and Syncfusion.Blazor.SplitButtons
Common Setup and Installation All button components share the same installation and setup process:
NuGet Packages Install the required packages based on component type:
dotnet add package Syncfusion.Blazor.Buttons
dotnet add package Syncfusion.Blazor.SplitButtons
dotnet add package Syncfusion.Blazor.Themes
Setup Steps (Common for All) 1. Add Namespaces (~/_Imports.razor):
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.SplitButtons
2. Register Service (~/Program.cs):
using Syncfusion.Blazor;
builder.Services.AddSyncfusionBlazor();
3. Add Theme and Script (~/index.html or ~/App.razor):
<head >
<link href ="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel ="stylesheet" />
<script src ="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" > </script >
</head >
Documentation and Navigation Guide
Button Component
Getting started and installation
Basic button implementation
Button types (flat, outline, round, primary, toggle)
Button styles (primary, success, info, warning, danger, link)
Icons and icon positioning
Button sizes (small, normal)
Repeat buttons
Tooltips
HTML attribute support
Native event handling
CSS class customization
Appearance customization
Block buttons
Rounded corners
RTL (right-to-left) support
Theme integration
Color schemes and variations
Responsive design patterns
Accessibility (WCAG compliance, keyboard navigation, ARIA attributes)
Screen reader support
Disabled state handling
Toggle button functionality
Server vs Web App implementation differences
Performance optimization
Best practices and common pitfalls
RadioButton Component
Getting started and installation
Basic radio button implementation
Radio button grouping with Name property
Label configuration and positioning
State and value management
Two-way data binding (@bind-Checked)
Value property for identification
Pre-selecting default values
Form integration patterns
CssClass for custom styling
HtmlAttributes dictionary usage
EnableRtl for right-to-left layouts
Disabled state configuration
EnablePersistence for state storage
Custom CSS class patterns
Theme customization techniques
Responsive design approaches
ValueChange event handler
ChangeArgs event data structure
CheckedChanged callback implementation
Created lifecycle event
Event handling patterns
ARIA attributes for accessibility
Keyboard navigation support
Best practices and common patterns
CheckBox Component
Getting started and installation
Basic checkbox implementation
Checkbox states (checked, unchecked, disabled)
Label configuration
Change event handling
Two-way data binding (@bind-Checked)
Multiple checkboxes and checkbox groups
Indeterminate (tristate) state
CSS class customization
Appearance customization
Theme integration (Bootstrap5, Material, Fabric, Tailwind)
Color variations (primary, success, warning, danger)
Size customization
RTL (right-to-left) support
Disabled appearance
Label styling and spacing
Disabled state handling and conditional disabling
Accessibility (WCAG, ARIA attributes, screen readers)
Keyboard navigation (Tab, Space)
Form integration and validation
State management patterns
Best practices and common patterns
Button Group Component
Getting started and installation
Basic button group implementation
Horizontal and vertical orientation
Selection modes (single, multiple, none)
Nesting button groups
Native event handling
Item configuration and data binding
Appearance customization
Button types and styles within groups
Icons in button groups
Size variations
Custom CSS classes
Theme integration
Accessibility features
Keyboard navigation
Selection state management
Event handling patterns
Best practices for button groups
Chip Component
Getting started and installation
Basic chip implementation
Chip types (input, filter, choice, action)
Icon integration
Delete functionality
Selection handling
Events (click, delete, created, beforeItemRender)
Dynamic chip collections
Rendering from data sources
Appearance customization
Color variations
Size options
Custom CSS classes
Icon and avatar styling
Theme integration
Responsive design
Accessibility support
Keyboard navigation
Custom template support
State management patterns
Event handling
Best practices
Dropdown Menu Component
Getting started and installation
Basic dropdown menu implementation
Popup items configuration (text, ID, icon, separator)
Icons in menu items
Item click events
Opening and closing behavior
Position customization
Dynamically adding/removing items
Grouped popups with ListView integration
Dialog opening on item click
DropdownList vs DropdownButton comparison
Appearance customization
Caret icon customization
Hiding dropdown arrow
Icon and width customization
Popup width customization
Rounded corners
RTL support
Animation effects
Template customization
Theme integration
Accessibility features
Disabled state handling
Native event handling
Keyboard navigation
Focus management
Best practices and patterns
Floating Action Button (FAB) Component
Getting started and installation
Basic FAB implementation
Position options (TopLeft, TopCenter, TopRight, MiddleLeft, MiddleCenter, MiddleRight, BottomLeft, BottomCenter, BottomRight)
Icons configuration
Content customization
Target element binding
Click event handling
Show/hide behavior
Visibility control
Appearance styles (primary, success, info, warning, danger)
Size variations (small, medium, large)
Icon positioning
Color customization
CSS class customization
Disabled appearance
Theme integration
Accessibility support
Keyboard navigation
Event handling patterns
State management
Best practices for FAB usage
Progress Button Component
Getting started and installation
Basic progress button implementation
Spinner types and positions (left, right, top, bottom, center)
Progress states (Begin, Progress, End, Fail)
Duration configuration
Content customization during progress
Events (OnBegin, Progress, End, Fail)
Stopping progress programmatically
Hiding spinner
Progress tracking
Appearance customization
Button types and icons
CSS class customization for progress states
Progress indicator styling
Spinner customization
Content changes during progress
Theme integration
Accessibility features
Trace events for debugging
Native event handling
State management patterns
Error handling
Best practices for progress buttons
Speed Dial Component
Getting started and installation
Basic SpeedDial implementation
Display modes (Linear, Radial)
Action items configuration
Position options (9 positions)
Open and close behavior
Item click events
Open modes (Hover, Click)
Direction options (Up, Down, Left, Right, Auto)
Radial settings (offset, direction, startAngle, endAngle)
Icon configuration (open/close icons)
Appearance customization
Icons (open icon, close icon, item icons)
Color variations
Item templates
CSS class customization
Animation effects
Theme integration
Accessibility support
Keyboard navigation
Event handling (all events)
State management patterns
Modal backdrop
Best practices
Split Button Component
Getting started and installation
Basic split button implementation
Dropdown menu items configuration
Primary button action
Item selection events
Icons in items
Separator support
Opening and closing behavior
Event handling
Appearance customization
Button styles
Icons and icon positioning
Size variations
Custom CSS classes
RTL support
Theme integration
Accessibility features
Disabled state handling
Keyboard navigation
Native event handling
Best practices
Toggle Switch Component
Getting started and installation
Basic toggle switch implementation
Checked and unchecked states
Two-way data binding (@bind-Checked)
On/Off label configuration
Change events
Value binding
Name attribute for forms
Default state configuration
Appearance customization
Size variations
Label customization (OnLabel, OffLabel)
Color schemes
Custom CSS classes
RTL support
Material theme considerations (no text support)
Theme integration
Accessibility support
Keyboard navigation
Disabled state handling
Form integration
State management patterns
Best practices
Common Patterns Across Components
Event Handling Pattern All button components support standard Blazor event handling:
<SfButton OnClick="HandleClick">Click Me</SfButton>
@code {
private void HandleClick()
{
// Handle button click
}
}
Styling Pattern All components support CSS class customization:
<SfButton CssClass="e-primary custom-button">Styled Button</SfButton>
Icon Integration Pattern Most components support icon CSS classes:
<SfButton IconCss="e-icons e-plus-icon">Add Item</SfButton>
Disabled State Pattern All interactive components support disabled state:
<SfButton Disabled="@isDisabled">Button</SfButton>
RTL Support Pattern All components support right-to-left rendering:
<SfButton EnableRtl="true">RTL Button</SfButton>
Shared Configuration
Theme Options All button components support Syncfusion themes:
Bootstrap5 (default): bootstrap5.cssMaterial : material.cssFabric : fabric.cssTailwind : tailwind.cssFluent : fluent.css
Common CSS Classes Standard CSS utility classes work across components:
e-primary : Primary action stylinge-success : Success/positive actione-info : Informational actione-warning : Warning/caution actione-danger : Danger/negative actione-link : Hyperlink stylinge-small : Small size variante-flat : Flat style (no background)e-outline : Outline style (border only)e-round : Circular/rounded style
Accessibility Features
ARIA attributes
Keyboard navigation support
Screen reader compatibility
Focus indicators
WCAG 2.1 compliance
Common Use Cases
Standard Actions Use Button for primary, secondary, and tertiary actions in forms, dialogs, and pages.
Multi-Selection Use CheckBox for multiple independent selections, list items, and preferences.
Exclusive Selection Use RadioButton for single selection from multiple options, preferences, settings, and survey questions.
Grouped Actions Use ButtonGroup for related actions like text alignment, view modes, or filter options.
Tags and Filters Use Chip for tags, contact lists, filter selections, and removable items.
Menu Actions Use DropdownMenu for contextual menus with multiple options.
Dual Actions Use SplitButton when you need a primary action with additional options.
Long Operations Use ProgressButton for operations that take time (file upload, form submission, API calls).
Primary Page Actions Use FloatingActionButton for the primary action on mobile or dashboard pages.
Multiple Quick Actions Use SpeedDial when you need multiple related actions accessible from a single FAB.
On/Off States Use ToggleSwitch for binary settings, feature toggles, and preferences.
Quick Start Examples
Basic Button <SfButton CssClass="e-primary">Primary Action</SfButton>
Basic CheckBox <SfCheckBox TChecked="bool" Label="Accept Terms"></SfCheckBox>
CheckBox with Two-Way Binding <SfCheckBox @bind-Checked="isEnabled" Label="Enable Feature"></SfCheckBox>
@code {
private bool isEnabled = false;
}
Multiple Checkboxes <SfCheckBox TChecked="bool" Label="Option 1"></SfCheckBox>
<SfCheckBox TChecked="bool" Label="Option 2"></SfCheckBox>
<SfCheckBox TChecked="bool" Label="Option 3"></SfCheckBox>
Tristate CheckBox <SfCheckBox EnableTriState="true" Checked="null" Label="Select All" TChecked="bool?"></SfCheckBox>
Basic RadioButton <SfRadioButton Label="Option 1" Name="group" Value="option1" @bind-Checked="@selected"></SfRadioButton>
<SfRadioButton Label="Option 2" Name="group" Value="option2" @bind-Checked="@selected"></SfRadioButton>
<SfRadioButton Label="Option 3" Name="group" Value="option3" @bind-Checked="@selected"></SfRadioButton>
@code {
private string selected = "option1";
}
RadioButton Group <h4>Choose Your Plan</h4>
<SfRadioButton Label="Free" Name="plan" Value="free" @bind-Checked="@plan"></SfRadioButton>
<SfRadioButton Label="Pro" Name="plan" Value="pro" @bind-Checked="@plan"></SfRadioButton>
<SfRadioButton Label="Enterprise" Name="plan" Value="enterprise" @bind-Checked="@plan"></SfRadioButton>
@code {
private string plan = "free";
}
Button with Icon <SfButton IconCss="e-icons e-plus-icon" CssClass="e-primary">
Add New
</SfButton>
Toggle Switch <SfSwitch @bind-Checked="isEnabled" OnLabel="On" OffLabel="Off"></SfSwitch>
@code {
private bool isEnabled = true;
}
Dropdown Menu <SfDropDownButton Content="Actions">
<DropDownMenuItems>
<DropDownMenuItem Text="Edit"></DropDownMenuItem>
<DropDownMenuItem Text="Delete"></DropDownMenuItem>
</DropDownMenuItems>
</SfDropDownButton>
Floating Action Button <div id="target" style="min-height:200px; position:relative;">
<SfFab Target="#target" IconCss="e-icons e-plus" Content="Add"></SfFab>
</div>
Chip Collection <SfChip EnableDelete="true">
<ChipItems>
<ChipItem Text="Tag 1"></ChipItem>
<ChipItem Text="Tag 2"></ChipItem>
<ChipItem Text="Tag 3"></ChipItem>
</ChipItems>
</SfChip>
Navigation Tips
For installation and basic setup , refer to any component's features file
For styling and appearance , refer to the styling files for each component
For accessibility and advanced features , refer to the advanced-features files
For specific component features , navigate to that component's documentation sections above
Support and Resources
Remember: Always start with the appropriate component's features file for implementation guidance, then move to styling and advanced features as needed.
