Floating Actions

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

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 (default) renders with position: fixed anchored to the viewport via side and align — use it when the bar should follow the user as the page scrolls (bulk-selection toolbars, contextual action trays). inline opts out of viewport positioning so the bar flows with surrounding content.

1<div
2  style={{
3    position: "relative",
4    width: "100%",
5    alignSelf: "stretch",
6    transform: "translateZ(0)",
7  }}
8>
9  <div style={{ height: "100%", overflowY: "auto" }}>
10    <div
11      style={{
12        height: 500,
13        border: "2px dashed var(--rs-color-border-base-secondary)",
14        margin: "var(--rs-space-4)",
15        boxSizing: "border-box",

Examples

Bulk actions

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

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

Icon-only actions

Use IconButton inside the bar for compact toolbars.

1<div style={{ paddingBlock: "var(--rs-space-9)" }}>
2  <FloatingActions
3    variant="inline"
4    aria-label="Row actions"
5    style={{ gap: "var(--rs-space-5)" }}
6  >
7    <IconButton aria-label="Edit" variant="text" color="neutral" size="small">
8      <Pencil2Icon />
9    </IconButton>
10    <IconButton aria-label="Upload" variant="text" color="neutral" size="small">
11      <UploadIcon />
12    </IconButton>
13    <FloatingActions.Separator />
14    <IconButton
15      aria-label="More info"

Side

side controls which vertical edge of the viewport the bar pins to.

1<div
2  style={{
3    position: "relative",
4    width: "100%",
5    height: 240,
6    transform: "translateZ(0)",
7  }}
8>
9  <div
10    style={{
11      position: "absolute",
12      inset: "0 var(--rs-space-4)",
13      border: "2px dashed var(--rs-color-border-base-secondary)",
14      boxSizing: "border-box",
15    }}

Align

align controls the horizontal alignment of the bar along the chosen side.

1<div
2  style={{
3    position: "relative",
4    width: "100%",
5    height: 240,
6    transform: "translateZ(0)",
7  }}
8>
9  <div
10    style={{
11      position: "absolute",
12      inset: "0 var(--rs-space-4)",
13      border: "2px dashed var(--rs-color-border-base-secondary)",
14      boxSizing: "border-box",
15    }}

Disabled

disabled on the root cascades to every focusable item registered with the underlying Toolbar primitive, so the whole bar can be greyed out in one place (e.g. while a bulk action is pending).

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

Grouped actions

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

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

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  return (
3    <div
4      style={{
5        position: "relative",
6        width: "100%",
7        height: "320px",
8        transform: "translateZ(0)",
9      }}
10    >
11      <div style={{ height: "100%", overflowY: "auto" }}>
12        <div
13          style={{
14            height: "800px",
15            border: "2px dashed var(--rs-color-border-base-secondary)",

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").