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.
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
—Applies one and one half of the default padding, e.g.24px
.null
— The null option removes the built-in sizing. Allows for custompadding
.
The following example demonstrates the usage of each size
option:
Shape
The shape of the FloatingActionButton is controlled through its shape
property. The values we can pass to the property are as follows:
rectangle
(Default)—Applies no border radius on the FloatingActionButton.square
—Applies square shape on the FloatingActionButton.null