Action Bar

Action bars display information and actions related to the current scope.
Works with any type of content


Usage

ActionBar can be used at any level of the application and may play many 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 Stack.

Positioning

ActionBar can be used for displaying it as a top or bottom content section. Changing its position will change the side at which it is divided from the rest of the 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.

Composition

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

Accessibility

ActionBar doesn't require any additional accessibility logic when used for separating the content. If ActionBar has a different semantic meaning in a specific use-case, you can provide accessibility related attributes to it, like role or aria-attributes. Additionally it can be linked with its internal content using accessibility ids.

Properties

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