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

Keyboard

  • Tab reaches the Fab after the page content (it is portalled to the end of <body>); Enter / Space runs the action.

ARIA

  • Round Fab: aria-label and title = the primary's label („Nový kontakt").
  • Extended Fab: the visible label is the accessible name; no aria-label.
  • Disabled (or loading) = native disabled.
  • On desktop no Fab is rendered at all — the bar's primary Button is the only element with that name (no duplicate for screen readers).

Focus

  • :focus-visible draws a 2 px --accent outline with a 2 px offset.

Contrast

  • --fg-on-accent on --accent — the same pair as the primary Button.

Known limits

  • The Fab covers content while scrolling (by design); at the end of a list the content ends above the Fab lane.

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