syncfusion-maui-button

$npx mdskill add syncfusion/maui-ui-components-skills/syncfusion-maui-button

Implement and customize Syncfusion .NET MAUI Button control.

  • Creates and styles buttons with icons, images, and visual states.
  • Depends on Syncfusion.Maui.Buttons NuGet package and .NET MAUI.
  • Selects features based on button type, styling, and event needs.
  • Provides XAML code, C# examples, and configuration guidance.

SKILL.md

.github/skills/syncfusion-maui-buttonView on GitHub ↗
---
name: syncfusion-maui-button
description: Implements and customize Syncfusion .NET MAUI Button (SfButton) control. Use when working with MAUI buttons, SfButton implementation, button customization, or visual states. Covers button icons, background images, RTL support, Liquid Glass effects, custom button views, button styling, events, and checkable buttons.
metadata:
  author: "Syncfusion Inc"
  version: "34.1.29"
---

# Implementing .NET MAUI Button

A comprehensive skill for implementing and customizing the Syncfusion .NET MAUI Button (SfButton) control. The SfButton provides rich customization options including icons, background images, visual states, corner radius, and custom content support.

## When to Use This Skill

Use this skill when you need to:
- Install and set up SfButton in a .NET MAUI project
- Create basic or customized buttons with text and icons
- Implement visual states (normal, hovered, pressed, checked, disabled)
- Add background images or custom content to buttons
- Handle button click events
- Create toggle/checkable buttons
- Apply RTL (right-to-left) support
- Implement modern styling with Liquid Glass effects
- Customize button appearance (colors, fonts, borders, padding)
- Troubleshoot button-related issues

## Component Overview

The Syncfusion .NET MAUI Button (SfButton) is a custom button control that extends the standard MAUI button with advanced UI customization capabilities:

**Key Features:**
- **Flexible styling:** Outline, flat, circle, or icon button types
- **Rich content:** Icons, background images, and custom views
- **Visual states:** Built-in support for hover, press, checked, and disabled states
- **Modern effects:** Liquid Glass support for contemporary UI design
- **Accessibility:** RTL support and keyboard navigation
- **Easy integration:** Simple XAML or C# implementation

## Documentation and Navigation Guide

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)

When to read: Installation, initial setup, first-time implementation
- NuGet package installation (`Syncfusion.Maui.Buttons`)
- Handler registration in `MauiProgram.cs`
- Basic button implementation in XAML and C#
- Adding button icons with `ImageSource` and `ShowIcon`
- Setting background images with `BackgroundImageSource`
- Minimal working examples

### Customization and Styling
📄 **Read:** [references/customization.md](references/customization.md)

When to read: Appearance customization, styling buttons, layout control
- Text customization (color, size, font, alignment)
- Background color and border styling
- Corner radius and padding adjustments
- Size control (width, height)
- Image width and positioning
- Alignment options (horizontal, vertical)
- Complete styling examples

### Visual States
📄 **Read:** [references/visual-states.md](references/visual-states.md)

When to read: State-based styling, hover effects, toggle buttons, interactive feedback
- Visual state overview (Normal, Hovered, Pressed, Checked, Disabled)
- Implementing VisualStateManager
- Creating checkable/toggle buttons with `IsCheckable`
- Customizing appearance for each state
- State transition handling
- Complete state management examples

### Advanced Features
📄 **Read:** [references/advanced-features.md](references/advanced-features.md)

When to read: RTL support, modern effects, custom content, events, migration
- Right-to-Left (RTL) language support
- Liquid Glass effect implementation
- Adding custom content views inside buttons
- Click event handling (`Clicked` event)
- Advanced scenarios and combinations
- Migration from older versions

### Troubleshooting
📄 **Read:** [references/troubleshooting.md](references/troubleshooting.md)

When to read: Issues, errors, unexpected behavior, best practices
- Common problems and solutions
- Handler registration errors
- Image loading issues
- Layout and sizing problems
- Visual state not updating
- Platform-specific considerations

More from syncfusion/maui-ui-components-skills

SkillDescription
syncfusion-maui-accordionImplements Syncfusion .NET MAUI Accordion (SfAccordion) - a vertically collapsible panel with stacked headers for expanding/collapsing content. Use when working with accordions, collapsible panels, expandable lists, employee lists with details, or FAQ sections in .NET MAUI applications. Covers AccordionItem configuration, expand modes, and grouped content display.
syncfusion-maui-ai-assistviewImplements Syncfusion .NET MAUI AI AssistView (SfAIAssistView) for AI-powered interactive chat interfaces. Use when working with AI chat interfaces, AI AssistView, SfAIAssistView, conversational UI, or chat with AI responses. Covers integrating AI services, creating chat UIs, implementing conversation flows, managing AI requests/responses, and displaying AI suggestions.
syncfusion-maui-autocompleteImplements and configure Syncfusion .NET MAUI Autocomplete (SfAutocomplete) control for intelligent text input with suggestions. Use when implementing autocomplete, autosuggest, type-ahead search, smart search, or filtered dropdowns in .NET MAUI applications. Covers data binding, filtering modes, custom search logic, AI-powered search, multi-selection with tokens, and UI customization.
syncfusion-maui-avatar-viewImplements Syncfusion .NET MAUI Avatar View (SfAvatarView) for displaying user profile pictures, initials, or group avatars. Use when working with avatar views, profile pictures, user images, initials display, profile icons, or contact images. Ideal for implementing user profile displays, contact lists, chat interfaces, or social feeds.
syncfusion-maui-backdropImplements Syncfusion .NET MAUI Backdrop Page (SfBackdropPage) with back layer and front layer surfaces. Use when working with backdrop pages, SfBackdropPage, back layer, front layer, or reveal/conceal animations. Covers backdrop navigation patterns, header icons, corner shapes, reveal height, layer state events, and liquid glass effect.
syncfusion-maui-badge-viewImplements Syncfusion .NET MAUI Badge View (SfBadgeView) control. Use when adding badge notifications, status indicators, unread counts, or notification overlays to MAUI applications. Covers SfBadgeView setup, badge text customization, position adjustments, animations, predefined symbols, and accessibility features.
syncfusion-maui-barcode-generatorImplements Syncfusion .NET MAUI Barcode Generator (SfBarcodeGenerator) for generating machine-readable barcodes. Use when working with barcodes, barcode generation, QR codes, data matrix, EAN codes, UPC codes, Code128, or Code39. This skill covers both one-dimensional (linear) and two-dimensional (matrix) barcode symbologies with extensive customization options.
syncfusion-maui-busy-indicatorImplements Syncfusion .NET MAUI Busy Indicator (SfBusyIndicator) for showing loading states, data processing, and app activity indicators. Use when displaying loading indicators, busy animations, activity spinners, or processing feedback in .NET MAUI apps. Covers busy indicator setup, animations, and visual feedback during long-running operations.
syncfusion-maui-calendarImplements and customize Syncfusion .NET MAUI Calendar (SfCalendar) control. Use when implementing calendar functionality, date selection (single, multiple, range), or calendar views (month, year, decade, century). Covers date restrictions (min/max dates, EnablePastDates, SelectableDayPredicate), calendar customization, events (ViewChanged, SelectionChanged, Tapped), and header/footer customization.
syncfusion-maui-cardsImplements Syncfusion .NET MAUI Cards (SfCards) - dismissible card views and swipeable card stacks. Use when working with cards, card views, card layouts, swipeable cards, dismissible cards, or card stacks in .NET MAUI. Covers card customization, card events, card data binding, and interactive card components with swipe functionality.