ars-fab — Demo

About

Prominent circular button for the primary action on a screen. Supports variants, sizes, extended label mode, and fixed positioning for mobile layouts.

Variants

<ars-fab variant="primary">+</ars-fab>

Sizes

<ars-fab size="lg">+</ars-fab>

Extended

New Alert +

Filter ⚙

<ars-fab extended variant="primary">
  <span slot="label">New Alert</span>
  +
</ars-fab>

Disabled

Disabled 🚫

<ars-fab disabled>+</ars-fab>

Fixed Position

The FAB is pinned to the bottom-right of its nearest containing block (simulating a mobile viewport).

Home

Scrollable content area…

<ars-fab position="fixed" variant="primary" size="md">+</ars-fab>

Event Monitor

[ready] Click the FAB to see events...

Theme Toggle

Usage

<ars-fab
  id="fab"
  variant="primary"
  size="md"
  position="fixed"
  extended
>
  <span slot="label">New Alert</span>
  +
</ars-fab>

<script>
  document.getElementById('fab').addEventListener('ars-fab:click', (e) => {
    console.log('FAB clicked:', e.detail.variant);
  });
</script>