Styling Background Color of SendMessageButton in Chat

Updated on Jun 4, 2026

Environment

Version	Product	Author
14.0.0	Telerik UI for .NET MAUI Chat	Dobrinka Yordanova

Description

I want to change the background color of the SendMessageButton in the Chat control when the button is enabled. By default, the background color turns purple after entering text.

This knowledge base article also answers the following questions:

• How to modify the SendButtonStyle in Chat?
• How to change the appearance of the SendMessageButton in Chat?
• How to customize the enabled state of SendMessageButton?

Solution

To achieve this, use the SendButtonStyle property inside the InputAreaStyle of the RadChat control. Use the code snippet below to define a custom style for the button.

1. Define a custom Style for the Send button that you will assign to the SendButtonStyle property.

xaml

<Style x:Key="CustomPromptInputSendButtonStyle" TargetType="telerik:RadTemplatedButton">
    <Setter Property="FontFamily" Value="{x:Static telerik:TelerikFont.Name}" />
    <Setter Property="FontSize" Value="{OnPlatform Default=16, MacCatalyst=12}" />
    <Setter Property="TextColor" Value="#FFFFFF" />
    <Setter Property="Background" Value="Red" />
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="VerticalTextAlignment" Value="Center" />
    <Setter Property="HorizontalTextAlignment" Value="Center" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="Margin" Value="4, 0, 0, 0" />
    <Setter Property="WidthRequest" Value="{OnPlatform Android=40, iOS=36, MacCatalyst=22, WinUI=32}" />
    <Setter Property="HeightRequest" Value="{OnPlatform Android=40, iOS=36, MacCatalyst=22, WinUI=32}" />
    <Setter Property="CornerRadius" Value="{OnPlatform Default=20, iOS=18, MacCatalyst=5, WinUI=4}" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <Setter.Value>
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" />
                    <VisualState x:Name="MouseOver">
                        <VisualState.Setters>
                            <Setter Property="Background" Value="LightGreen" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="FocusedMouseOver">
                        <VisualState.Setters>
                            <Setter Property="Background" Value="LightGreen" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Pressed">
                        <VisualState.Setters>
                            <Setter Property="Background" Value="Green" />
                            <Setter Property="TextColor" Value="#FFFFFF" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="FocusedPressed">
                        <VisualState.Setters>
                            <Setter Property="Background" Value="Green" />
                            <Setter Property="TextColor" Value="#FFFFFF" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Disabled">
                        <VisualState.Setters>
                            <Setter Property="Background" Value="Red" />
                            <Setter Property="TextColor" Value="#99000000" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter.Value>
    </Setter>
</Style>

2. Apply the custom style to the input area of the RadChat control by setting the SendButtonStyle property.

   xaml

   <Style x:Key="ChatInputStyle" TargetType="telerik:RadPromptInput">
       <Setter Property="SendButtonStyle" Value="{StaticResource CustomPromptInputSendButtonStyle}" />
   </Style>
   
   <telerik:RadChat InputAreaStyle="{StaticResource ChatInputStyle}" />

See Also

• Chat Overview