i

Floating action button

Doing · researched

A button floating over the page for the single most important or shortcut action.

atom · also called Float button, FAB

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

FloatButton native: yes antd 6.6.5
Variants
default, primary (type), circle, square (shape)
Sizes
—
States documented
disabled
Accessibility guidance
no

Built on antd Button so renders a native button (or link); FloatButton.Group can fold into a menu; FloatButton.BackTop scrolls to top.

1 corrected on re-read
  • states_documented: null → ["disabled"] FloatButton API: disabled

docs ↗ · code ↗

Carbon

absentCarbon does not ship this component. Nothing is drawn in its place.

Checked docs components list, react and web-components directories. Nearest is ChatButton (exported as unstable__ChatButton, an AI chat launcher), not a general FAB.

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Checked: component index (https://design-system.service.gov.uk/components/ , 37 components), patterns index, styles index, repo tree src/govuk/components and objects, and installed govuk-frontend 6.5.1 components directory. No floating action button; button variants are primary, secondary, warning, inverse, start and disabled only.

Material Web

FAB (<md-fab>) + Branded FAB (<md-branded-fab>) native: yes @material/web 2.5.0
Variants
surface, primary, secondary, tertiary, extended (label), branded
Sizes
small, medium, large
States documented
—
Accessibility guidance
yes

Agree with index. Renders a native button; extended FAB is the same element with a label. Page documents lowered elevation but no state demos. Also an unpublished GB FAB (labs/gb, in 2.5.0 package, no docs), colors primary | primary-container | secondary | secondary-container | tertiary | tertiary-container, sizes default | md | lg.

docs ↗ · code ↗

Primer

absentPrimer does not ship this component. Nothing is drawn in its place.

No floating action button component. Checked: primer.style/product/components/ index, internal-components list, ui-patterns, packages/react/src tree (incl. deprecated/, experimental/, internal/).

Spectrum

Floating action button native: yes
shipped, not drawn hereSpectrum documents this component, but it could not be drawn from the package used for the frames. The note below says why.
Variants
primary, secondary
Sizes
—
States documented
default, hover, focus, active
Accessibility guidance
unread

Implementation: spectrum-css floatingactionbutton 4.2.0 only (CSS with a button element in its template); no S2, v3 or SWC element and no spectrum.adobe.com page. Not in installed SWC 1.12.4. I did not find a deprecation note in its README, which is just a pointer.

2 corrected on re-read
  • variants: null → ["primary","secondary"] Storybook argTypes options primary, secondary; CSS has --secondary modifier
  • states_documented: null → ["default","hover","focus","active"] Stories expose isHovered, isFocused, isActive

docs ↗ · code ↗

USWDS

absentUSWDS does not ship this component. Nothing is drawn in its place.

Checked the docs component index and status page and the develop packages/ tree (88 entries, matching installed 3.14.0): no floating action button; Button page covers inline buttons only.

Platform facts

Native elementbuttonNo floating element exists; floating is CSS positioning. APG Button applies. MDN button page read for attributes.
Baseline—
APG patternbutton
ARIA role—
Shipped by3 of 7 systems

Anatomy

  1. button — HTML button / APG role button.
  2. icon or label — Plain term; APG Button: accessible name from content, aria-labelledby or aria-label (icon-only needs one of the latter).

Keys the APG binds

  • SpaceActivates the button.
  • EnterActivates the button.

The seven states

default Resting, positioned over the page.
hover Pointer-only CSS state; not defined by APG or HTML.
focus Native button is focusable and takes the browser focus ring.
active Pressed state while the pointer or key is down; CSS :active. Not defined by APG.
disabled disabled attribute on a native button. APG Button: when the action is unavailable a custom button has aria-disabled set to true.
error n/a — Not defined.
loading n/a — Not defined by APG or HTML.

Every cell was read twice, the second time from raw sources by a separate pass. 3 of 35 fields changed on the second read — open any “corrected” note to see what it said before.