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 custom padding.

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:

• small — Sets the border radius to 1px.
• medium(Default) — Sets the border radius to 2px.

• large — Sets the border radius to 4px.

• full — Sets the border radius to 9999px.
• null — Passing null to the rounded property gives us the option to define a custom CSS class that defines the border-radius of the FloatingActionButton.

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 (Default)—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.
• null—Removes the color related styling and allows you to define custom colors.

The following example demonstrates the usage of each themeColor option:

Suggested Links

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