valle-fab | Vaadin

Awesome valle FAB Web Component using Polymer 2x

[ This description is mirrored from at on 2019-01-07 ]


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

Travis CI Status Published on

How to install and use:

1 - Install the element using Bower:

$ bower install valle-fab --save

2 - Import the element:

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

3 - Start using it!

<valle-fab disabled></valle-fab>
<valle-fab mini></valle-fab>
<valle-fab toggle></valle-fab>


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)
sloted Boolean false Allow inline icon (slot)


The following custom properties and mixins are available for styling:

Custom property Default Description
--valle-fab-color #ff6d00 Button background color
--valle-fab-size 56px Button size (width and height)
--valle-fab-mini-size 40px Button mini size (width and height)
--valle-fab-icon-size 24px Icon size (width and height)
--valle-fab-default-icon-color #ffffff Default icon background color
--valle-fab-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] yarn global add bower polymer-cli

2 - Install local dependencies:

$ bower install

3 - Start the development server:

$ polymer serve

Go to localhost:8080/components/valle-fab/



Linting with eslint:

$ [sudo] yarn global add eslint
$ [sudo] yarn global add eslint-plugin-html

$ eslint *.html

Linting with polylint:

$ polymer lint

Unit tests

Install the Web Component Tester (WCT) test runner:

$ [sudo] yarn global add 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
ImportedReleased 17 August 2018Other
Framework Support
Polymer 2.0+
Browser Independent
Install with
Release notes - Version 1.2.0