How to change color of Ripple effect of the SfButton control?

[Lionel LOSCOS]

Hi,

I'm currently looking for a way to change the ripple effect color in the MAUI SfButton.

I've tried to add an EffectView inside the button to achieve this but it consumes the Tap event and then the Button's Click never fires.

Thank you in advance for your help.

[Priyadharshni Murugan]

Hi Lionel,           

We’ve reviewed your request, and currently, the SfButton control in .NET MAUI does not offer built-in support for customizing the ripple effect color. Properties such as ripple color, duration, or animation style are not directly configurable. The only available option is to enable or disable the ripple effect using the EnableRippleEffect property.

Regarding your approach of placing an EffectView inside the button — you're absolutely right. Embedding an EffectView within the SfButton intercepts touch gestures, which prevents the button’s Clicked event from firing. This occurs because the EffectView handles the tap interaction before it reaches the button, blocking event propagation.

As an alternative, we recommend using theme keys to customize the ripple effect. Specifically, you can use the SfEffectsViewRippleBackground theme key to change the ripple background color. Here's a sample configuration for your reference:

<Application.Resources>

    <ResourceDictionary>

        <ResourceDictionary.MergedDictionaries>

            <ResourceDictionary Source="Resources/Styles/Colors.xaml" />

            <ResourceDictionary Source="Resources/Styles/Styles.xaml" />

            <syncTheme:SyncfusionThemeResourceDictionary />

 

            <!-- SfButton Theme -->

            <ResourceDictionary>

                <x:String x:Key="SfButtonTheme">CommonTheme</x:String>

                <Color x:Key="SfButtonNormalBackground">White</Color>

                <Color x:Key="SfButtonHoverBackground">White</Color>

                <Color x:Key="SfButtonPressedBackground">White</Color>

                <Color x:Key="SfButtonNormalTextColor">Black</Color>

                <Color x:Key="SfButtonHoverTextColor">Black</Color>

                <Color x:Key="SfButtonPressedTextColor">Black</Color>

            </ResourceDictionary>

 

            <!-- Ripple Effect Theme -->

            <ResourceDictionary>

                <x:String x:Key="SfEffectsViewTheme">CommonTheme</x:String>

                <Color x:Key="SfEffectsViewRippleBackground">Yellow</Color>

            </ResourceDictionary>

        </ResourceDictionary.MergedDictionaries>

    </ResourceDictionary>

</Application.Resources>

For more details on available theme keys, please refer to the official Syncfusion MAUI documentation: Theme Keys in Syncfusion MAUI

Feel free to reach out if you need further assistance!

Regards,

Priyadharshni M