Action Bar
Action bars display information and actions related to the current scope.


Action bars can be used at any level of the application and may play many roles, from control panels to a checkout area with a price tag.

By default, it's displayed as an area with a top divider, but it can also be used as one positioned at the top of the content. For instance, we're using ActionBar as a header for this page.


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 tablet and desktop screens.


Using ActionBar for actions or meta information is one of the popular use-cases. It can be easily combined with Arcade utilities and other components to build the layout you need.


By default, there are no extra accessibility attributes required for ActionBar to be accessible as it just visually separates the content. However, if ActionBar has a semantic meaning, it can leverage custom html attributes, like role or aria-attributes.


positiontop, bottombottomfalse
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element