ActionBar

Install: npm install @mantine/core@9.7.1 @mantine/hooks@9.7.1

Version and compatibility

Pinned Mantine Core 9.7.1 requires React and React DOM ^19.2.0 and matching @mantine/hooks@9.7.1, from the installed npm package's peerDependencies. Do not force it into React 18 or another incompatible version. Explain upgrade impact and agree on a plan with the project owner; do not hide conflicts with --force/--legacy-peer-deps. The native Provider enables theme.respectReducedMotion and uses forceColorScheme for light/dark.

Use case

Present actions for the current selection.

Native props used by this example

These props are extracted from the local typechecked JSX and grouped by their owning native component. This is not an exhaustive prop list; see pinned source signatures and inheritance below.

Interaction and state checks

Current scenarios: Default. Check actual behavior after selecting supported disabled/error/read-only scenarios; components without those native states do not receive invented universal props. Verify keyboard focus and exits, then connect changed values through the native callback signature.

Business integration boundary

Demo content/state is local, without server persistence, authorization or fetching. A static display component is not a completed business workflow.

Host setup

Install pinned @mantine/core and @mantine/hooks, import @mantine/core/styles.css at the entry and use MantineProvider. The example's theme/variant are JGuang-authored host props, not universal native component APIs; forceColorScheme synchronizes the app theme. Native implementation source is a reading reference: use npm exports rather than copying internal engines. This batch covers Core, not dates/charts/forms extension packages. Detailed upstream prose remains English.

Runnable usage

import { useState } from 'react';
import * as M from '@mantine/core';
import '@mantine/core/styles.css';


function ComponentPreview({ variant = 'Default' }: { variant?: string }) {
const [open, setOpen] = useState(false);
return <M.ActionBar opened><M.Group><M.Text>3 selected</M.Text><M.Button onClick={() => setOpen(!open)}>{open ? "Done" : "Apply"}</M.Button></M.Group></M.ActionBar>;
}
export default function Example({ variant = 'Default', theme = 'light' }: { variant?: string; theme?: 'light' | 'dark' }) {
return <M.MantineProvider forceColorScheme={theme} theme={{ respectReducedMotion: true }}><ComponentPreview variant={variant} /></M.MantineProvider>;
}

Preview states

Default

The example uses the native Mantine API. For supported input demos, change the local variant to Disabled, Invalid or Read only; these are example labels, not new component props. Keep the documented data, controlled values, stores and compound children when adapting the example.

Usage

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.

ActionBar content can be any React node. Use ActionBar.Divider to add a vertical divider and ActionBar.CloseButton to add a close button that calls onClose.

ActionBar root has role="group". Set aria-label to describe what the actions apply to.

With ActionIcon buttons

Placement

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.

Close on Escape

By default, ActionBar does not close when Escape key is pressed. Set closeOnEscape to enable this behavior:

Transitions

ActionBar is animated with the Transition component, { transition: 'pop', duration: 200 } by default. Use transitionProps to change the transition, its duration and timing function:

import { ActionBar, Button } from '@mantine/core';

function Demo() {
  return (
    <ActionBar opened transitionProps={{ transition: 'slide-up', duration: 300 }}>
      <Button>Delete</Button>
    </ActionBar>
  );
}

keepMounted

By default, the action bar is removed from the DOM when it is closed. Set keepMounted to keep it mounted, for example to preserve form state inside the bar. The hidden bar is wrapped in React Activity. To hide it with display: none instead, set transitionProps={{ keepMountedMode: 'display-none' }}:

import { ActionBar, Button } from '@mantine/core';

function Demo() {
  return (
    <ActionBar opened={false} keepMounted>
      <Button>Delete</Button>
    </ActionBar>
  );
}

Source-backed parameter reference

Implementation signatures and types are generated from the pinned local source. Optional props, native inherited types, union branches and never exclusions are preserved. A forwardRef implementation's ref is a React reference, not an additional business prop.

ActionBar(_props)

export type ActionBarStylesNames =
  | 'root'
  | ActionBarDividerStylesNames
  | ActionBarCloseButtonStylesNames;

export interface ActionBarProps
  extends
    BoxProps,
    AffixBaseProps,
    PaperBaseProps,
    StylesApiProps<ActionBarFactory>,
    ElementProps<'div'> {
  /** Controls visibility */
  opened: boolean;

  /** Called when close button is clicked or Escape is pressed */
  onClose?: () => void;

  /** Props passed down to the `Transition` component, `{ transition: 'pop', duration: 200 }` by default */
  transitionProps?: TransitionOverride;

  /** Key of `theme.shadows` or any valid CSS `box-shadow` value */
  shadow?: MantineShadow;

  /** Key of `theme.radius` or any valid CSS value to set `border-radius` */
  radius?: MantineRadius;

  /** Determines whether the action bar should be closed when `Escape` key is pressed, `false` by default */
  closeOnEscape?: boolean;

  /** `aria-label` of the actions group, `'Actions'` by default */
  'aria-label'?: string;

  /** If set, the action bar is kept in the DOM when closed. React `Activity` is used to preserve its state while it is hidden, `false` by default */
  keepMounted?: boolean;

  children: React.ReactNode;
}

export type ActionBarFactory = Factory<{
  props: ActionBarProps;
  ref: HTMLDivElement;
  stylesNames: ActionBarStylesNames;
  staticComponents: {
    Divider: typeof ActionBarDivider;
    CloseButton: typeof ActionBarCloseButton;
  };
}>;

export type Mod = Record<string, any> | string;

export type BoxMod = Mod | Mod[] | BoxMod[];

export interface BoxProps extends MantineStyleProps {
  /** Class added to the root element, if applicable */
  className?: string | undefined;

  /** Inline style added to root component element, can subscribe to theme defined on MantineProvider */
  style?: MantineStyleProp;

  /** CSS variables defined on root component element */
  __vars?: CssVarsProp;

  /** `size` property passed down the HTML element */
  __size?: string;

  /** Breakpoint above which the component is hidden with `display: none` */
  hiddenFrom?: MantineBreakpoint;

  /** Breakpoint below which the component is hidden with `display: none` */
  visibleFrom?: MantineBreakpoint;

  /** Determines whether component should be hidden in light color scheme with `display: none` */
  lightHidden?: boolean;

  /** Determines whether component should be hidden in dark color scheme with `display: none` */
  darkHidden?: boolean;

  /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
  mod?: BoxMod;
}

export type ElementProps<
  ElementType extends React.ElementType,
  PropsToOmit extends string = never,
> = Omit<React.ComponentProps<ElementType>, 'style' | PropsToOmit>;

export interface CSSProperties extends React.CSSProperties {
  [key: string]: any;
}

type MantineStyle = CSSProperties | ((theme: MantineTheme) => CSSProperties);

export type MantineStyleProp = MantineStyle | MantineStyle[] | MantineStyleProp[] | undefined;

export type CssVariable = `--${string}`;

export type CssVariables<Variable extends string = CssVariable> = Partial<Record<Variable, string>>;

export type CssVars<Variable extends string = CssVariable> =
  | CssVariables<Variable>
  | ((theme: MantineTheme) => CssVariables<Variable>)
  | CssVars<Variable>[];

export type CssVarsProp<Variable extends string = CssVariable> =
  | CssVars<Variable>
  | CssVars<Variable>[];

Native and external types

External types remain defined by React or native dependencies, not manually expanded into guessed props. The installed version's TypeScript definitions are authoritative.

Factory<{
  props: ActionBarProps;
  ref: HTMLDivElement;
  stylesNames: ActionBarStylesNames;
  staticComponents: {
    Divider: typeof ActionBarDivider;
    CloseButton: typeof ActionBarCloseButton;
  };
}>
MantineStyleProps
React.CSSProperties
MantineTheme
Partial<Record<Variable, string>>
Record<Variable, string>
Variable
MantineBreakpoint
Record<string, any>
AffixBaseProps
PaperBaseProps
StylesApiProps<ActionBarFactory>
React.ElementType
Omit<React.ComponentProps<ElementType>, 'style' | PropsToOmit>
React.ComponentProps<ElementType>
ElementType
PropsToOmit
TransitionOverride
MantineShadow
MantineRadius
React.ReactNode
HTMLDivElement
ActionBarDividerStylesNames
ActionBarCloseButtonStylesNames