The FloatingActionButton provides predefined appearance options such as different shapes, sizes, and 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.
themeColor values are:
primary(Default)—Applies coloring based on the
secondary—Applies coloring based on the
tertiary—Applies coloring based on the
inherit—Applies inherited color values.
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
The following example demonstrates how to specify the theme colors of the FloatingActionButton.
The FloatingActionButton allows you to set different shapes.
shape values are:
pill(Default)—Applies a border radius equal to half of the height of the FloatingActionButton. If the FloatingActionButton contains only icon, the shape will be circular.
circle—Applies a circle shape on the FloatingActionButton.
rectangle—Applies no border radius on the FloatingActionButton.
rounded—Applies a default border radius on the FloatingActionButton.
square—Applies a square shape on the FloatingActionButton.
The following example demonstrates how to set the shape of the FloatingActionButton.
The FloatingActionButton allows you to set different sizes.
size values are:
The following example demonstrates how to define the size of the FloatingActionButton.