New to Telerik UI for ASP.NET Core? Start a free 30-day trial

Appearance

Updated on May 16, 2026

In this article, you will find information about the styling options of the Telerik UI for ASP.NET Core SpeechToTextButton.

For a live example, visit to the Appearance Demo of the SpeechToTextButton component.

Options

The SpeechToTextButton component provides the following options for styling:

Size()—Configures the overall size of the component.
ThemeColor()—Sets what color will be applied to the component.
FillMode()—Defines how the color is applied to the SpeechToTextButton.
Rounded()—Determines the border radius of the component.
Icon() and StopIcon()—Customize the default icons in the active and inactive states.

Size

To control the size of the SpeechToTextButton, configure the Size() option with any of the following values:

Small
Medium (the default size)
Large
None

Razor
@(Html.Kendo().SpeechToTextButton()
    .Name("speechButton")
    .Size(ComponentSize.Medium)
)
Razor
@addTagHelper *, Kendo.Mvc

<kendo-speechtotextbutton name="speechButton" size="ComponentSize.Medium">
</kendo-speechtotextbutton>

ThemeColor

The ThemeColor() configuration provides a variety of colors that can be applied to the SpeechToTextButton. The available options are:

Base
Primary
Secondary
Tertiary
Info
Success
Warning
Error
Inverse

The default ThemeColor is Base.

Razor
@(Html.Kendo().SpeechToTextButton()
    .Name("speechButton")
    .ThemeColor(ThemeColor.Base)
)
Razor
@addTagHelper *, Kendo.Mvc

<kendo-speechtotextbutton name="speechButton" theme-color="ThemeColor.Base">
</kendo-speechtotextbutton>

FillMode

The FillMode() method specifies how the color is applied to the component. The default SpeechToTextButton fill mode is Solid.

Razor
@(Html.Kendo().SpeechToTextButton()
    .Name("speechButton")
    .FillMode(ButtonFillMode.Solid)
)
Razor
@addTagHelper *, Kendo.Mvc

<kendo-speechtotextbutton name="speechButton" fill-mode="ButtonFillMode.Solid">
</kendo-speechtotextbutton>

The following options are available for the FillMode() configuration:

Solid
Outline
Flat
Link
Clear
None

Rounded

The border radius of the SpeechToTextButton can be customized through the Rounded() method. The default option is Medium.

Razor
@(Html.Kendo().SpeechToTextButton()
    .Name("speechButton")
    .Rounded(Rounded.Medium)
)
Razor
@addTagHelper *, Kendo.Mvc

<kendo-speechtotextbutton name="speechButton" rounded="Rounded.Medium">
</kendo-speechtotextbutton>

The following values are available for the Rounded() option:

Small
Medium
Large
Full
None

The SpeechToTextButton displays different icons based on its operational state. When the component is in inactive mode (ready to start recording), it displays the microphone icon by default. You can customize this using the Icon() configuration option to specify a different icon that better fits your application's design.

During active mode (while recording speech), the component automatically switches to the stop icon to indicate that recording is in progress and can be stopped. The StopIcon() option allows you to override this default behavior with a custom icon of your choice.

Select the desired icons from the comprehensive list of available built-in icons in Telerik UI for ASP.NET Core.

Razor
@(Html.Kendo().SpeechToTextButton()
    .Name("speechButton")
    .Icon("microphone")
    .StopIcon("stop")
)
Razor
@addTagHelper *, Kendo.Mvc

<kendo-speechtotextbutton name="speechButton"
    icon="microphone"
    stop-icon="stop">
</kendo-speechtotextbutton>