# Appearance

In this article, you will find information about the styling options and rendering of the Telerik UI for ASP.NET Core Button.

For a complete example, refer to the [Appearance Demo of the Button](https://demos.telerik.com/aspnet-core/button/appearance).

## Options

The Button component provides the following options for styling:

* [`Size()`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/button/appearance#size)—Configures the overall size of the component.
* [`ThemeColor()`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/button/appearance#themecolor)—Sets what color will be applied to the component.
* [`FillMode()`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/button/appearance#fillmode)—Defines how the color is applied to the Button.
* [`Rounded()`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/button/appearance#rounded)—Determines the border radius of the component.

### Size

To control the size of the Button, configure the `Size` option with any of the following values:

* `XSmall`
* `Small`
* `Medium`
* `Large`

> When not explicitly set, the applied theme controls the default size.

```Razor HtmlHelper
@(Html.Kendo().Button()
    .Name("textButton")
    .Size(ButtonSize.Medium)
    .HtmlAttributes( new {type = "button"} )
    .Content("Text Button")
)
```

```Razor TagHelper
<kendo-button name="textButton" size="ButtonSize.Medium">
    Text Button
</kendo-button>
```

### FillMode

The `FillMode()` method specifies how the color is applied to the component.

> When not explicitly set, the applied theme controls the default fill mode.

```Razor HtmlHelper
@(Html.Kendo().Button()
    .Name("textButton")
    .FillMode(ButtonFillMode.Solid)
    .HtmlAttributes( new {type = "button"} )
    .Content("Text Button")
)
```

```Razor TagHelper
<kendo-button name="textButton" fill-mode="ButtonFillMode.Solid">
    Text Button
</kendo-button>
```

The following options are available for the `FillMode` configuration:

* `Solid`
* `Outline`
* `Flat`
* `Link`
* `Clear`

> The `None` value is deprecated. Use custom CSS to achieve an unstyled appearance.

### ThemeColor

The `ThemeColor` configuration provides a variety of colors that can be applied to the Button. The available options are:

* `Base`
* `Primary`
* `Secondary`
* `Tertiary`
* `Info`
* `Success`
* `Warning`
* `Error`
* `Inverse`

> When not explicitly set, the applied theme controls the default theme color.

```Razor HtmlHelper
@(Html.Kendo().Button()
    .Name("textButton")
    .ThemeColor(ThemeColor.Base)
    .HtmlAttributes( new {type = "button"} )
    .Content("Text Button")
)
```

```Razor TagHelper
<kendo-button name="textButton" theme-color="ThemeColor.Base">
    Text Button
</kendo-button>
```

### Rounded

The border radius of the Button can be customized through the `Rounded()` method.

> When not explicitly set, the applied theme controls the default border radius.

```Razor HtmlHelper
@(Html.Kendo().Button()
    .Name("textButton")
    .Rounded(ButtonRounded.Medium)
    .HtmlAttributes( new {type = "button"} )
    .Content("Text Button")
)
```

```Razor TagHelper
<kendo-button name="textButton" rounded="Rounded.Medium">
    Text Button
</kendo-button>
```

The following values are available for the `Rounded` option:

* `Small`
* `Medium`
* `Large`
* `Full`

> The `None` value is deprecated. Use custom CSS to remove border radius.

## Rendering

Starting with version R1 2022, the component has a new rendering. For additional information on the decision behind these changes, visit the [Components Rendering Overview](https://www.telerik.com/aspnet-core-ui/documentation/styles-and-layout/components-rendering-overview) article.

To review the latest rendering of the component, refer to the HTML specifications in the [Kendo UI Themes Monorepo](https://github.com/telerik/kendo-themes/tree/develop). The `tests` folder of the repository contains the rendering for all flavors of the components, providing a clear reference for how their elements are structured. The rendering information can help you customize a component's appearance and behavior by applying custom CSS or JavaScript to suit specific design or functional requirements.

## See Also

* [Components Appearance Overview](https://www.telerik.com/aspnet-core-ui/documentation/styles-and-layout/components-rendering-overview)
* [Appearance of the Button HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/button/appearance)
* [Button Server-Side API](https://www.telerik.com/aspnet-core-ui/documentation/api/button)
* [Button Client-Side API](https://docs.telerik.com/kendo-ui/api/ui/button)