Syncfusion.AspNetCore.Buttons 34.1.31

Syncfusion® ASP.NET Core Button Components

A comprehensive suite of ASP.NET Core 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.

Supported Components

This package includes the following components:

• Button
• CheckBox
• Chips
• Radio Button
• Toggle Switch
• Floating Action Button
• Speed Dial

ASP.NET Core Button Component

The ASP.NET Core 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
• API Reference
• Live Demos

ASP.NET Core CheckBox Component

The ASP.NET Core 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
• API Reference
• Live Demos

ASP.NET Core Chips Component

The ASP.NET Core 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
• API Reference
• Live Demos

ASP.NET Core Radio Button Component

The ASP.NET Core 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
• API Reference
• Live Demos

ASP.NET Core Toggle Switch Component

The ASP.NET Core Toggle Switch 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
• API Reference
• Live Demos

ASP.NET Core Floating Action Button Component

The ASP.NET Core 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

Documentation:

• Getting Started
• API Reference
• Live Demos

ASP.NET Core Speed Dial Component

The ASP.NET Core Speed Dial Component extends the Floating Action Button to display a list of related action buttons on interaction.

Key Features:

• Action List: Display multiple related actions from a single FAB
• Icon Integration: Built-in Material and Bootstrap icon support
• Position Flexibility: Multiple position options for the speed dial group
• Animation: Smooth reveal animation for action buttons
• Custom Templates: Template support for complex action layouts
• Accessibility: Full keyboard navigation and ARIA support
• Event Handling: Open, close, and item selection events

Documentation:

• Getting Started
• API Reference
• Live Demos

Common Setup

All Syncfusion ASP.NET Core controls share the same foundational setup steps:

1. Install NuGet Package

Install-Package Syncfusion.AspNetCore.Buttons

2. Register Tag Helper

Add the following to ~/Pages/_ViewImports.cshtml or ~/Views/_ViewImports.cshtml:

@addTagHelper *, Syncfusion.AspNetCore.Buttons

3. Add Stylesheet & Script References

In your layout file (~/Pages/Shared/_Layout.cshtml):

<head>
    
    <link rel="stylesheet" href="_content/Syncfusion.AspNetCore.Themes/styles/fluent2.css" />
    
   


    <script src="_content/Syncfusion.AspNetCore.Buttons/scripts/sf-button.min.js"></script>
    
    <script src="_content/Syncfusion.AspNetCore.Buttons/scripts/sf-check-box.min.js"></script>

    
    <script src="_content/Syncfusion.AspNetCore.Buttons/scripts/sf-chips.min.js"></script>
    
    
    <script src="_content/Syncfusion.AspNetCore.Buttons/scripts/sf-radio-button.min.js"></script>

    
    <script src="_content/Syncfusion.AspNetCore.Buttons/scripts/sf-switch.min.js"></script>
    
    
    <script src="_content/Syncfusion.AspNetCore.Buttons/scripts/sf-floating-action-button.min.js"></script>

    
    <script src="_content/Syncfusion.AspNetCore.Buttons/scripts/sf-speed-dial.min.js"></script>
</head>

4. Register Script Manager

In your layout file (~/Pages/Shared/_Layout.cshtml), At the end of your <body> tag:

<ejs-scripts></ejs-scripts>

Quick Start

Step 1: Create a Model

using System.Collections.Generic;

public class ButtonDemoModel
{
    public string SelectedOption { get; set; }
    public List<string> ButtonOptions { get; set; } = new List<string> 
    { 
        "Option 1", "Option 2", "Option 3" 
    };
}

Step 2: Create a PageModel

Create ~/Pages/Index.cshtml.cs:

using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;

public class IndexModel : PageModel
{
    public ButtonDemoModel ButtonDemo { get; set; } = new ButtonDemoModel();

    public void OnGet()
    {
        // Initialize button demo model
    }

    public void OnPostButtonClick()
    {
        // Handle button click
    }
}

Step 3: Create the View

Create ~/Pages/Index.cshtml:

@page
@model IndexModel

<div class="container mt-5">
    <h2>Button Components Demo</h2>

    
    <div class="mb-3">
        <h5>Basic Button</h5>
        <ejs-button id="normalButton" content="Click Me"></ejs-button>
    </div>

    
    <div class="mb-3">
        <h5>CheckBox</h5>
        <ejs-checkbox id="checkbox" label="Accept Terms" checked="false"></ejs-checkbox>
    </div>

    
    <div class="mb-3">
        <h5>Radio Button Group</h5>
        <ejs-radiobutton id="radio1" label="Credit Card" name="paymentOptions" value="card" checked="true"></ejs-radiobutton>
        <ejs-radiobutton id="radio2" label="Debit Card" name="paymentOptions" value="debit"></ejs-radiobutton>
    </div>

    
    <div class="mb-3">
        <h5>Toggle Switch</h5>
        <ejs-switch id="toggleSwitch" checked="false"></ejs-switch>
    </div>

    
    <div class="mb-3">
        <h5>Chips</h5>
        <ejs-chiplist id="chip" text="John Doe"></ejs-chiplist>
    </div>
</div>

Step 4: Run the Application

Press Ctrl+F5 to run the application in your browser.

Support

• Submit a support ticket

• 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