# 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 [Telerik UI for Blazor Button](https://www.telerik.com/blazor-ui/documentation/components/button/overview).

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

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

> caption Example of setting the FillMode

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

> caption Example of setting the ThemeColor

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

> caption 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](https://www.telerik.com/blazor-ui/documentation/common-features/icons) or a custom one.

For SVG icons, use `IconVariant` to select an available variant. See [SVG icon variants](https://www.telerik.com/blazor-ui/documentation/common-features/icons#use-svg-icon-variants).

> caption Example of customizing the default 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.

> caption Example of custom styling

<demo metaUrl="client/speechtotextbutton/customstyle/" height="150"></demo>

## See Also

* [SpeechToTextButton Overview](https://www.telerik.com/blazor-ui/documentation/components/speechtotextbutton/overview)
* [SpeechToTextButton Events](https://www.telerik.com/blazor-ui/documentation/components/speechtotextbutton/events)
* [SpeechToTextButton Integration](https://www.telerik.com/blazor-ui/documentation/components/speechtotextbutton/integration)