Appearance

In this article, you will find information about the styling options of the Telerik UI for ASP.NET MVC 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)
)

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
• Dark
• Light
• Inverse
• None

The default ThemeColor is Base.

Razor

@(Html.Kendo().SpeechToTextButton()
    .Name("speechButton")
    .ThemeColor(ThemeColor.Base)
)

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)
)

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)
)

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

• Small
• Medium
• Large
• Full
• None

Icons

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-outline 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-sm 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 MVC.

Razor

@(Html.Kendo().SpeechToTextButton()
    .Name("speechButton")
    .Icon("microphone-outline")
    .StopIcon("stop-sm")
)

See Also

• Appearance of the SpeechToTextButton for ASP.NET MVC (Demo)

• Server-Side API of the SpeechToTextButton

• Client-Side API of the SpeechToTextButton