Komdes
Components

Action Bar

A floating toolbar that appears conditionally, typically used for bulk actions on selected items.

Overview

ActionBar is a highly interactive, accessible, and floating toolbar. It is commonly used as a context menu at the bottom of the screen (or container) when items are selected in a list or data table, providing quick access to bulk actions.

Import

Anatomy

Usage Notes

Portal Container

By default, the ActionBar uses ReactDOM.createPortal to render directly into document.body and is styled with fixed positioning to appear at the bottom of the viewport.

If you want to render the ActionBar inside a specific container (like the preview box above), you can pass a DOM element reference to the portalContainer prop, and ensure the parent container acts as a containing block for fixed positioning (e.g., using transform: translateZ(0) or similar CSS properties).

How is this guide?

On this page