FabButton
Styled by default. Flexible by design.
FabButton is a section-based action button builder for modern and legacy frontends. It gives teams one consistent API for grouped actions, while keeping visual customization and keyboard behavior predictable.
What is New in v1.6.0
- Floating button mode (
floating) for fixed viewport actions - 3x3 viewport positioning with
floatingPosition - Configurable viewport spacing with
floatingOffset - Floating menu trigger label via
floatingMenuLabel - Attached section panels with
panel,panelTitle,panelClassName,panelStyle, andpanelAriaLabel - Floating sections automatically collapse into a toggle menu in React, Vue, and Svelte
- Floating dropdown radius fix for
shape="pill" - Attached panel styling hooks through
.fab-button__attached-panel*classes
Why Teams Use FabButton
One Component, Many Actions
Compose grouped actions in a single control with section keys such as left, center, right, or custom labels.
Accessible by Default
Switch between tab order and toolbar navigation, with built-in shortcut matching and orientation controls.
Styling Without Lock-In
Use CSS variables in manual mode, or map to Tailwind/Bootstrap/custom class systems with library mode.
Portable Across Frameworks
Keep one section-based mental model across React, Vue, Svelte, and Web Component adapters.
Feature Support by Adapter
| Feature | React | Vue | Svelte | Web Component |
|---|---|---|---|---|
Section confirmation modal (confirm) | Yes | Yes | Yes | Yes |
| Per-section async state (manual) | Yes | Yes | Yes | Yes (data-async-state) |
| Promise auto async handling | Yes | Yes | Yes | No |
| Shortcut hint UI + shortcut metadata | Yes | Yes | Yes | Yes |
Responsive overflow mode (More menu) | Yes | Yes | Yes | No |
| Floating 3x3 positioning | Yes | Yes | Yes | Yes |
| Floating attached section panels | Yes | Yes | Limited/simple content | No |
Role and permission guards (visibleWhen / disabledWhen) | Yes | Yes | Yes | No |
Split-button preset (actionPreset="split") | Yes | Yes | Yes | No |
Action analytics hook (onSectionAction) | Yes | Yes | Yes | Yes (section-action event) |
CSS mode config (manual / library) + theme config | Yes | Yes | Yes | Yes |
Package Structure
@rezafab/fab-button-core: core types and class/CSS-variable helpers@rezafab/fab-button-styles: defaultstyle.css@rezafab/fab-button-theme-tokens: shared theme tokens (tokens.css+ JS token object)@rezafab/fab-button-react: React adapter@rezafab/fab-button-vue: Vue adapter@rezafab/fab-button-svelte: Svelte adapter@rezafab/fab-button-element: Custom Element adapter@rezafab/docs: Storybook documentation app
Recommended path for new users: start from Getting Started, then open Playground to generate framework-specific snippets.