SpeechToTextButton

SpeechToTextButton Overview

The SpeechToTextButton is a UI element designed to initiate voice input and convert spoken words into text upon user interaction. When activated, it listens to the user’s speech and transcribes it in real-time, enabling hands-free text entry and improved accessibility.

It enhances accessibility and provides a natural, faster and intuitive way for users to interact with websites and applications through voice input. The SpeechToTextButton component is commonly used for dictation, voice commands, live captions, and conversational UIs.

Live Demo

Appearance

The SpeechToTextButton component includes built-in styling options that ensure visual consistency and flexibility within the UI.

Its appearance reflects its interactive role, with clear differentiation between the normal and active states — for example, through icon changes, accent colors, or changes in opacity indicating active voice input. The component supports customization of key visual properties — such as state, size, fill mode, theme color, border radius, and iconography — allowing both designers and developers to align it with the overall design language and application context.

States

Depending on the action you want to imply through its appearance, the Telerik and Kendo UI SpeechToTextButton component can acquire the following states which you can set by using the following classes:

• A SpeechToTextButton in its normal state indicates that it is idle and ready to start capturing voice input.

• k-active—In the active state, the component signals that it is listening by changing its icon and applying an opacity-based animation to communicate ongoing speech recognition.
  
  The next image shows the normal state of a SpeechToTextButton:

  

  1. An Icon-only SpeechToTextButton in its normal state
  2. Icon and Text SpeechToTextButton in its normal state
  3. A Text-only SpeechToTextButton in its normal state

  The next image shows the active state of a SpeechToTextButton:

  

  1. An Icon-only SpeechToTextButton in its active state
  2. Icon and Text SpeechToTextButton in its active state
  3. A Text-only SpeechToTextButton in its active state

Anatomy

The anatomy of the SpeechToTextButton component summarizes its constituent elements. Depending on which elements are included, the Telerik and Kendo UI SpeechToTextButton component can be one of the following types:

Depending on the elements they display, the Telerik and Kendo UI SpeechToTextButton can be any of the following types:

• Icon—An Icon-only SpeechToTextButton component displays a microphone to represent voice input visually.
• Text—A Text-only SpeechToTextButton component provides a clear, descriptive label indicating the action triggered when clicked, enhancing accessibility and clarity.
• Icon-and-text—An Icon-and-Text SpeechToTextButton component combines a voice icon with a label, offering both visual context and explicit messaging to improve user understanding and engagement.

1. An icon-only SpeechToTextButton
2. An icon-and-text SpeechToTextButton
3. A text-only SpeechToTextButton

The next image shows the anatomy of a SpeechToTextButton and includes the following elements:

1. Container
2. Icon (optional)
3. Text label

Size

The SpeechToTextButton component supports a size configuration option that controls the overall dimensions of the rendered button. This ensures flexibility across different contexts while maintaining consistency with the design system. In addition to the predefined sizes, the component also allows custom values for full design flexibility.

size provides the following available options:

• small—Renders a small SpeechToTextButton, suitable for embedding inside small-sized form fields such as search bars or text inputs.

  The small Telerik and Kendo UI SpeechToTextButton component uses the same typographic style as the medium size but applies a reduced vertical padding of $kendo-spacing, 0.5 to achieve the smaller height. This ensures visual alignment with dense layouts while remaining accessible.

• medium—Renders the medium SpeechToTextButton size.

  The medium size configuration is the base according to which the small and large options are specified. The medium Telerik and Kendo UI SpeechToTextButton component uses the same typographic style as the small size and is well-suited for general usage across forms, text areas, and editors. Vertical paddings are set to $kendo-spacing, 1 to create a balanced height that works across most layouts.

• large—Renders an enlarged SpeechToTextButton, suitable for adaptive components and touch-first devices such as tablets and mobile interfaces.

  The large Telerik and Kendo UI SpeechToTextButton component increases accessibility by meeting recommended touch-area dimensions. It achieves this by doubling vertical paddings to $kendo-spacing, 2 and applying a larger typographic style with increased font size and line height. This variant is ideal for prominent entry points where voice input is a primary action.

• none—Does not set a size and allows you to add your own, custom value.

1. Small
2. Medium
3. Large

Color

The SpeechToTextButton component supports the theme-color configuration, which allows users to apply any of the available built-in color roles. This ensures consistency with the broader design system while maintaining flexibility for different contexts.

themeColor provides the following available options:

• base—In its normal state, the SpeechToTextButton typically appears in base color, signaling that it is idle and not yet activated. This palette keeps the button unobtrusive until triggered.
• primary—The SpeechToTextButton styled with the primary color communicates its role as a key entry point for voice interaction, ensuring visibility and alignment with brand identity. Use the primary color only when voice input is a primary action, to avoid unnecessary visual emphasis.
• secondary—A secondary-colored SpeechToTextButton indicates reduced emphasis. This option is useful when the button is optional or serves as a supporting feature rather than the primary action.
• tertiary—The tertiary color suggests minimal emphasis and is often borderless. It is appropriate in dense layouts or when voice input is a low-priority option.
• info—The SpeechToTextButton is rarely styled with the info color, as this role is primarily intended for notifications or contextual status. However, it may be applied in specific, case-dependent scenarios where voice input is framed as auxiliary or informational.
• success—Similarly, success colors are generally reserved for system feedback, not action triggers. While rarely applied, they may be used in specialized workflows to signal positive readiness or confirmation of speech functionality.
• warning—Warning colors are typically reserved for actions requiring caution. Styling the SpeechToTextButton with this role is not common and should only be considered if activating speech input could trigger significant or irreversible changes.
• error—The SpeechToTextButton may use the error color in failure states (for example, when the microphone is unavailable or voice recognition cannot be started), providing clear feedback to the user.
• none—Does not apply a predefined themeColor, allowing designers and developers to define a custom color that aligns with application-specific requirements.

Fill Mode

Fill modes define the visual style of a component and communicate hierarchy between components of the same type.

The SpeechToTextButton component provides the fillMode configuration option, allowing users to control how color is applied to the rendered button. The component also supports custom fill-mode values for added flexibility.

fillMode provides the following available options:

• solid—A solid SpeechToTextButton emphasizes the action strongly, drawing the user’s attention to a primary task or feature.
• outline—An outline SpeechToTextButton provides medium emphasis, signaling secondary or complementary actions. It reduces visual noise when multiple actions of equal importance are displayed on the page.
• flat—A flat SpeechToTextButton places minimal emphasis, as it has no background or border. It is typically used to avoid distracting users from primary content, such as in dialogs, toolbars, or inline placements.
• none—Does not set a fillMode and allows you to add your own, custom value.

1. Solid
2. Outline
3. Flat

Border Radius

The SpeechToTextButton provides the rounded option that enables you to control the border radius of the rendered button. The defined value for the border radius significantly affects the look-and-feel of the UI. SpeechToTextButton also provide options for border-radius customization.

rounded provides the following available options:

• small—Renders a border radius of 2 px.
• medium—Renders a border radius of 4 px.
• large—Renders a border radius of 6 px.
• full—Renders a border radius of 9999 px.
• none—Does not set a rounded value and allows you to customize the configuration.

1. Small
2. Medium
3. Large
4. Full

Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

Kendo UI for Angular SpeechToTextButtonFind more information about the Kendo UI for Angular SpeechToTextButton in the official product documentation of the component.

Telerik UI for Blazor SpeechToTextButtonFind more information about the Telerik UI for Blazor SpeechToTextButton in the official product documentation of the component.

Kendo UI for jQuery SpeechToTextButtonFind more information about the Kendo UI for jQuery SpeechToTextButton in the official product documentation of the component.

KendoReact SpeechToTextButtonFind more information about the KendoReact SpeechToTextButton in the official product documentation of the component.

Kendo UI for Vue SpeechToTextButtonFind more information about the Kendo UI for Vue SpeechToTextButton in the official product documentation of the component.

Telerik UI for ASP.NET Core SpeechToTextButtonFind more information about the Telerik UI for ASP.NET Core SpeechToTextButton component.

Telerik UI for ASP.NET MVC SpeechToTextButtonFind more information about the Telerik UI for ASP.NET MVC SpeechToTextButton component.