vsc-fab-button | Vaadin

Awesome VSC FAB Web Component using Polymer 2x

[ This description is mirrored from README.md at github.com/valleweb/vsc-fab-button on 2018-01-17 ]


Awesome VSC material design: Floating Action Button (FAB).

Travis CI Status Published on webcomponents.org

How to install and use:

1 - Install the element using Bower:

$ bower install vsc-fab-button --save

2 - Import the element:

<link rel="import" href="bower_components/vsc-fab-button/vsc-fab-button.html">

3 - Start using it!

<vsc-fab-button disabled></vsc-fab-button>
<vsc-fab-button mini></vsc-fab-button>
<vsc-fab-button toggle></vsc-fab-button>


Property Type Default Description
icon String '' Icon url
mini Boolean false Allow mini size
disabled Boolean false Allow disabled state
elevation Number 1 Add material design elevation level (1-5)
label String '' Label for screen readers
toggle Boolean false Allow toggle mode
pressed Boolean false Set the pressed state (toggled)


The following custom properties and mixins are available for styling:

Custom property Default Description
--vsc-fab-button-color #ff6d00 Button background color
--vsc-fab-button-size 56px Button size (width and height)
--vsc-fab-button-mini-size 40px Button mini size (width and height)
--vsc-fab-button-icon-size 24px Icon size (width and height)
--vsc-fab-button-default-icon-color #ffffff Default icon background color
--vsc-fab-button-pressed-coulor #ff0101 Pressed button background color (toggle)

Browser Support

Using the webcomponents.js:

Chrome Opera Firefox Safari IE Edge
Latest ✔ Latest ✔ Latest ✔ Latest ✔ 11+ Latest ✔


1 - Install Bower & Polymer-CLI:

$ [sudo] npm install -g bower polymer-cli

2 - Install local dependencies:

$ bower install

3 - Start the development server:

$ polymer serve

Go to localhost:8080/components/vsc-fab-button/



Linting with eslint:

$ [sudo] npm install -g eslint
$ [sudo] npm install -g eslint-plugin-html

$ eslint *.html

Linting with polylint:

$ polymer lint

Unit tests

Install the Web Component Tester (WCT) test runner:

$ [sudo] npm install -g web-component-tester

Run tests:

$ wct


To keep better organization of releases we follow the Semantic Versioning 2.0.0 guidelines.


Find on our issues the next steps of the project ;)
Want to contribute? Follow these recommendations.


See Releases for detailed changelog.


MIT License © valleweb


Link to this version
TestedReleased 16 October 2017Other
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
Release notes - Version 0.2.1