FloatingBar

FloatingBar

<FloatingBar visible={selected.length > 0} aria-label="Bulk actions">
  <div>
    <Text size="sm">{selected.length} selected</Text>
    <Button tone="danger" variant="ghost" size="sm">Delete</Button>
    <Button variant="solid" size="sm">Export</Button>
  </div>
</FloatingBar>

Install: @helixui/core

import { FloatingBar } from '@helixui/core'

status: stable · since: 0.1.0

Tags: floating, bulk-actions, selection, toolbar

Anatomy

┌── floating bar ──┐
│ 3 selected   ✕  Delete  Move ▾ │
└─────────────────┘

Layout

• display — fixed
• width — content
• height — content
• intrinsicSize — centered horizontally, near bottom of viewport
• stackable — false
• fullBleed — false

Visual

A pill-shaped surface with strong shadow (shadow.lg) that floats over the page content. Shows a leading status (e.g. “3 selected”), a divider, then trailing actions.

Props

Name	Type	Default	Description
placement	'bottom' | 'top'	bottom	Edge to anchor to.
visible	boolean	true	Show/hide with animation. Use to reveal on selection.

Slots

• children — a single pill-shaped wrapper that contains the actions

Tokens used

color.bg.surface.default, color.border.default, color.text.primary, radius.full, space.2, space.3, space.4, font.family.sans, font.size.sm, shadow.lg

Accessibility

Role: toolbar

Notes

• Provide an aria-label on the bar describing the available actions (“Bulk actions on N items”).
• The bar is aria-hidden when not visible, removing it from the tab order.

Composes with

Component	Relation	Note
Table	sibling	Common over a Table during multi-select.
List	sibling	Or over a List with selectable rows.
Button	sibling
IconButton	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

bulk row actions

“floating bar showing 3 selected with Delete and Move”

<FloatingBar visible={count > 0} status={`${count} selected`}>
  <Button onPress={remove}>Delete</Button>
  <Button onPress={move}>Move</Button>
</FloatingBar>

Related

• Button
• IconButton