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.
What this skill does
# Syncfusion Blazor Buttons Components
## Table of Contents
- [When to Use This Skill](#when-to-use-this-skill)
- [Components Overview](#components-overview)
- [Common Setup and Installation](#common-setup-and-installation)
- [Documentation and Navigation Guide](#documentation-and-navigation-guide)
- [Common Patterns Across Components](#common-patterns-across-components)
- [Shared Configuration](#shared-configuration)
- [Common Use Cases](#common-use-cases)
---
## Components Overview
The **Syncfusion.Blazor.Buttons** package provides 11 comprehensive button components:
### Core Buttons
1. **Button (SfButton)** - Standard button with multiple types, styles, icons, and states
2. **ButtonGroup (SfButtonGroup)** - Grouped button controls with selection modes
3. **CheckBox (SfCheckBox)** - Tri-state checkbox with checked, unchecked, and indeterminate states
4. **RadioButton (SfRadioButton)** - Radio button for mutually exclusive selections
5. **ToggleSwitch (SfSwitch)** - On/off toggle switch control
### Interactive Buttons
6. **DropdownMenu (SfDropDownButton)** - Button with dropdown menu options
7. **SplitButton (SfSplitButton)** - Button with primary action and dropdown menu
8. **ProgressButton (SfProgressButton)** - Button with built-in progress indication
### Floating Actions
9. **FloatingActionButton (SfFab)** - Circular floating action button
10. **SpeedDial (SfSpeedDial)** - FAB with expandable action items (linear/radial)
### Chip Components
11. **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:
```bash
# For Button, Chip, FAB, ToggleSwitch
dotnet add package Syncfusion.Blazor.Buttons
# For DropdownMenu, SplitButton, ProgressButton, ButtonGroup, SpeedDial
dotnet add package Syncfusion.Blazor.SplitButtons
# Required theme package
dotnet add package Syncfusion.Blazor.Themes
```
### Setup Steps (Common for All)
**1. Add Namespaces** (`~/_Imports.razor`):
```csharp
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.SplitButtons
```
**2. Register Service** (`~/Program.cs`):
```csharp
using Syncfusion.Blazor;
builder.Services.AddSyncfusionBlazor();
```
**3. Add Theme and Script** (`~/index.html` or `~/App.razor`):
```html
<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
📄 **Read:** [references/button-features.md](references/button-features.md)
- 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
📄 **Read:** [references/button-styling.md](references/button-styling.md)
- CSS class customization
- Appearance customization
- Block buttons
- Rounded corners
- RTL (right-to-left) support
- Theme integration
- Color schemes and variations
- Responsive design patterns
📄 **Read:** [references/button-advanced-features.md](references/button-advanced-features.md)
- 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
📄 **Read:** [references/radio-button-features.md](references/radio-button-features.md)
- 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
📄 **Read:** [references/radio-button-styling.md](references/radio-button-styling.md)
- 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
📄 **Read:** [references/radio-button-advanced-features.md](references/radio-button-advanced-features.md)
- 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
📄 **Read:** [references/checkbox-features.md](references/checkbox-features.md)
- 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
📄 **Read:** [references/checkbox-styling.md](references/checkbox-styling.md)
- 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
📄 **Read:** [references/checkbox-advanced-features.md](references/checkbox-advanced-features.md)
- 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
📄 **Read:** [references/button-group-features.md](references/button-group-features.md)
- 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
📄 **Read:** [references/button-group-styling.md](references/button-group-styling.md)
- Appearance customization
- Button types and styles within groups
- Icons in button groups
- Size variations
- Custom CSS classes
- Theme integration
📄 **Read:** [references/button-group-advanced-features.md](references/button-group-advanced-features.md)
- Accessibility features
- Keyboard navigation
- Selection state management
- Event handling patterns
- Best practices for button groups
---
### Chip Component
📄 **Read:** [references/chip-features.md](references/chip-features.md)
- 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
📄 **Read:** [references/chip-styling.md](references/chip-styling.md)
- Appearance customization
- Color variations
- Size options
- Custom CSS classes
- Icon and avatar styling
- Theme integration
- Responsive design
📄 **Read:** [references/chip-advanced-features.md](references/chip-advanced-features.md)
- Accessibility support
- Keyboard navigation
- Custom template support
- State management patterns
- Event handling
- Best practices
---
### Dropdown Menu Component
📄 **Read:** [references/dropdown-menu-features.md](references/dropdown-menu-features.md)
- 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 behavioRelated in Design
contribute
IncludedLocal-only OSS contribution command center. Auto-refreshes the user's in-flight PR and issue state on invoke so conversations start with full context — no need to brief Claude on what's in flight. Helps the user find issues to contribute to on GitHub, builds per-repo dossiers of what each upstream expects (CLA, DCO, branch convention, AI policy, draft-first, review bots, issue templates), runs deterministic gates before any external action so AI-assisted contributions don't reach maintainers as slop. State is markdown-only: candidate files at ~/.contribute-system/candidates/, repo dossiers at ~/.contribute-system/research/, append-only event log at ~/.contribute-system/log.jsonl. No database, no cloud calls. Use when the user asks about their PRs / issues / contributions, wants to find new work to take on, claim an issue, build/refresh a repo's dossier, or draft a Design Issue or PR. Trigger with "/contribute", "what's my PR status", "find a contribution", "claim issue X", "draft a Design Issue for Y", "refresh dossier for Z".
architectural-analysis
IncludedUser-triggered deep architectural analysis of a codebase or scoped subtree across eight modes — information architecture, data flow, integration points, UI surfaces, interaction patterns, data model, control flow, and failure modes. This skill should be used when the user asks to "diagram this codebase," "map the architecture," "show the data flow," "give me an ERD," "trace control flow," "find the integration points," "verify the layout pattern," "audit the UX architecture," or any similar request whose primary deliverable is mermaid diagrams plus cited reports under docs/architecture/. Dispatches haiku/sonnet sub-agents in parallel for per-mode exploration, then verifies every citation mechanically before any node lands in a diagram. Not for one-off prose explanations of code (use code-explanation) or for high-level system design from scratch (use system-design).
mcp
IncludedModel Context Protocol (MCP) server development and tool management. Languages: Python, TypeScript. Capabilities: build MCP servers, integrate external APIs, discover/execute MCP tools, manage multi-server configs, design agent-centric tools. Actions: create, build, integrate, discover, execute, configure MCP servers/tools. Keywords: MCP, Model Context Protocol, MCP server, MCP tool, stdio transport, SSE transport, tool discovery, resource provider, prompt template, external API integration, Gemini CLI MCP, Claude MCP, agent tools, tool execution, server config. Use when: building MCP servers, integrating external APIs as MCP tools, discovering available MCP tools, executing MCP capabilities, configuring multi-server setups, designing tools for AI agents.
react-native-skia
IncludedDesign, build, debug, and optimise high-polish animated graphics in React Native or Expo using @shopify/react-native-skia, Reanimated, and Gesture Handler. Use when the user wants canvas-driven UI, shaders, paths, rich text, image filters, sprite fields, Skottie, video frames, snapshots, web CanvasKit setup, or performance tuning for custom motion-heavy elements such as loaders, hero art, cards, charts, progress indicators, particle systems, or gesture-driven surfaces. Also use when the user asks for fluid, glow, glass, blob, parallax, 60fps/120fps, or GPU-friendly animated effects in React Native, even if they do not explicitly say "Skia". Do not use for ordinary form/layout work with standard views.
plaid
IncludedProduct Led AI Development — guides founders from idea to launched product. Six capabilities: Idea (discover a product idea), Validate (pressure-test the idea against fatal flaws, problem reality, competition, and 2-week MVP feasibility), Plan (vision intake + document generation), Design (translate image references into a design.md spec), Launch (go-to-market strategy), and Build (roadmap execution). Use when someone says "PLAID", "plaid idea", "help me find an idea", "product idea", "idea from my business", "idea from my expertise", "plaid validate", "validate my idea", "pressure-test", "is this idea good", "find fatal flaws", "validate the problem", "plan a product", "define my vision", "generate a PRD", "product strategy", "plaid design", "design from image", "translate image to design", "create design.md", "extract design tokens", "plaid launch", "go-to-market", "launch plan", "GTM strategy", "launch playbook", "plaid build", "build the app", "start building", or "execute the roadmap".
nextjs-framer-motion-animations
IncludedAdds production-safe Motion for React or Framer Motion animations to Next.js apps, including reveal, hover and tap micro-interactions, whileInView, stagger, AnimatePresence, layout and layoutId transitions, reorder, scroll-linked UI, and lightweight route-content transitions. Use when the user asks to add, refactor, or debug Motion or Framer Motion in App Router or Pages Router codebases, especially around server/client boundaries, reduced motion, LazyMotion, bundle size, hydration, or route transitions. Avoid for GSAP-style timelines, WebGL or 3D scenes, heavy scroll storytelling, or CSS-only effects unless Motion is explicitly requested.