Fab

Installation

The component is exported from @by/experience-system. Add the package with your package manager:

pnpm add @by/experience-system

In this monorepo, depend on the workspace package (for example via workspace:* or your catalog) so imports resolve to packages/experience-system.

Composition

Use the following composition to build a Fab:

Fab
└── children (icon, optional label text for extended)

Fab renders a single circular or extended button. Use variant="circular" for icon-only actions; use variant="extended" when a short label helps clarify the action. The component is built on the design-system Button in unstyled mode so FAB-specific visuals are not overridden by button variants.

Usage

import { Fab } from '@by/experience-system';
import { Settings } from '@by/icons/ui';

Fab is a client component ('use client'). Use it inside a Client Component or a dynamic import when using the Next.js App Router. Position the control in your layout (for example fixed to the bottom corner of a view) and keep one primary FAB per context.

<Fab aria-label="Settings">
  <Settings />
</Fab>

When to use

Use a Fab when a view has one dominant action that should stay visible above scrolling content—create, navigate, or open a primary workflow. Prefer color="accent" for the main action and reserve semantic color values for status-driven affordances.

When not to use

Avoid multiple competing FABs in the same view. Do not use a FAB for secondary or destructive actions that belong in a toolbar, menu, or inline Button. For extended layouts, keep labels short so the control stays scannable on smaller breakpoints.

Examples

Overview

The default variant="circular", size="lg", and color="accent" suit most primary floating actions. The live preview at the top of this page uses the same example (fab-usage).

Sizes

sm, md, and lg scale the circular FAB footprint and icon size.

Colors

neutral, accent, contrast, and semantic error, success, warning, and info colors for status- or emphasis-driven actions.

Extended

variant="extended" adds horizontal padding and a gap between the icon and a short text label at each size.

API Reference

Fab is an Experience System component built on the native HTML button element (via unstyled Button). It forwards standard button attributes except the HTML color attribute, which is reserved for the design-system color variant prop.

Fab

Also accepts standard button attributes where applicable (onClick, aria-*, id, form props, …). The HTML color attribute is omitted from the public API to avoid conflicting with the design-system color prop.

FabProps

TypeScript interface for Fab props (FAB variant props plus native button attributes, excluding HTML color).

Accessibility

Focus styles use focus-visible with an accent ring and offset so keyboard users get a clear affordance. Disabled FABs use the native disabled attribute and reduced opacity.

Icon-only circular FABs must have a discernible name—use aria-label (or visible text in extended layouts) so assistive technologies can announce the action. Avoid placing more than one FAB where users cannot tell which action is primary.

Keyboard interactions

For native button semantics and assistive technology behavior, see MDN — button accessibility.

Source in the repo: packages/experience-system/src/components/Fab/Fab.tsx. Agent-oriented contracts: packages/experience-system/src/components/Fab/Fab.instructions.md.