Floating Action Button

VdFab surfaces a primary action as a round, elevated button. Pick a variant, size, position, or the extended pill; add an actions slot to turn it into a self-managing speed-dial menu (it owns its own open state, Escape, and outside-click handling).

Sizes

<button class="vd-fab vd-fab-sm" aria-label="Small">...</button>   <!-- 40px -->
<button class="vd-fab" aria-label="Default">...</button>            <!-- 56px -->
<button class="vd-fab vd-fab-lg" aria-label="Large">...</button>   <!-- 72px -->

Extended (with label)

<button class="vd-fab vd-fab-extended" aria-label="Create new item">
  <i class="ph ph-plus"></i>
  <span>New</span>
</button>

<button class="vd-fab vd-fab-extended vd-fab-success">
  <i class="ph ph-check"></i><span>Save</span>
</button>

Color Variants

<button class="vd-fab"><i class="ph ph-plus"></i></button>
<button class="vd-fab vd-fab-secondary"><i class="ph ph-pencil-simple"></i></button>
<button class="vd-fab vd-fab-success"><i class="ph ph-check"></i></button>
<button class="vd-fab vd-fab-danger"><i class="ph ph-trash"></i></button>
<button class="vd-fab vd-fab-glass"><i class="ph ph-star"></i></button>

Position Variants

In production the position prop pins the FAB (position: fixed) to the viewport. This preview scopes live <VdFab> buttons to the box below.

<!-- The position prop pins a FAB (position: fixed) to a viewport spot -->
<VdFab position="bottom-right" aria-label="Compose">
  <i class="ph ph-pencil-simple"></i>
</VdFab>

<!-- Other positions: bottom-left | top-right | top-left | center -->
<VdFab position="top-left" aria-label="Back"><i class="ph ph-arrow-up-left"></i></VdFab>

Speed Dial Menu

Click the FAB to toggle the speed dial. The component tracks its own open state, reflects it via aria-expanded, and closes on Esc or an outside click — no page-level state required.

<VdFab aria-label="Toggle actions">
  <i class="ph ph-plus"></i>
  <template #actions>
    <VdFab size="sm" variant="success" aria-label="Upload">
      <i class="ph ph-upload-simple"></i>
    </VdFab>
    <VdFab size="sm" aria-label="Photo">
      <i class="ph ph-image"></i>
    </VdFab>
    <VdFab size="sm" variant="danger" aria-label="Record">
      <i class="ph ph-microphone"></i>
    </VdFab>
  </template>
</VdFab>

API Reference

Usage

<script setup lang="ts">
import { VdFab } from "@vanduo-oss/vd3";
</script>

<template>
  <!-- Pinned single-action FAB -->
  <VdFab position="bottom-right" aria-label="Compose" @click="onCompose">
    <i class="ph ph-pencil-simple"></i>
  </VdFab>

  <!-- Extended (pill) FAB with a visible label -->
  <VdFab extended label="New item" variant="success">
    <i class="ph ph-plus"></i>
  </VdFab>
</template>

Component API

Prop / event / slot	Description
`:variant`	'primary' \| 'secondary' \| 'success' \| 'danger' \| 'error' (default 'primary'; 'error' is an alias of 'danger').
`:size`	'sm' \| 'md' \| 'lg' — diameter (default 'md').
`:extended`	Pill-shaped variant that renders `label` beside the icon slot.
`:glass`	Glass-styled surface (`.vd-fab-glass`).
`:position`	'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' \| 'center' — pins the FAB (position: fixed) to the viewport.
`:label`	Visible text for the extended (pill) mode; also the fallback aria-label.
`:aria-label`	Accessible name (takes priority over `label`).
`@click`	MouseEvent — emitted on activation. In menu mode it also toggles the speed dial.
`default slot`	The icon / button content.
`actions slot`	Speed-dial action buttons. Its presence switches on the .vd-fab-menu wrapper; Escape and outside-click close it.

Modifier classes

Class	Description
`.vd-fab`	Base FAB. Round, elevated. 56 px by default.
`.vd-fab-sm / .vd-fab-lg`	Size variants — 40 px / 72 px.
`.vd-fab-secondary / -success / -danger`	Color variants — the base .vd-fab is already primary.
`.vd-fab-extended`	Wider pill-shaped variant with an icon + label.
`.vd-fab-glass`	Glass-styled variant (uses `--vd-glass-*` tokens).
`.vd-fab-fixed / -top-left / -top-right / -bottom-left / -center`	Fixed-position modifiers that pin the FAB to a viewport corner (or center).
`.vd-fab-menu`	Speed-dial wrapper (relative, column layout).
`.vd-fab-actions`	Container for the action buttons; revealed when .vd-fab-menu has .is-open.

CSS Variables

Variable	Default	Description
`--vd-fab-size`	`3.5rem (56 px)`	Default diameter
`--vd-fab-size-sm`	`2.5rem (40 px)`	Small diameter
`--vd-fab-size-lg`	`4.5rem (72 px)`	Large diameter
`--vd-fab-menu-gap`	`0.8125rem`	Gap between speed-dial buttons
`--vd-fab-shadow`	`0 3px 8px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.15)`	Elevation shadow
`--vd-fab-z-index`	`1030`	Stacking above page content
`--vd-fab-offset`	`1.3125rem`	Distance from viewport edges

Accessibility

Always set :aria-label (or :label) on an icon-only FAB; it has no accessible name otherwise.
In menu mode the trigger carries aria-expanded reflecting its open state.
FABs are real <button> elements — focus, keyboard activation, and form integration work natively.
FABs respect prefers-reduced-motion: the hover lift and speed-dial stagger are skipped when set.