New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Appearance

  • Demo Configurator
Size
Theme Color
FillMode
Rounded
Icon
Stop Icon

The WebForms SpeechToTextButton offers various options that allow you to control its appearance, such as size, theme color, fill mode, border radius, icon and stop icon.

Use the styling options showcased in this demo to modify the overall appearance of the component. You can review and copy the widget's configuration with all styling options from the source code of the demo.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"  Inherits="SpeechToTextButton_Appearance_DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg flex-center" runat="server">
        <telerik:RadSpeechToTextButton ID="RadSpeechToTextButton1" runat="server" ThemeColor="Base" />
    </div>

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Size" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="cbSize" runat="server" AutoPostBack="false" AllowCustomText="false" Size="Medium" OnClientSelectedIndexChanged="changeSize">
                                <Items>
                                    <telerik:RadComboBoxItem Text="None" Value="None" />
                                    <telerik:RadComboBoxItem Text="Small" Value="Small" />
                                    <telerik:RadComboBoxItem Text="Medium" Value="Medium" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Large" Value="Large" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Title="Theme Color" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="cbThemeColor" runat="server" AutoPostBack="false" AllowCustomText="false" Size="Medium" OnClientSelectedIndexChanged="changeThemeColor">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Base" Value="Base" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Primary" Value="Primary" />
                                    <telerik:RadComboBoxItem Text="Secondary" Value="Secondary" />
                                    <telerik:RadComboBoxItem Text="Tertiary" Value="Tertiary" />
                                    <telerik:RadComboBoxItem Text="Info" Value="Info" />
                                    <telerik:RadComboBoxItem Text="Success" Value="Success" />
                                    <telerik:RadComboBoxItem Text="Warning" Value="Warning" />
                                    <telerik:RadComboBoxItem Text="Error" Value="Error" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Title="FillMode" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="cbFillMode" runat="server" AutoPostBack="false" AllowCustomText="false" Size="Medium" OnClientSelectedIndexChanged="changeFillMode">
                                <Items>
                                    <telerik:RadComboBoxItem Text="None" Value="None" />
                                    <telerik:RadComboBoxItem Text="Solid" Value="Solid" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Outline" Value="Outline" />
                                    <telerik:RadComboBoxItem Text="Flat" Value="Flat" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Title="Rounded" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="cbRounded" runat="server" AutoPostBack="false" AllowCustomText="false" Size="Medium" OnClientSelectedIndexChanged="changeRounded">
                                <Items>
                                    <telerik:RadComboBoxItem Text="None" Value="None" />
                                    <telerik:RadComboBoxItem Text="Small" Value="Small" />
                                    <telerik:RadComboBoxItem Text="Medium" Value="Medium" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Large" Value="Large" />
                                    <telerik:RadComboBoxItem Text="Full" Value="Full" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn5" runat="server" Title="Icon">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="cbIcon" runat="server" AutoPostBack="false" AllowCustomText="false" Size="Medium" OnClientSelectedIndexChanged="changeIcon">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Mic" Value="microphone-outline" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Headset" Value="headset" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn6" runat="server" Title="Stop Icon">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="cbStopIcon" runat="server" AutoPostBack="false" AllowCustomText="false" Size="Medium" OnClientSelectedIndexChanged="changeStopIcon">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Stop" Value="stop-sm" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Pause" Value="pause-sm" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance