FloatingActionButton Appearance

The FloatingActionButton provides predefined appearance options such as different sizes and theme colors.

The following example demonstrates all available appearance options of the FloatingActionButton in action.

Size

The FloatingActionButton allows you to set different padding to the internal content. To achieve this utilize the size property. It accepts values of type ButtonSize or none.

The size option supports the following values:

• small—Sets the padding to 8px.
• medium (Default)—Sets the padding to 16px.
• large—Sets the padding to 24px.
• none—The none option removes the built-in sizing. Allows for custom padding.

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

Roundness

The FloatingActionButton enables you to apply different border radius to the component through the rounded property. It accepts values of type ButtonRounded or none.

The rounded option supports the following values:

• small—Sets the border radius to 1px.
• medium—Sets the border radius to 2px.
• large—Sets the border radius to 4px.
• full (Default)—Sets the border radius to 9999px. This would make the FloatingActionButton fully rounded. Depending on its content, it will render as a circle or pill respectively.
• none—The none option removes the built-in roundness. Allows for custom border radius.

The following example demonstrates how to define the border radius of the FloatingActionButton.

Theme Colors

The FloatingActionButton allows you to specify predefined theme colors. The theme color will be applied as a background and border color while also amending the text color accordingly.

The available themeColor values are:

• 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 inverse theme color.
• none—Removes the color related styling.

The following example demonstrates how to specify the theme colors of the FloatingActionButton.

Suggested Links

• API Reference of the FloatingActionButton
• Creating Custom Styles with ThemeBuilder