HyFab

A floating action button (FAB) for primary or prominent actions.

The FAB is a circular button that floats above the UI, representing the most important or frequent action on a screen. It supports an extended variant that shows both an icon and a text label in a pill shape.

Key Features

• Circular (icon-only) and extended (icon + label) variants
• Three sizes: small (40px), medium (48px), large (56px)
• Five color variants aligned with the design system
• Optional fixed positioning with presets (bottom-right, bottom-left, etc.)
• Link mode when href is provided
• Loading state with spinner
• Fully accessible with keyboard navigation
• SSR compatible

Accessibility Features

• aria-label set from the label property in icon-only mode
• In extended mode, visible label text provides the accessible name
• Full keyboard navigation (Enter, Space)
• Visible focus indicators
• Minimum 40px touch target (44px on touch devices)
• High contrast mode support
• Reduced motion support
• Screen reader loading announcements

Examples

Basic icon-only FAB

<hy-fab icon="favorite-border" label="Add to favorites"></hy-fab>

Extended FAB with label

<hy-fab icon="favorite-border" label="Favorite" extended></hy-fab>

Fixed position FAB

<hy-fab icon="favorite-border" label="Favorite" position="bottom-right"></hy-fab>

Brand variant, large size

<hy-fab icon="search" label="Search" variant="brand" size="large"></hy-fab>

Link mode FAB

<hy-fab icon="home" label="Home" href="/home"></hy-fab>

Loading state

<hy-fab icon="cloud-upload" label="Uploading..." loading></hy-fab>

Click gating: Native click events bubble normally. When disabled or loading, clicks are stopped (stopPropagation + preventDefault) on the host so external

## Slots

- **icon** - Optional slot to provide a custom icon element instead of using the `icon` property

## Methods

### focus()

Sets focus on the FAB.

### blur()

Removes focus from the FAB.