New to Kendo UI for Vue? Start a free 30-day trial
Appearance
The FloatingActionButton provides a predefined set of appearance options.
Apart from the default vision of the FloatingActionButton, these alternative styling options enable you to configure each individual aspect of the component's appearance.
The current article provides details about how the component changes when the different configurations of its properties are applied. Here are the sections you can directly access:
- FloatingActionButton Configurator demo
- FloatingActionButton Sizes
- FloatingActionButton Shape
- FloatingActionButton Roundness
- FloatingActionButton Theme Colors
Configurator demo
The following example demonstrates configuring different aspects of a FloatingActionButton appearance through a configurator.
Example
View Source
Change Theme:
Size
The size of the FloatingActionButton is controlled through its size
property. The values we can pass to the property are as follows:
small
—Applies half of the default padding, e.g.8px
.medium
(Default)—Applies the default padding, e.g.16px
.large