# FloatingActionButton Appearance

The FloatingActionButton provides predefined appearance options such as different sizes, border radii, and theme colors. If you omit an appearance property, the active Kendo theme supplies its default value.

Apart from the default vision of the FloatingActionButton, these alternative styling options enable you to configure each individual aspect of the appearance of a FloatingActionButton.

* [Size](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/floatingactionbutton/appearance#size)
* [Roundness](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/floatingactionbutton/appearance#roundness)
* [Theme Color](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/floatingactionbutton/appearance#theme-color)

The following example demonstrates all the available appearance options of the FloatingActionButton in a single, configurable demo.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/floatingactionbutton/appearance/configurator/source.txt)

## Size

The Kendo UI for Vue FloatingActionButton enables you to configure its size by using the [`size`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops#size) property.

The [`size`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops#size) option supports the following values:

* `small`
* `medium`
* `large`

The following example demonstrates how to define the size of the FloatingActionButton.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/floatingactionbutton/appearance/size/source.txt)

## Roundness

The FloatingActionButton lets you apply different roundness to the component through its [`rounded`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops#rounded) property.

The [`rounded`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops#rounded) option supports the following values:

* `small`
* `medium`
* `large`
* `full`
* `none`

The following example demonstrates how to define the border radius of the FloatingActionButton for icon-only, text-only, and combined content.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/floatingactionbutton/appearance/rounded/source.txt)

## Theme Color

The FloatingActionButton allows you to set different theme colors with its [`themeColor`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops#themeColor) property.

The [`themeColor`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops#themeColor) option supports the following values:

* `base`
* `primary`
* `secondary`
* `tertiary`

The following example demonstrates how to define the theme color of the FloatingActionButton.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/floatingactionbutton/appearance/theme/source.txt)

## Suggested Links

* [API Reference of the FloatingActionButtonProps](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops)
* [Icon Options](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/floatingactionbutton/icons)
* [Creating Custom Styles with ThemeBuilder](https://www.telerik.com/kendo-vue-ui-develop/components/styling/theme-builder)