1<FloatingActions>
2  <Chip
3    variant="outline"
4    size="large"
5    color="accent"
6    leadingIcon={<TransformIcon />}
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

Compose the bar from existing Apsara primitives. FloatingActions provides the container and a matching vertical separator; everything inside is freely composable.

1import { FloatingActions, Chip, Button } from '@raystack/apsara'
2
3<FloatingActions>
4  <Chip isDismissible>2 selected</Chip>
5  <FloatingActions.Separator />
6  <Button>Move to</Button>
7  <Button>Actions</Button>
8</FloatingActions>

API Reference

Root

The floating container. Renders as a role="toolbar" element by default.

Separator

A vertical divider sized to the bar's content.

Examples

Bulk actions

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

1<FloatingActions>
2  <Chip
3    variant="outline"
4    size="large"
5    color="accent"
6    leadingIcon={<TransformIcon />}
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>
2  <IconButton variant="text" color="neutral" size="small">
3    <Pencil2Icon />
4  </IconButton>
5  <IconButton variant="text" color="neutral" size="small">
6    <UploadIcon />
7  </IconButton>
8  <FloatingActions.Separator />
9  <IconButton variant="text" color="neutral" size="small">
10    <InfoCircledIcon />
11  </IconButton>
12</FloatingActions>

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" so it is announced as a group of interactive controls. Override the role prop when a different grouping is more appropriate.
• 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").