SpeechToText Button Customization
The Kendo UI for Vue SpeechToText Button provides a variety of options to customize its appearance to match your application's design.
Button Appearance
The SpeechToText Button inherits its styling capabilities from the Kendo UI for Vue Button component, providing consistent styling options across the library.
Size
The size prop controls the size of the SpeechToText Button. The available options are:
small- A smaller-sized buttonmedium(default) - A medium-sized buttonlarge- A larger-sized button
Fill Mode
The fillMode prop 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
Rounded Style
The rounded prop 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)
Theme Color
The themeColor prop 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 SpeechToText Button using the style and class attributes:
Active State Styling
When speech recognition is active, the SpeechToText Button 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: