Components › Forms & input › Button › Fab

Fab

canon

Floating primary action of a screen on a phone: round „+" for Create, extended with a label otherwise.

Approved by the owner 2026-09-28 (Attio pattern, AD). Drawn by SectionTopBar from primaryAction data below 720 px only; acrm !4088. Used only through SectionTopBar (primaryAction below 720 px) — gen-usage shows 0 direct uses; that is expected, not unused.

Used in no file in the app (main)

@acrm/ui <Fab>.acrm-fab .acrm-fab.extended .acrm-fab.inline .has-fabSourceStory
ExamplesCodeUsageAccessibilityChangelog

The floating primary action of a screen on a phone (Attio pattern, approved by the owner 28 Sep 2026, acrm !4088). Below 720 px the bar keeps only the title and ⋮; the one primary action floats bottom-right. Nobody renders Fab by hand: SectionTopBar / PageHeader draw it from primaryAction given as data ({ label, icon, onClick, kind?, disabled?, loading? }); on desktop the same data is the primary Button in the bar.

When to use

  • A list or record screen with one primary action, on a phone — it comes from the bar's primaryAction data.
  • Create („+ Nový kontakt", „Nová firma") — kind: 'create': the round 56 px Fab with the plus glyph only.
  • Any other primary (Rezervovat, Zaúčtovat, Poslat e-mailem) — the extended Fab: glyph + visible label, 48 px.

When not to use

  • Desktop — the primary stays a Button in the bar.
  • A second or third action — those are secondaryActions in the bar's ⋮.
  • Inside a dialog or a bottom sheet — they have their own footer CTA (<Button touch>).
  • A round Fab with a glyph other than „+" — a glyph alone does not say what happens; use the extended Fab.

Anatomy

  1. .acrm-fab — accent pill, --fg-on-accent, --shadow-md; round 56×56 with a --ico-xl glyph, or .extended 48 px high with a --ico-lg glyph and a 500 15px label.
  2. Position — portalled to <body>, fixed --sp-5 from the right and bottom edge, above the safe area and above the dock of minimised windows; z-index 58 = under every sheet (scrim 59) and dialog.
  3. body.has-fab while a Fab lives — .as-main gets a bottom reserve so content ends above the Fab lane and the last row of a list never slides under it (the sticky summary row stays pinned above the lane).
  4. inline — catalog / documentation only: no portal, no fixed position, visible on desktop.

Best practices

Do
  • Give the primary as data with a glyph; kind: 'create' only for Create.
  • Keep the label the same as on desktop — it is the Button's label.
  • Pass loading / disabled — the Fab is disabled while the action runs.
Don’t
  • Don't render Fab yourself next to a bar that already has a primary.
  • Don't put two Fabs on one screen, and don't put a Fab over a dialog.
  • Don't use the round Fab for anything but Create.

Content

  • Round: no visible text, the label is the accessible name („Nový kontakt").
  • Extended: the verb of the action, one or two words („Zaúčtovat", „Poslat e-mailem").
  • Section top bar (draws it), Button (the desktop primary), Menu button (the bar's ⋮), Bottom sheet.
  • Stories: components--fab--default, --variants, --states, --composition.

Source: docs/button/fab.usage.md · GitLab