paper-fab.html 4.99 KB
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
The complete set of authors may be found at
The complete set of contributors may be found at
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../paper-behaviors/paper-button-behavior.html">
<link rel="import" href="../paper-material/paper-material.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-styles/default-theme.html">

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.


    <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 | `{}`

@group Paper Elements
@demo demo/index.html


<dom-module id="paper-fab">
  <template strip-whitespace>
    <style include="paper-material">
      :host {
        display: inline-block;
        position: relative;
        outline: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        user-select: none;
        cursor: pointer;

        box-sizing: border-box;
        min-width: 0;
        width: 56px;
        height: 56px;
        background: var(--paper-fab-background, --accent-color);
        color: var(--text-primary-color);
        border-radius: 50%;
        padding: 16px;

        z-index: 0;


      :host([mini]) {
        width: 40px;
        height: 40px;
        padding: 8px;


      :host([disabled]) {
        color: var(--paper-fab-disabled-text, --paper-grey-500);
        background: var(--paper-fab-disabled-background, --paper-grey-300);

      iron-icon {

      :host(.keyboard-focus) {
        background: var(--paper-fab-keyboard-focus-background, --paper-pink-900);

    <iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>

    is: 'paper-fab',

    behaviors: [

    properties: {
       * The URL of an image for the icon. If the src property is specified,
       * the icon property should not be.
       * @attribute src
       * @type string
       * @default ''
      src: {
        type: String,
        value: ''

       * Specifies the icon name or index in the set of icons available in
       * the icon's icon set. If the icon property is specified,
       * the src property should not be.
       * @attribute icon
       * @type string
       * @default ''
      icon: {
        type: String,
        value: ''

       * Set this to true to style this is a "mini" FAB.
       * @attribute mini
       * @type boolean
       * @default false
      mini: {
        type: Boolean,
        value: false,
        reflectToAttribute: true