FloatingActionBar

FloatingActionBar help users perform an action from a list.

Usage

A FloatingActionButton should be used when a user wants to perform an action that applies to multiple items, such as in a Table or a ListBox component.

Account payable	Supplier name	Amount
401AIRBNB	Airbnb	2€
401DELOITTE	Deloitte	324$
401MAILCHIMP	Mailchimp	13.29€
401APPLE	Apple	0€

{selectedRowIds.length > 0 && (
  <FloatingActionBar
    actions={[
      {
        text: "Archive",
        onClick: handleArchive,
        iconName: "archive",
      },
      {
        text: "Download",
        onClick: handleDownload,
        iconName: "arrow-down-tray",
      },
    ]}
  >
    {`${selectedRowIds.length} selected`}
  </FloatingActionBar>
)}
<Table
  data={data}
  columns={columns}
  getRowId={(row: DataRow) => String(row.id)}
  selectedRowIds={selectedRowIds}
  onRowSelectionChange={handleRowSelection}
  onAllRowsSelectionChange={handleAllRowsSelection}
/>

ActionBar

If you don't require the floating behavior of the FloatingActionButton, you can use the ActionBar component instead. The ActionBar component has the same props as the FloatingActionButton.

<ActionBar
  actions={[
    {
      text: "Archive",
      onClick: () => "Archive",
      iconName: "archive",
    },
    {
      text: "Edit",
      onClick: () => "Edit",
      iconName: "pen",
    },
    {
      text: "Download",
      onClick: () => "Download",
      iconName: "arrow-down-tray",
    },
  ]}
>
  3 selected
</ActionBar>