##<paper-fab>
Material design: Floating Action Button
paper-fab is a floating action button. It contains an image placed in the center and comes in two sizes: regular size and a smaller size by applying the attribute mini. When the user touches the button, a ripple effect emanates from the center of the button.
You may import iron-icons to use with this element, or provide a URL to a custom icon. See iron-iconset for more information about how to use a custom icon set.
Example:
<link href="path/to/iron-icons/iron-icons.html" rel="import"> <paper-fab icon="add"></paper-fab> <paper-fab mini icon="favorite"></paper-fab> <paper-fab src="star.png"></paper-fab>
Styling
The following custom properties and mixins are available for styling:
| Custom property | Description | Default |
|---|---|---|
--paper-fab-background | The background color of the button | --accent-color |
--paper-fab-keyboard-focus-background | The background color of the button when focused | --paper-pink-900 |
--paper-fab-disabled-background | The background color of the button when it's disabled | --paper-grey-300 |
--paper-fab-disabled-text | The text color of the button when it's disabled | --paper-grey-500 |
--paper-fab | Mixin applied to the button | {} |
--paper-fab-mini | Mixin applied to a mini button | {} |
--paper-fab-disabled | Mixin applied to a disabled button | {} |
--paper-fab-iron-icon | Mixin applied to the iron-icon within the button | {} |