docs(SpeechToTextButton): add SpeechToTextButton docs

components/speechtotextbutton/appearance.md

@@ -0,0 +1,75 @@
+---
+title: Appearance
+page_title: SpeechToTextButton Appearance
+description: Customize the appearance of the SpeechToTextButton component in Blazor applications.
+slug: speechtotextbutton-appearance
+tags: blazor, speech recognition, appearance, customization
+published: true
+position: 2
+---
+
+# SpeechToTextButton Appearance
+
+You can customize the appearance of the `SpeechToTextButton` component by using its built-in parameters and CSS classes. The component supports the same appearance options as the standard Telerik Button.
+
+## Size
+
+You can increase or decrease the size of the button by setting the `Size` parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.Size` class. 
+
+To review all available values for the `Size` parameter, see the [Button Size API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.ThemeConstants.Button.Size.html).
+
+**Example of Setting the Button Size**
+
+<demo metaUrl="client/speechtotextbutton/size/" height="150"></demo>
+
+## Fill Mode
+
+The `FillMode` toggles the background and border of the TelerikSpeechToTextButton. You can set the parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.FillMode` class.
+
+To review all available values for the `FillMode` parameter, see the [Button FillMode API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.ThemeConstants.Button.FillMode.html).
+
+**Example of Setting the Fill Mode**
+
+<demo metaUrl="client/speechtotextbutton/fillmode/" height="150"></demo>
+
+## Theme Color
+
+The color of the button is controlled through the `ThemeColor` parameter. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.ThemeColor` class.
+
+To review all available values for the `ThemeColor` parameter, see the [Button ThemeColor API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.ThemeConstants.Button.ThemeColor.html).
+
+**Example of Setting the Theme Color**
+
+<demo metaUrl="client/speechtotextbutton/themecolor/" height="150"></demo>
+
+## Rounded
+
+The `Rounded` parameter applies the border-radius CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class.
+
+To review all available values for the `Rounded` parameter, see the [Button Rounded API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.ThemeConstants.Button.Rounded.html).
+
+**Example of Setting the Rounded Parameter**
+
+<demo metaUrl="client/speechtotextbutton/rounded/" height="150"></demo>
+
+## Icon
+
+Set the `Icon` parameter to display an icon. You can use a predefined Telerik icon or a custom one.
+
+**Example of Customizing the Icon**
+
+<demo metaUrl="client/speechtotextbutton/icon/" height="150"></demo>
+
+## Custom Styles
+
+Use the `Class` parameter to apply custom CSS classes. You can further style the button by targeting these classes.
+
+**Example of Custom Styling**
+
+<demo metaUrl="client/speechtotextbutton/customstyle/" height="150"></demo>
+
+## See Also
+
+- [SpeechToTextButton Overview](slug:speechtotextbutton-overview)
+- [SpeechToTextButton Events](slug:speechtotextbutton-events)
+- [SpeechToTextButton Integration](slug:speechtotextbutton-integration)

components/speechtotextbutton/events.md

@@ -0,0 +1,45 @@
+---
+title: Events
+page_title: SpeechToTextButton Events
+description: Learn about the events that the SpeechToTextButton component emits and how to handle them in Blazor applications.
+slug: speechtotextbutton-events
+tags: blazor, speech recognition, events
+published: true
+position: 3
+---
+
+# SpeechToTextButton Events
+
+The `SpeechToTextButton` component emits events that notify you about speech recognition results, errors, and state changes. Use these events to update the UI, display messages, or process the recognized speech.
+
+## OnResult
+
+The `OnResult` event fires when the component recognizes speech and produces a result. Use this event to access the recognized phrases, alternatives, and confidence scores.
+
+To review all available properties of the event arguments for `OnResult`, see the [`SpeechToTextButtonResultEventArgs` API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.SpeechToTextButtonResultEventArgs.html).
+
+**Example: Displaying Recognized Alternatives and Confidence**
+
+<demo metaUrl="client/speechtotextbutton/onresult/" height="300"></demo>
+
+## OnStart and OnEnd
+
+The `OnStart` event fires when speech recognition starts. The `OnEnd` event fires when speech recognition ends. Use these events to update the UI or track the recognition state.
+
+**Example: Indicating Listening State**
+
+<demo metaUrl="client/speechtotextbutton/onstartend/" height="300"></demo>
+
+## OnError
+
+The `OnError` event fires when an error occurs during speech recognition. Use this event to display error messages to the user.
+
+## OnClick
+
+The `OnClick` event fires when the user clicks or taps the button. It receives argument of type `MouseEventArgs`.
+
+## See Also
+
+- [SpeechToTextButton Overview](slug:speechtotextbutton-overview)
+- [SpeechToTextButton Appearance](slug:speechtotextbutton-appearance)
+- [SpeechToTextButton Integration](slug:speechtotextbutton-integration)

components/speechtotextbutton/integration.md

@@ -0,0 +1,29 @@
+---
+title: Integration
+page_title: Integration
+description: Learn how to integrate the SpeechToTextButton component with forms and other components in Blazor applications.
+slug: speechtotextbutton-integration
+tags: blazor, speech recognition, integration
+published: true
+position: 4
+---
+
+# SpeechToTextButton Integration
+
+Integrate the `SpeechToTextButton` component with forms, input fields, and other UI elements to provide voice input capabilities.
+
+## Binding Recognized Text to an Input Field
+
+Use the `OnResult` event to update an input field with the recognized text.
+
+**Example of Binding Recognized Text to an TelerikTextArea**
+
+<demo metaUrl="client/speechtotextbutton/integration/" height="250"></demo>
+
+
+## See Also
+
+- [AI Model Voice Transcription Intergration](https://github.com/telerik/blazor-ui/tree/master/common/microsoft-extensions-ai-integration/SpeechToTextIntegration)
+- [SpeechToTextButton Overview](slug:speechtotextbutton-overview)
+- [SpeechToTextButton Events](slug:speechtotextbutton-events)
+- [SpeechToTextButton Appearance](slug:speechtotextbutton-appearance)

components/speechtotextbutton/overview.md

@@ -0,0 +1,70 @@
+---
+title: Overview
+page_title: SpeechToTextButton Overview
+description: Learn about the SpeechToTextButton component, its features, and how to use it in Blazor applications.
+slug: speechtotextbutton-overview
+tags: blazor, speech recognition, button, voice input
+published: true
+position: 1
+---
+
+# Blazor SpeechToTextButton Overview
+
+The `SpeechToTextButton` component enables speech recognition in Blazor applications. It provides a button that users can select to start and stop speech recognition. The component converts spoken words into text and emits events with the recognized results.
+
+Use the `SpeechToTextButton` component to add voice input capabilities to forms, search bars, chat interfaces, and other scenarios that require speech-to-text functionality.
+
+## Basic Usage
+
+The following example demonstrates how to add the `SpeechToTextButton` to a Blazor page and handle the recognition result.
+
+**Example of Using the SpeechToTextButton**
+
+<demo metaUrl="client/speechtotextbutton/overview/" height="200"></demo>
+
+## Appearance
+
+You can customize the appearance of the `SpeechToTextButton` by setting parameters such as `Icon`, and `Class`. For more details and examples, refer to [SpeechToTextButton Appearance](slug:speechtotextbutton-appearance).
+
+## Events
+
+The `SpeechToTextButton` component emits several events that you can handle. For more details, refer to [SpeechToTextButton Events](slug:speechtotextbutton-events).
+
+## SpeechToTextButton Parameters
+
+To review all available parameters for the `SpeechToTextButton` component, see the [SpeechToTextButton API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikSpeechToTextButton#parameters).
+
+## SpeechToTextButton Reference and Methods
+
+The `SpeechToTextButton` component exposes several public methods that you can call from your code. For a full list and details, see the [SpeechToTextButton API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikSpeechToTextButton#methods).
+
+**Example of Calling a Method by Reference**
+
+<div class="skip-repl"></div>
+````RAZOR
+<TelerikSpeechToTextButton @ref="speechToTextButtonRef" />
+
+@code {
+    private async Task StartRecognition()
+    {
+        await speechToTextButtonRef.StartAsync();
+    }
+}
+````
+
+## Supported Browsers
+
+The `SpeechToTextButton` component relies on the Web Speech API. For a list of supported browsers, refer to the [Web Speech API documentation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API#browser_compatibility).
+
+## Next Steps
+
+* [Handle SpeechToTextButton Events](slug:speechtotextbutton-events)
+* [SpeechToTextButton Integration](slug:speechtotextbutton-integration)
+
+## See Also
+
+- [SpeechToTextButton Live Demo](https://demos.telerik.com/blazor-ui/speechtotextbutton/overview)
+- [SpeechToTextButton API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikSpeechToTextButton)
+- [SpeechToTextButton Events](slug:speechtotextbutton-events)
+- [SpeechToTextButton Appearance](slug:speechtotextbutton-appearance)
+- [SpeechToTextButton Integration](slug:speechtotextbutton-integration)

docs-builder.yml

@@ -184,6 +184,8 @@ meta:
     title: Stepper
   "*stacklayout":
     title: Stack Layout
+  "*speechtotextbutton":
+    title: SpeechToTextButton
   "*splitter":
     title: Splitter
   "*splitbutton":

introduction.md

@@ -83,6 +83,7 @@ You can watch a YouTube playlist of getting started tutorials for Telerik UI for
       <IntroTableAnchor title="Menu" href="slug:components/menu/overview"></IntroTableAnchor>
       <IntroTableAnchor title="Context Menu" href="slug:contextmenu-overview"></IntroTableAnchor>
       <IntroTableAnchor title="PanelBar" href="slug:panelbar-overview"></IntroTableAnchor>
+      <IntroTableAnchor title="Speech to Text Button" href="slug:speechtotextbutton-overview"></IntroTableAnchor>
       <IntroTableAnchor title="SplitButton" href="slug:splitbutton-overview"></IntroTableAnchor>
       <IntroTableAnchor title="Stepper" href="slug:stepper-overview"></IntroTableAnchor>
       <IntroTableAnchor title="Tab Strip" href="slug:components/tabstrip/overview"></IntroTableAnchor>