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 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—Applies the default padding, e.g. 16px.
• large—Applies one and one half of the default padding, e.g. 24px.

The following example demonstrates the usage of each size option:

Roundness

The roundness of the FloatingActionButton is controlled through its rounded property. The values we can pass to the property are as follows:

• none — Sets no border radius.
• small — Sets the border radius to 1px.
• medium — Sets the border radius to 2px.
• large — Sets the border radius to 4px.
• full — Sets the border radius to 9999px.

The following example demonstrates the usage of each rounded option:

Theme Colors

The theme colors of the FloatingActionButton are controlled through its themeColor property. The values we can pass to the property are as follows:

• primary—Applies coloring based on the primary theme color.
• secondary—Applies coloring based on the secondary theme color.
• tertiary—Applies coloring based on the tertiary theme color.
• info—Applies coloring based on the info theme color.
• success—Applies coloring based on the success theme color.
• warning—Applies coloring based on the warning theme color.
• error—Applies coloring based on the error theme color.
• dark—Applies coloring based on the dark theme color.
• light—Applies coloring based on the light theme color.
• inverse—Applies coloring based on the inverted theme color.

The following example demonstrates the usage of each themeColor option:

Suggested Links

• API Reference of the FloatingActionButton
• FloatingActionButton size options
• FloatingActionButton rounded options
• FloatingActionButton themeColor options
• Creating Custom Styles with ThemeBuilder