Floating Action Bar

A persistent, contextual toolbar that floats over page content to provide quick access to key actions. The Floating Action Bar supports two modes: segmented control mode for navigation-style selection, and action mode for grouping related action buttons.

Overview

Resources

Changelog

Source code

Storybook

Figma

Install

yarn add @camp/floating-action-bar

Props

Prop	Type	Default	Description
`items` *	`FloatingActionBarSegmentModeItem[] \| FloatingActionBarActionModeItem[]`	—	Array of segment items to display. Dividers are allowed but links are not available in segment mode. Array of action items to display. Supports action buttons, links, and dividers.
`mode` *	`"segment" \| "action"`	—	The mode of the FloatingActionBar. 'segment' renders items as segmented control buttons with tab-like selection behavior and uses all-or-nothing overflow (if any item overflows, all items move to the overflow menu). The mode of the FloatingActionBar. 'action' renders items as action buttons where each handles its own click.
`style` †	`CSSProperties`	—
`fixed`	`boolean`	`true`	Whether to use fixed positioning (stays visible while scrolling). When `true`, the bar is fixed to the viewport at the specified `position` and `bottomOffset`. When `false`, the bar renders inline as a normal block element with no positioning applied (the `position` prop is ignored).
`maxWidth`	`string`	`'85%'`	Maximum width of the component before overflow handling kicks in
`onValueChange`	`(value: string) => void`	—	Callback when the selected segment changes. Not available in action mode - selection is per-item via onClick
`position`	`"bottom-center" \| "bottom-left" \| "bottom-right"`	`'bottom-center'`	Position within the viewport when using fixed positioning. Note: This prop only takes effect when `fixed={true}`. When `fixed={false}`, the bar renders inline with no positioning applied.
`themed`	`boolean`	`true`	Allow the component to adapt to light/dark mode styling (default: true)
`value`	`string`	—	The ID of the currently selected segment (controlled). Not available in action mode - selection is per-item via onClick
`overflowPlaceholder` *	`string`	—	Placeholder text for the overflow dropdown trigger when no segment is selected. Required when mode is 'segment'.
`bottomOffset`	`number`	`16`	Bottom offset from viewport edge when using fixed positioning. Note: This prop only takes effect when `fixed={true}`.

Generated from @camp/floating-action-bar@12.7.0 source, ordered by production usage. * required. † standard HTML attribute — all native attributes are supported; only those with production usage are listed.

Usage

Segment mode

Use segment mode when the bar represents navigation between different views or steps. Selection is controlled at the component level via value and onValueChange.

import { FloatingActionBar } from '@camp/floating-action-bar';
import type { FloatingActionBarSegmentModeItem } from '@camp/floating-action-bar';
import { PencilEditSmall, GridSmall, UsersContactsSmall, SendSmall } from '@camp/icon';
import { useState } from 'react';
 
const SegmentedFloatingActionBar = () => {
  const [selectedSegment, setSelectedSegment] = useState('edit');
 
  const items: FloatingActionBarSegmentModeItem[] = [
    {
      id: 'edit',
      label: 'Edit',
      icon: <PencilEditSmall title="Edit" />,
    },
    {
      id: 'template',
      label: 'Template',
      icon: <GridSmall title="Template" />,
    },
    {
      id: 'audience',
      label: 'Audience',
      icon: <UsersContactsSmall title="Audience" />,
    },
    {
      id: 'send',
      label: 'Send',
      icon: <SendSmall title="Send" />,
    },
  ];
 
  return (
    <FloatingActionBar
      mode="segment"
      items={items}
      value={selectedSegment}
      onValueChange={setSelectedSegment}
      overflowPlaceholder="Select step"
    />
  );
};

Action mode

Use action mode when the bar contains independent action buttons that each handle their own click behavior.

import { FloatingActionBar } from '@camp/floating-action-bar';
import type { FloatingActionBarActionModeItem } from '@camp/floating-action-bar';
import { PipelineColumnsSmall, PencilEditSmall } from '@camp/icon';
 
const ActionFloatingActionBar = () => {
  const items: FloatingActionBarActionModeItem[] = [
    {
      id: 'layout',
      label: 'Layout',
      icon: <PipelineColumnsSmall title="Layout" />,
      onClick: () => console.log('Layout clicked'),
    },
    { id: 'divider-1', divider: true },
    {
      id: 'edit-classic',
      label: 'Edit in classic designer',
      icon: <PencilEditSmall title="Edit" />,
      onClick: () => console.log('Edit clicked'),
    },
  ];
 
  return <FloatingActionBar mode="action" items={items} />;
};

Link items in action mode

Action mode supports link items that navigate to URLs instead of triggering onClick handlers.

import type { FloatingActionBarLinkItem } from '@camp/floating-action-bar';
import { LinkMedium } from '@camp/icon';
 
const items: FloatingActionBarActionModeItem[] = [
  {
    id: 'edit',
    label: 'Edit',
    icon: <PencilEditSmall title="Edit" />,
    onClick: () => {},
  },
  { id: 'divider-1', divider: true },
  {
    id: 'docs-link',
    link: true,
    label: 'Documentation',
    href: 'https://help.activecampaign.com',
    target: '_blank',
    icon: <LinkMedium title="Documentation" />,
  },
];

Variations

Position

The bar can be positioned at bottom-left, bottom-center (default), or bottom-right when using fixed positioning.

<FloatingActionBar
  mode="segment"
  items={items}
  value={selectedSegment}
  onValueChange={setSelectedSegment}
  position="bottom-center" // 'bottom-left' | 'bottom-center' | 'bottom-right'
  overflowPlaceholder="Select step"
  bottomOffset={16} // Distance from bottom edge (default is 16px)
/>

Fixed vs inline positioning

By default, the bar uses fixed positioning to stay visible while scrolling. Set fixed={false} to render it inline as a normal block element.

// Fixed positioning (default) - stays visible while scrolling
<FloatingActionBar
  mode="action"
  items={items}
  fixed={true}
  bottomOffset={16} // Distance from bottom edge
/>
 
// Inline positioning - renders in document flow
<FloatingActionBar
  mode="action"
  items={items}
  fixed={false}
/>

Icon-only actions

Action items can display only their icon by setting iconOnly: true. The label remains available for accessibility.

const iconOnlyItems: FloatingActionBarActionModeItem[] = [
  {
    id: 'edit',
    label: 'Edit', // Used for accessibility
    icon: <PencilEditSmall title="Edit" />,
    iconOnly: true,
    onClick: () => {},
  },
  {
    id: 'template',
    label: 'Template',
    icon: <GridSmall title="Template" />,
    iconOnly: true,
    onClick: () => {},
  },
];

Disabled items

Both segment and action items can be disabled.

const items: FloatingActionBarSegmentModeItem[] = [
  {
    id: 'edit',
    label: 'Edit',
    icon: <PencilEditSmall title="Edit" />,
  },
  {
    id: 'template',
    label: 'Template',
    icon: <GridSmall title="Template" />,
    disabled: true, // This item is disabled
  },
];

Dividers

Add visual separators between items using divider items.

const items: FloatingActionBarActionModeItem[] = [
  {
    id: 'layout',
    label: 'Layout',
    icon: <PipelineColumnsSmall title="Layout" />,
    onClick: () => {},
  },
  { id: 'divider-1', divider: true }, // Visual separator
  {
    id: 'edit',
    label: 'Edit',
    icon: <PencilEditSmall title="Edit" />,
    onClick: () => {},
  },
];

Overflow handling (automatic)

When items don't fit within the maxWidth, overflow handling kicks in automatically:

Segment mode: Uses all-or-nothing overflow. If any item can't fit, all items move to a dropdown menu.
Action mode: Items overflow progressively from left to right into a "More" menu. In this example, the "Edit content" item was the leftmost item in the action bar that overflowed first, and it appears at the top of the overflow menu.

// Control overflow with maxWidth
<FloatingActionBar
  mode="segment"
  items={manyItems}
  value={selectedSegment}
  onValueChange={setSelectedSegment}
  maxWidth="300px" // Forces overflow at narrower widths
  overflowPlaceholder="Select step"
/>

Toggle theming

Prop: themed
Type: boolean
Default value: true

The themed prop toggles light and dark mode support for the FloatingActionBar component.

// Themed (default) - responds to light/dark mode
<FloatingActionBar themed={true} {...otherProps} />
 
// Unthemed - always light mode
<FloatingActionBar themed={false} {...otherProps} />

Best practices

When to use

Users need ongoing access to actions while scrolling
Actions apply to the current page or selection
User is in a focused state such as editing or previewing
To reduce cognitive load by keeping key actions visible

Common use cases:

Campaign editing and review
Layout or template selection
Multi-step setup flows
Preview or comparison states

When not to use

Actions are not critical or time sensitive
A standard page header or footer is sufficient
The page already has persistent navigation controls
Actions are destructive without confirmation

Mode selection

Use segment mode when items represent mutually exclusive views or steps (like tabs)
Use action mode when items are independent actions that can be triggered individually

Content guidelines

✅ DO

Use clear, concise labels (3 words maximum)
Include icons for faster visual recognition
Group related actions with dividers
Provide meaningful overflow placeholder text

🚫 DON’T

Don't use overly long labels that cause overflow
Don't mix navigation and action patterns in segment mode
Don't include more than 6-8 visible items
Don't use for destructive actions without confirmation

Accessibility

Keyboard support

Tab: Navigate to/from the floating action bar
Arrow keys: Navigate between items within the bar (segment mode)
Enter/Space: Select a segment item or trigger an action
Escape: Close overflow menu when open

The component uses role="toolbar" with an accessible label "Action bar"
Segment items communicate their selected state
Disabled items are announced as disabled
Overflow menu is properly labeled and navigable

Focus management

Focus is visible and follows keyboard navigation
Focus moves predictably through items
Overflow menu returns focus appropriately when closed

Item types reference

Segment mode items

type FloatingActionBarSegmentModeItem = FloatingActionBarSegmentItem | FloatingActionBarDividerItem;
 
type FloatingActionBarSegmentItem = {
  id: string;
  label: string;
  icon?: React.ReactNode;
  disabled?: boolean;
};

Action mode items

type FloatingActionBarActionModeItem =
  | FloatingActionBarActionItem
  | FloatingActionBarLinkItem
  | FloatingActionBarDividerItem;
 
type FloatingActionBarActionItem = {
  id: string;
  label: string;
  icon?: React.ReactNode;
  disabled?: boolean;
  onClick: (e?: React.MouseEvent<HTMLButtonElement>) => void;
  iconOnly?: boolean;
};
 
type FloatingActionBarLinkItem = {
  id: string;
  link: true;
  label: string;
  href: string;
  target?: '_blank' | '_self' | '_parent' | '_top';
  rel?: string;
  icon?: React.ReactNode;
};
 
type FloatingActionBarDividerItem = {
  id: string;
  divider: true;
};