Flo.w

# Floating Action Button (FAB)

<flow-fab>
Stable

The floating action button (FAB) component displays a floating button for primary user actions.

The FAB icon is specified using an icon name, URL to an SVG file or an SVG data URL. See the icon component for details.

# Examples

# Colors

Use the color attribute to set the FAB's color from the application palette. By default, the secondary application color is used to match Material Design guidelines.

# Compact FABs

Add the compact attribute to display a smaller size FAB.

# Square FABs

Add the square attribute to display a square FAB.

# Checkbox-Style FABs

Add the checkbox attribute to display a FAB that acts like a checkbox.

# FAB Labels

Add a label to the FAB by setting the label attribute.

# Properties

Property Description Type Default
checkbox Set to `true` for the FAB to act like a checkbox. boolean false
checked The checked state of the FAB. Only applicable if `checkbox` is set to `true`. boolean false
color The color of the FAB. Colors are taken from the application palette. "danger" | "gray" | "primary" | "secondary" | "success" | "warning"
compact Set to `true` to display a smaller FAB. boolean false
icon Set to display an icon on the button. The property can be the name of a built-in icon, a URL of an SVG file, or an SVG data URI. string
label Set to add an optional label to the FAB. string
square Set to `true` to display the FAB using the 'square' style. By default, FABs are round. boolean false
value The value attribute of the FAB. Only applicable if `checkbox` is set to `true`. string

# CSS Custom Properties

Name Description
--background-color Background of the button (default: secondary contrast)
--color Text color of the button (default: secondary)

← FAB Group →