FormWidgets / Fab / Examples

Fab Examples

Live examples of the Floating Action Button. Look at the bottom-right corner of this page!

View Documentation

1. Speed Dial (Bottom Right)

The main example is active on this page. Click the + button in the bottom-right corner to see the speed dial actions.

JavaScript
// Initialize on a container div
FormWidgets.init('#fab-demo', 'Fab', {
    position: 'bottom-right',
    icon: 'plus',
    actions: [
        { icon: 'edit', onClick: () => FormWidgets.notify('Edit clicked') },
        { icon: 'share', onClick: () => FormWidgets.notify('Share clicked') },
        { icon: 'trash', onClick: () => FormWidgets.notify('Delete clicked', 'error') }
    ]
});

2. Simple Trigger (Bottom Left)

A simple single-action button positioned in the bottom-left.

HTML
<div class="fw-fab" data-position="bottom-left">
  <button class="fw-fab-trigger" onclick="alert('Clicked!')">
    <i class="fw-icon" data-icon="check"></i>
  </button>
</div>