Floating actions

A circular button made of paper that lifts and emits ink reactions on press *.

* More info

---

Live Example

---

Usage

Installation

The CSS style is already included in phonon-base.css.

Link to the JS file if you loaded phonon-core.js only:

<script src="float-actions.js"></script>

HTML

The floating action is always visible (fixed position). You should add the button outside the .content tag. For example after the .content ends.

<page-x>
    <header></header>
    <div class="content"></div>
    <button class="floating-action icon icon-menu active primary bottom right"></button>
</page-x>

Position

Top

Add the top class.

Left

Add the left class.

Right

Add the right class.

Bottom

Add the bottom class.