FloatingActionBar help users perform an action from a list.
View source codeA 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.
{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}
/>
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.
3 selected
<ActionBar
actions={[
{
text: "Archive",
onClick: () => "Archive",
iconName: "archive",
tooltipContent: "This is some useful information in a tooltip",
tooltipPlacement: "top",
},
{
text: "Edit",
onClick: () => "Edit",
iconName: "pen",
},
{
text: "Download",
onClick: () => "Download",
iconName: "arrow-down-tray",
},
]}
>
3 selected
</ActionBar>
| Account payable | Supplier name | Amount | |
|---|---|---|---|
| 401AIRBNB | Airbnb | 2€ | |
| 401DELOITTE | Deloitte | 324$ | |
| 401MAILCHIMP | Mailchimp | 13.29€ | |
| 401APPLE | Apple | 0€ |