# Syncfusion Aspnetcore Buttons > Comprehensive guide for implementing Syncfusion ASP.NET Core button components including Button, ButtonGroup, Checkbox, Chips, DropDownButton, Floating Action Button, ProgressButton, RadioButton, Speed Dial, Split Button, and Switch. Use this when adding styled buttons, toggle behavior, icon support, grouped selections, dropdown action menus, floating primary actions, expandable speed dial menus, interactive form elements, single/multiple selection capabilities, compact tag/filter elements, or drag-and-drop interactions to an ASP.NET Core application. - Skill: `syncfusion/syncfusion-aspnetcore-buttons` (Agent Skill, multi-file: 64 files) - Install (CLI): `npx skillmds@latest add syncfusion/syncfusion-aspnetcore-buttons` - Raw SKILL.md: https://api.skillmd.com/api/skills/syncfusion/syncfusion-aspnetcore-buttons/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: syncfusion (https://skillmd.com/u/syncfusion) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/syncfusion/syncfusion-aspnetcore-buttons --- # Implementing Syncfusion ASP.NET Core Buttons ## Button The **Button** component is a fundamental action control that triggers a response when clicked. It supports color variants (primary, success, danger, warning, info, link), flat/outline/round styles, icon support, sizes, toggle behavior, ripple effects, and complete form integration. ### Navigation Guide #### Getting Started 📄 **Read:** [references/button-getting-started.md](references/button-getting-started.md) - Prerequisites and NuGet package installation - Tag helper registration in `_ViewImports.cshtml` - Stylesheet and script CDN setup in `_Layout.cshtml` - Script manager registration with `` - Basic button rendering with `` - Enabling ripple effects - Click event handling with `onclick` attribute - Using the button in forms (`type="submit"` / `type="reset"`) #### Types and Styles 📄 **Read:** [references/button-types-and-styles.md](references/button-types-and-styles.md) - Color variants (`e-primary`, `e-success`, `e-danger`, `e-warning`, `e-info`, `e-link`) - Flat, outline, and round button types - Icon buttons and icon positioning (`iconPosition`: Left / Top / Right / Bottom) - Toggle buttons with `isToggle` and `toggled` state - Button sizes (`e-small`, `e-bigger`) #### How-To 📄 **Read:** [references/button-how-to.md](references/button-how-to.md) - Creating block buttons (full-width) - Rounded-corner buttons - Navigation links styled as buttons - Custom appearance with CSS - Disabled state - RTL support with `enableRtl` - Tooltips on buttons - Form submission patterns #### API Reference 📄 **Read:** [references/button-api.md](references/button-api.md) - Complete property reference with types and defaults - Methods (`click`, `focusIn`, `destroy`) - Event signatures - CSS class reference table - Tag helper attribute syntax #### Accessibility 📄 **Read:** [references/button-accessibility.md](references/button-accessibility.md) - WCAG 2.2 AA compliance - Semantic HTML and WAI-ARIA attributes - Keyboard navigation (Tab, Enter, Space) - Focus management and visible focus indicators - Icon-only button accessibility with `aria-label` --- ### Quick Start **1. Install NuGet package:** ``` Install-Package Syncfusion.EJ2.AspNet.Core ``` **2. Register Tag Helper** in `~/Pages/_ViewImports.cshtml`: ```cshtml @addTagHelper *, Syncfusion.EJ2 ``` **3. Add CSS and script** in `~/Pages/Shared/_Layout.cshtml`: ```html ``` **4. Add Script Manager** at end of ``: ```html ``` **5. Render the Button:** ```cshtml ``` --- ### Common Patterns #### Primary Action Button ```cshtml ``` #### Danger Action Button ```cshtml ``` #### Icon Button ```cshtml ``` #### Disabled Button ```cshtml ``` #### Form Submission ```cshtml ``` ## ButtonGroup The **ButtonGroup** component visually groups related buttons into a single control. Use it to build segmented controls, toolbars, or related action clusters. It is a pure CSS grouping (no Tag Helper) — simply wrap multiple buttons inside an element with the `e-btn-group` class. ### Navigation Guide #### Getting Started 📄 **Read:** [references/buttongroup-getting-started.md](references/buttongroup-getting-started.md) - Pure CSS component setup - Basic button grouping with `e-btn-group` wrapper - Visual organization of related buttons #### Selection and Nesting 📄 **Read:** [references/buttongroup-selection-and-nesting.md](references/buttongroup-selection-and-nesting.md) - Radio button group behavior (mutually exclusive selection) - Checkbox group behavior (multiple selection) - Nesting with DropDownButton and SplitButton - Server-side state management for grouped selection #### How-To 📄 **Read:** [references/buttongroup-how-to.md](references/buttongroup-how-to.md) - Creating segmented controls - Building toolbars with multiple groups - Vertical button groups - Separators between buttons - Enable/disable logic for groups #### Style and Appearance 📄 **Read:** [references/buttongroup-style-and-appearance.md](references/buttongroup-style-and-appearance.md) - Custom styling for groups - CSS classes reference - Color variants within groups - Vertical layouts #### Accessibility 📄 **Read:** [references/buttongroup-accessibility.md](references/buttongroup-accessibility.md) - Semantic HTML structure - ARIA attributes (`role="group"`, `aria-label`) - Keyboard navigation - Focus indicators --- ### Quick Start **1. Install NuGet package:** ``` Install-Package Syncfusion.EJ2.AspNet.Core ``` **2. Register Tag Helper** in `~/Pages/_ViewImports.cshtml`: ```cshtml @addTagHelper *, Syncfusion.EJ2 ``` **3. Add CSS and script** in `~/Pages/Shared/_Layout.cshtml`: ```html ``` **4. Add Script Manager** at end of ``: ```html ``` **5. Render the ButtonGroup:** ```cshtml

``` --- ### Common Patterns #### Vertical ButtonGroup ```cshtml

``` #### Segmented Control ```cshtml

``` #### Toolbar with Multiple Groups ```cshtml ``` ## Checkbox The **Checkbox** component is a boolean input control for form selections. It supports checked, unchecked, and indeterminate states (for parent checkboxes), label positioning, size variants, custom colors, and full accessibility. ### Navigation Guide #### Getting Started 📄 **Read:** [references/checkbox-getting-started.md](references/checkbox-getting-started.md) - Prerequisites and NuGet package installation - Tag helper registration in `_ViewImports.cshtml` - Stylesheet and script CDN setup in `_Layout.cshtml` - Script manager registration - Basic checkbox rendering with `` - Checkbox with labels - Enabling ripple effects #### Features and State 📄 **Read:** [references/checkbox-features-and-state.md](references/checkbox-features-and-state.md) - Checked and unchecked states - Indeterminate state for parent checkboxes - Disabled state - Form integration with `name` and `value` attributes - Change event handling with `change` attribute - State summary table #### Label and Size 📄 **Read:** [references/checkbox-label-and-size.md](references/checkbox-label-and-size.md) - Label configuration - Label position control (`Before` / `After`) - Size variants (`e-small`) - Combined label and size example #### Customization 📄 **Read:** [references/checkbox-customization.md](references/checkbox-customization.md) - CSS class overrides (`e-frame`, `e-label`) - Color variants (primary, success, warning, danger, info) - Custom frame shape (circular checkboxes) - RTL support with `enableRtl` #### API Reference 📄 **Read:** [references/checkbox-api.md](references/checkbox-api.md) - Property reference table (`id`, `label`, `checked`, `disabled`, `indeterminate`, `name`, `value`, `cssClass`, `labelPosition`, `enableRtl`, `enableHtmlSanitizer`, `enablePersistence`, `htmlAttributes`) - Methods (`click`, `focusIn`, `destroy`) - Event signatures (`created`, `beforeChange`, `change`) - Tag helper attribute syntax - Complete end-to-end form example #### Accessibility 📄 **Read:** [references/checkbox-accessibility.md](references/checkbox-accessibility.md) - WCAG 2.2 AA compliance - Semantic HTML and WAI-ARIA attributes - Keyboard navigation (Tab / Space) - Fieldset/Legend patterns - Screen reader support --- ### Quick Start **1. Install NuGet package:** ``` Install-Package Syncfusion.EJ2.AspNet.Core ``` **2. Register Tag Helper** in `~/Pages/_ViewImports.cshtml`: ```cshtml @addTagHelper *, Syncfusion.EJ2 ``` **3. Add CSS and script** in `~/Pages/Shared/_Layout.cshtml`: ```html ``` **4. Add Script Manager** at end of ``: ```html ``` **5. Render the Checkbox:** ```cshtml ``` --- ### Common Patterns #### Checkbox with Form Submission ```cshtml ``` ```csharp public async Task OnPostAsync() { bool agreeTerms = Request.Form["agreeTerms"] == "agreed"; // Process the form data return Page(); } ``` #### Indeterminate Checkbox (Parent) ```cshtml

``` #### Small Size Checkbox ```cshtml ``` ## RadioButton The **RadioButton** component provides mutually exclusive option selection. Use it for single-choice form fields. Group radio buttons using the `name` attribute to ensure only one is selected at a time. Supports labels, sizes, form integration, and accessibility. ### Navigation Guide #### Getting Started 📄 **Read:** [references/radiobutton-getting-started.md](references/radiobutton-getting-started.md) - Prerequisites and NuGet package installation - Tag helper registration in `_ViewImports.cshtml` - Stylesheet and script CDN setup in `_Layout.cshtml` - Script manager registration - Basic radio button rendering with `` - Grouping radio buttons with `name` for mutual exclusivity #### Features and State 📄 **Read:** [references/radiobutton-features-and-state.md](references/radiobutton-features-and-state.md) - Disabled state - Form integration with `name` and `value` attributes - Reading selected value from `Request.Form["name"]` - Change event handling #### Label and Size 📄 **Read:** [references/radiobutton-label-and-size.md](references/radiobutton-label-and-size.md) - Label positioning (`Before` / `After`) - Size variants (`e-small`) - Combined example #### API Reference 📄 **Read:** [references/radiobutton-api.md](references/radiobutton-api.md) - Property reference table - Methods (`click`, `focusIn`, `destroy`) - Event signatures - Tag helper attribute syntax #### Accessibility 📄 **Read:** [references/radiobutton-accessibility.md](references/radiobutton-accessibility.md) - WCAG 2.2 AA compliance - Semantic HTML with `fieldset` / `legend` - WAI-ARIA attributes - Keyboard navigation (arrow keys for group navigation) - Screen reader support --- ### Quick Start **1. Install NuGet package:** ``` Install-Package Syncfusion.EJ2.AspNet.Core ``` **2. Register Tag Helper** in `~/Pages/_ViewImports.cshtml`: ```cshtml @addTagHelper *, Syncfusion.EJ2 ``` **3. Add CSS and script** in `~/Pages/Shared/_Layout.cshtml`: ```html ``` **4. Add Script Manager** at end of ``: ```html ``` **5. Render the RadioButton:** ```cshtml

``` --- ### Common Patterns #### RadioButton Group with Form Submission ```cshtml ``` ```csharp public async Task OnPostAsync() { string choice = Request.Form["choice"]; // Process the selected value return Page(); } ``` #### Disabled RadioButton ```cshtml ``` ## DropDownButton The **DropDownButton** component is a button that opens a popup menu when clicked. It supports items with icons, separators, disabled items, navigation URLs, and event handling for item selection. ### Navigation Guide #### Getting Started 📄 **Read:** [references/dropdownbutton-getting-started.md](references/dropdownbutton-getting-started.md) - Prerequisites and NuGet package installation - Tag helper registration in `_ViewImports.cshtml` - Stylesheet and script CDN setup in `_Layout.cshtml` - Script manager registration - Basic dropdown button rendering with `` - Binding items from controller via `List