Action bar

import { ActionBar } from "reshaped";
import type { ActionBarProps } from "reshaped";
Related components
Works with any type of content


ActionBar can be used at any application level and may play many different roles, from control panels to price display areas in the product checkout. It provides a content slot and allows any content layout composition with utilities like View.


ActionBar can be used for displaying it as a top or bottom content section. Changing its position will change the side where the divider is displayed


ActionBar supports large size for the page level layout areas, like header or footer. Using it will increase the padding size of the ActionBar on desktop screens.


ActionBar is highly composable and efficiently works for combining layout utilities, text content, action elements, and other components.


  • When used for displaying a set of controls, use it together with the toolbar role and additional keyboard navigation.
  • Action bar can be linked with its internal content using accessibility ids: