# Appearance

In this article, you will find information about the styling options and rendering of the Kendo UI Button.

For a live example, visit the [Appearance Demo of the Button](https://demos.telerik.com/kendo-ui/button/appearance).

## Options

The Kendo UI Button supports the following styling options:

* [`size`](https://www.telerik.com/kendo-jquery-ui/documentation/controls/button/button-styling#size)—configures the overall size of the component.
* [`themeColor`](https://www.telerik.com/kendo-jquery-ui/documentation/controls/button/button-styling#themecolor)—configures what color will be applied to the component.
* [`fillMode`](https://www.telerik.com/kendo-jquery-ui/documentation/controls/button/button-styling#fillmode)—configures how the color is applied to the component.
* [`rounded`](https://www.telerik.com/kendo-jquery-ui/documentation/controls/button/button-styling#rounded)—configures the border radius of the component.

### Size

The `size` option controls how big or small the rendered `button` looks. The structure of the class is `k-button-{size}`.

The following values are available for the [`size`](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/button/configuration/size) option:

* `xs`—extra small size
* `sm`—small size
* `md`—medium size
* `lg`—large size
* `none`—unset

The default size value is `undefined` and the default size appearance is controlled by the theme.

```html
<button class="k-button" >
</button>
```

### FillMode

The `fillMode` option controls the way the color is applied to the rendered `button`. The structure of the class is `k-button-{fillMode}`.

The following values are available for the [`fillMode`](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/button/configuration/fillmode) option:

* `solid`
* `outline`
* `flat`
* `link`
* `clear`
* `none`

The default fillMode value is `solid` and is applied to the button element through the `k-button-solid` class.

```html
<button class="k-button" >
</button>
```

### ThemeColor

The `themeColor` option controls the color that will be applied to the rendered Button. As applying `themeColor` is closely related to the `fillMode`, the structure of the class name for the `themeColor` is composite - `k-button-{fillMode}-{themeColor}`.

The following values are available for the [`themeColor`](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/button/configuration/themecolor) option:

* `base`
* `primary`
* `secondary`
* `tertiary`
* `info`
* `success`
* `warning`
* `error`
* `inverse`

The default `themeColor` value is `base`. A button with default `fillMode` and `themeColor` will have `k-button-base` class applied.

```html

<button class="k-button" >
</button>


<button class="k-button k-button-primary" >
</button>


<button class="k-button k-button-flat k-button-primary" >
</button>
```

### Rounded

The `rounded` option controls the extent to which border radius is applied to the rendered `button`. The structure of the class is `k-rounded-{size}`.

The following values are available for the [`rounded`](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/button/configuration/rounded) option:

* `sm`—small size
* `md`—medium size
* `lg`—large size
* `circle`
* `pill`
* `none`—unset

The default rounded value is `undefined` and the default appearance is controlled by the theme.

```html
<button class="k-button" >
</button>
```

## 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/kendo-jquery-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/kendo-jquery-ui/documentation/styles-and-layout/components-rendering-overview)
* [Appearance Demo of the Button](https://demos.telerik.com/kendo-ui/button/appearance)
* [JavaScript API Reference of the Button](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/button)