Floating Actions

A floating bar for surfacing contextual actions, typically shown when items are selected.
1<FloatingActions variant="inline" aria-label="Selection actions">
2  <Chip
3    variant="outline"
4    size="large"
5    color="accent"
6    leadingIcon={<CheckCircledIcon />}
7    isDismissible
8  >
9    2 selected
10  </Chip>
11  <FloatingActions.Separator />
12  <Button variant="outline" color="neutral" size="small">
13    Move to
14  </Button>
15  <Button variant="outline" color="neutral" size="small">

Anatomy

Import and assemble the component:

1import { FloatingActions, Chip, Button } from "@raystack/apsara";
2

3<FloatingActions aria-label="Selection actions">
4  <Chip isDismissible>2 selected</Chip>
5  <FloatingActions.Separator />
6  <Button>Move to</Button>
7  <Button>Actions</Button>
8</FloatingActions>

API Reference

Built on top of Base UI's Toolbar primitive, so keyboard navigation, roving focus, and the role="toolbar" semantics come from the primitive.

Root

The container. Pins itself to the viewport by default (variant="floating") and forwards the underlying Toolbar primitive props (disabled, orientation, loopFocus, plus all <div> attributes).

Prop

Type

Group

Cluster related items so that the toolbar treats them as a single navigation unit. Useful when you have a few destructive actions you want to disable together (disabled cascades to every focusable child).

Prop

Type

Separator

A vertical divider sized to the bar's content. Built on top of Separator.

Prop

Type

Variants

Floating

The default. Renders with position: fixed and is anchored to the viewport via side and align. Use this when the bar should follow the user as the page scrolls (bulk-selection toolbars, contextual action trays).

1<FloatingActions side="bottom" align="center" aria-label="Selection actions">
2  <Chip
3    variant="outline"
4    size="large"
5    color="accent"
6    leadingIcon={<CheckCircledIcon />}
7    isDismissible
8  >
9    2 selected
10  </Chip>
11  <FloatingActions.Separator />
12  <Button variant="outline" color="neutral" size="small">
13    Move to
14  </Button>
15  <Button variant="outline" color="neutral" size="small">

Inline

Opt out of viewport positioning when you want the bar to flow with surrounding content (e.g. inside a card, table cell, or storybook frame).

1<FloatingActions variant="inline" aria-label="Selection actions">
2  <Chip
3    variant="outline"
4    size="large"
5    color="accent"
6    leadingIcon={<CheckCircledIcon />}
7    isDismissible
8  >
9    2 selected
10  </Chip>
11  <FloatingActions.Separator />
12  <Button variant="outline" color="neutral" size="small">
13    Move to
14  </Button>
15  <Button variant="outline" color="neutral" size="small">

Examples

Bulk actions

Pair a dismissible Chip with action buttons to build a selection toolbar.

1<FloatingActions variant="inline" aria-label="Bulk actions">
2  <Chip
3    variant="outline"
4    size="large"
5    color="accent"
6    leadingIcon={<CheckCircledIcon />}
7    isDismissible
8  >
9    5 selected
10  </Chip>
11  <FloatingActions.Separator />
12  <Button variant="outline" color="neutral" size="small">
13    Archive
14  </Button>
15  <Button variant="outline" color="neutral" size="small">

Icon-only actions

Use IconButton inside the bar for compact toolbars.

1<FloatingActions variant="inline" aria-label="Row actions">
2  <IconButton aria-label="Edit" variant="text" color="neutral" size="small">
3    <Pencil2Icon />
4  </IconButton>
5  <IconButton aria-label="Upload" variant="text" color="neutral" size="small">
6    <UploadIcon />
7  </IconButton>
8  <FloatingActions.Separator />
9  <IconButton
10    aria-label="More info"
11    variant="text"
12    color="neutral"
13    size="small"
14  >
15    <InfoCircledIcon />

Grouped actions

Use FloatingActions.Group to cluster related items so they navigate as one unit and can be disabled together.

1<FloatingActions variant="inline" aria-label="Bulk actions">
2  <Chip
3    variant="outline"
4    size="large"
5    color="accent"
6    leadingIcon={<CheckCircledIcon />}
7    isDismissible
8  >
9    3 selected
10  </Chip>
11  <FloatingActions.Separator />
12  <FloatingActions.Group>
13    <Button variant="outline" color="neutral" size="small">
14      Archive
15    </Button>

Scrolling context

The floating variant stays pinned to the viewport (or the nearest containing block) while content scrolls beneath it — the canonical use case for a bulk-selection bar over a long list or table.

1(function ScrollingDemo() {
2  const rows = Array.from({ length: 20 }, (_, i) => i + 1);
3  return (
4    <div
5      style={{
6        position: "relative",
7        height: "320px",
8        overflowY: "auto",
9        transform: "translateZ(0)",
10        border: "1px solid var(--rs-color-border-base-primary)",
11        borderRadius: "var(--rs-radius-2)",
12        padding: "var(--rs-space-5)",
13      }}
14    >
15      <Flex direction="column" gap="small">

Use with DataTable

For the row-selection pattern — rendering this bar over a DataTable and wiring it to selected rows — see DataTable → Row selection.

Accessibility

  • The root uses role="toolbar" (enforced by the Base UI Toolbar primitive) and is announced as a group of interactive controls. Keyboard focus moves between toolbar items with the arrow keys.
  • The separator renders with role="separator" and aria-orientation="vertical" via the Base UI primitive, communicating structural grouping between action clusters.
  • Provide an aria-label on the root when the toolbar's purpose is not obvious from its contents (e.g. aria-label="Selection actions").