FAB

{/* Icon-only, default position */}
<FAB aria-label="New post" icon={<PlusIcon />} />

{/* Extended */}
<FAB extended icon={<PlusIcon />} onClick={open}>New</FAB>

{/* Manually placed */}
<FAB positioned={false} aria-label="Capture" icon={<CameraIcon />} />

Install: @helixui/core

import { FAB } from '@helixui/core'

status: stable · since: 0.5.0

Tags: mobile, floating, primary-action, circular

Anatomy

…page content…
                     ╭─╮
                     │+│   ← circular FAB
                     ╰─╯

Layout

display — fixed
width — content
height — content
intrinsicSize — ~56px circle (default), or pill in extended
stackable — false
fullBleed — false

Visual

A circular brand-colored button with a centered icon, fixed to the bottom-right with safe-area padding. The extended variant becomes a pill with icon + label. Uses shadow.lg for lift.

Props

Name	Type	Default	Description
`aria-label`	`string`	—	Required accessible name when icon-only (no extended label).
`tone`	`'brand' \| 'neutral' \| 'danger'`	`brand`	Color intent.
`size`	`'sm' \| 'md' \| 'lg'`	`md`	Diameter / pill height — 40 / 56 / 64 px.
`extended`	`boolean`	`false`	Render as a pill with icon + label child.
`positioned`	`boolean`	`true`	Fixed-position at bottom-right with safe-area inset; set false to place manually.
`icon`	`ReactNode`	—	Icon content.

Slots

children — used as label only when extended

Tokens used

color.bg.action.brand.default, color.bg.action.brand.hover, color.bg.action.danger.default, color.bg.action.danger.hover, color.bg.action.neutral.default, color.bg.surface.default, color.text.on.brand, color.text.on.danger, color.text.primary, color.border.default, color.border.focus, radius.full, space.2, space.4, space.5, font.family.sans, font.size.sm, font.size.md, font.weight.semibold, shadow.lg

Accessibility

Role: button

Notes

Always provide aria-label for the icon-only variant — the screen reader has no visible text.
Default placement adds bottom: var(--helixui-space-4) + env(safe-area-inset-bottom) so the FAB clears the iOS home indicator and any BottomNav.

Composes with

Component	Relation	Note
`SafeArea`	`parent`	Wrap on mobile builds for inset.
`IconButton`	`alternative`	IconButton stays inline; FAB floats.
`BottomNav`	`sibling`
`ActionSheet`	`sibling`

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

compose new email

“a floating + button in the bottom-right”

<FAB icon={<PlusIcon />} aria-label="Compose" onPress={compose} />

extended FAB with label

“pill-shaped FAB saying “New post""

<FAB extended icon={<PlusIcon />}>New post</FAB>

FAB

FAB