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 `<ejs-scripts>` - Basic button rendering with `<ejs-button>` - 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 <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" /> <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script> ``` **4. Add Script Manager** at end of `<body>`: ```html <ejs-scripts></ejs-scripts> ``` **5. Render the Button:** ```cshtml <ejs-button id="btn" cssClass="e-primary" content="Click Me"></ejs-button> ``` --- ### Common Patterns #### Primary Action Button ```cshtml <ejs-button id="submit" cssClass="e-primary" type="submit" content="Save Changes"></ejs-button> ``` #### Danger Action Button ```cshtml <ejs-button id="delete" cssClass="e-danger" onclick="confirmDelete()" content="Delete"></ejs-button> ``` #### Icon Button ```cshtml <ejs-button id="edit" cssClass="e-small" iconCss="e-icons e-edit-icon"></ejs-button> ``` #### Disabled Button ```cshtml <ejs-button id="btn" disabled="true" content="Cannot Click"></ejs-button> ``` #### Form Submission ```cshtml <form> <ejs-switch id="switch1" name="wifi" value="on" checked="true"></ejs-switch> <ejs-button id="submit" content="Submit"></ejs-button> </form> ``` ## 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 <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" /> <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script> ``` **4. Add Script Manager** at end of `<body>`: ```html <ejs-scripts></ejs-scripts> ``` **5. Render the ButtonGroup:** ```cshtml <div class="e-btn-group"> <ejs-button id="btn1" content="HTML"></ejs-button> <ejs-button id="btn2" content="CSS"></ejs-button> <ejs-button id="btn3" content="JavaScript"></ejs-button> </div> ``` --- ### Common Patterns #### Vertical ButtonGroup ```cshtml <div class="e-btn-group e-vertical"> <ejs-button id="btn1" content="Top"></ejs-button> <ejs-button id="btn2" content="Middle"></ejs-button> <ejs-button id="btn3" content="Bottom"></ejs-button> </div> ``` #### Segmented Control ```cshtml <div class="e-btn-group"> <ejs-button id="left" cssClass="e-outline" content="Left"></ejs-button> <ejs-button id="center" cssClass="e-outline" content="Center"></ejs-button> <ejs-button id="right" cssClass="e-outline" content="Right"></ejs-button> </div> ``` #### Toolbar with Multiple Groups ```cshtml <div class="e-toolbar"> <div class="e-btn-group"> <ejs-button id="bold" iconCss="e-icons e-bold-icon"></ejs-button> <ejs-button id="italic" iconCss="e-icons e-italic-icon"></ejs-button> <ejs-button id="underline" iconCss="e-icons e-underline-icon"></ejs-button> </div> <div class="e-btn-group"> <ejs-button id="left" iconCss="e-icons e-align-left-icon"></ejs-button> <ejs-button id="center" iconCss="e-icons e-align-center-icon"></ejs-button> </div> </div> ``` ## 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 `<ejs-checkbox>` - 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 <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" /> <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script> ``` **4. Add Script Manager** at end of `<body>`: ```html <ejs-scripts></ejs-scripts> ``` **5. Render the Checkbox:** ```cshtml <ejs-checkbox id="chk1" label="I agree to the terms"></ejs-checkbox> ``` --- ### Common Patterns #### Checkbox with Form Submission ```cshtml <form method="post">