# Appearance Settings

The Telerik Button component for Blazor provides several ways to control its appearance. This article discusses the following component parameters:

* [FillMode](https://www.telerik.com/blazor-ui/documentation/components/button/appearance#fillmode)
* [Rounded](https://www.telerik.com/blazor-ui/documentation/components/button/appearance#rounded)
* [Size](https://www.telerik.com/blazor-ui/documentation/components/button/appearance#size)
* [ThemeColor](https://www.telerik.com/blazor-ui/documentation/components/button/appearance#themecolor)

You can use all of them together to achieve the desired appearance.

## FillMode

The `FillMode` parameter changes or removes the background and border of the Button. Set the parameter to a member of the static class `Telerik.Blazor.ThemeConstants.Button.FillMode`. When setting the `FillMode` parameter value inline, start with an `@` character, otherwise the predefined string constant cannot be resolved.

| FillMode Class Member | Actual String Value |
| --------------------- | ------------------- |
| `Solid`               | `solid` (default)   |
| `Flat`                | `flat`              |
| `Outline`             | `outline`           |
| `Link`                | `link`              |
| `Clear`               | `clear`             |

> caption Built-in Button FillMode Values

<demo metaUrl="client/button/appearance/fill-mode/" height="200"></demo>

## Rounded

The `Rounded` parameter applies a `border-radius` CSS style to the Button to curve the corners. Set the parameter to a member of the static class `Telerik.Blazor.ThemeConstants.Button.Rounded`. When setting the `Rounded` parameter value inline, start with a `@` character, otherwise the predefined string constant cannot be resolved.

| Rounded Class Member | Actual Value   |
| -------------------- | -------------- |
| `Small`              | `sm`           |
| `Medium`             | `md` (default) |
| `Large`              | `lg`           |
| `Full`               | `full`         |

> caption Built-in Button Rounded Values

<demo metaUrl="client/button/appearance/rounded/" height="200"></demo>

## Size

The `Size` parameter affects the Button dimensions, paddings, and font size. Set the parameter to a member of the static class `Telerik.Blazor.ThemeConstants.Button.Size`. When setting the `Size` parameter value inline, start with a `@` character, otherwise the predefined string constant cannot be resolved.

| Size Class Member | Actual Value   |
| ----------------- | -------------- |
| `Small`           | `sm`           |
| `Medium`          | `md` (default) |
| `Large`           | `lg`           |

> caption Built-in Button Size Values

<demo metaUrl="client/button/appearance/size/" height="200"></demo>

## ThemeColor

The `ThemeColor` parameter controls the Button background, text, and border color. Set the parameter to a member of the static class `Telerik.Blazor.ThemeConstants.Button.ThemeColor`. When setting the `ThemeColor` parameter value inline, start with a `@` character, otherwise the predefined string constant cannot be resolved.

| ThemeColor Class Member | Actual String Value |
| ----------------------- | ------------------- |
| `Base`                  | `base` (default)    |
| `Primary`               | `primary`           |
| `Secondary`             | `secondary`         |
| `Tertiary`              | `tertiary`          |
| `Info`                  | `info`              |
| `Success`               | `success`           |
| `Warning`               | `warning`           |
| `Error`                 | `error`             |
| `Inverse`               | `inverse`           |

> tip The `Dark` and `Light` `ThemeColor` values were removed in UI for Blazor 14. They have no direct replacements. Choose another supported semantic color or use the Button `Class` parameter with custom CSS to preserve a specific appearance. For details, see the [14.0.0 breaking changes](https://www.telerik.com/blazor-ui/documentation/upgrade/breaking-changes/14-0-0#themecolor-values).

> caption Built-in Button ThemeColor Values

<demo metaUrl="client/button/appearance/theme-color/" height="300"></demo>

## ThemeBuilder

To take full control over the appearance of the Telerik UI for Blazor components, you can create your own styles by using [ThemeBuilder](https://docs.telerik.com/themebuilder).

ThemeBuilder is a web application that enables you to create new themes and customize existing ones. Every change that you make is visualized almost instantly. Once you are done styling the UI components, you can export a ZIP file with the styles for your theme and use them in your Blazor app.