A fixed-position bottom bar for bulk selection actions
ActionBar is a fixed-position bottom bar that appears when items are selected, providing contextual bulk actions. It is built using Affix , Transition and Paper components.
Content inside ActionBar is composed freely using existing Mantine components ( Button , ActionIcon , Group , Text , etc.). Use ActionBar.Divider to add a vertical divider and ActionBar.CloseButton to add a close button that triggers the onClose callback.
ActionBar root has role="group" and the divider has role="separator" so that assistive technologies announce the controls as one bar. Set aria-label to describe what the actions apply to.
By default, ActionBar is centered at the bottom of the screen. You can change the position with the position prop. When using non-centered positions, set styles={{ root: { marginInline: 0 } }} to remove the auto centering.
By default, ActionBar does not close when Escape key is pressed. Set closeOnEscape to enable this behavior:
ActionBar is animated with the Transition component, { transition: 'pop', duration: 200 } by default. Use transitionProps to change the transition, its duration and timing function:
By default, the action bar is removed from the DOM when it is closed. Set keepMounted to keep it mounted and hide it with display: none instead – for example, if the bar contains form state that must be preserved between openings:
ActionBar is rendered inside Portal by default – this way it is not affected by overflow and transform styles of its parent elements. Set withinPortal={false} to render it in place, and use portalProps to pass props down to the Portal component.