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 option supports the following values:
none—The none option removes the built-in sizing. Allows for custom
The following example demonstrates how to define the size of the FloatingActionButton.
rounded option supports the following values:
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
The following example demonstrates how to define the border radius of the FloatingActionButton.
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.
themeColor values are:
primary(Default)—Applies coloring based on the
secondary—Applies coloring based on the
tertiary—Applies coloring based on the
info—Applies coloring based on the
success—Applies coloring based on the
warning—Applies coloring based on the
error—Applies coloring based on the
dark—Applies coloring based on the
light—Applies coloring based on the
inverse—Applies coloring based on the
none—Removes the color related styling.
The following example demonstrates how to specify the theme colors of the FloatingActionButton.