AppearancePremium
The KendoReact SpeechToTextButton provides a variety of options to customize its appearance to match your application's design.
You can configure each individual aspect of the appearance of the SpeechToTextButton.
- Configure the size
- Configure the border radius
- Configure the fill mode
- Configure the theme color
- Customizing further the button's styling
- Customizing the active state styling
The following example demonstrates all available appearance options of the SpeechToTextButton in action.
Size
The size property controls the size of the SpeechToTextButton. The available options are:
small—A smaller-sized buttonmedium(default)—A medium-sized buttonlarge—A larger-sized button
Border Radius
The rounded property controls the corner radius of the button. The available options are:
small—Slightly rounded cornersmedium(default)—Moderately rounded cornerslarge—Prominently rounded cornersfull—Fully rounded corners (creates a circular or pill-shaped button)
Fill Mode
The fillMode property determines how the button is filled with color. The available options are:
solid(default)—Button with a solid background coloroutline—Button with a colored outline and transparent backgroundflat—Button with no background or border, but colored textlink—Button that appears like a link but maintains button behavior
Theme Colors
The themeColor property determines the color scheme of the button. The available options are:
base(default)—The base theme colorprimary—The primary theme colorsecondary—The secondary theme colortertiary—The tertiary theme colorinfo—The information theme color (typically blue)success—The success theme color (typically green)warning—The warning theme color (typically yellow/orange)error—The error theme color (typically red)
Custom Styling
You can apply custom styles to the SpeechToTextButton using the style and className properties:
Active State Styling
When speech recognition is active, the SpeechToTextButton automatically adds the k-listening CSS class and changes its icon to a stop icon. You can use this class to apply custom styles for the active state: