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

Usage

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.

Content

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.

Content

Sizes

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.

Content

Composition

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.

Content

Accessibility

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.

Action bar title

Properties

NameTypeDefaultRequiredComment
positiontop, bottombottomfalse
sizelarge-false
childrenReact.ReactNode-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element