Action bar

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


Usage

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>
<View gap={3} direction="row">
<View backgroundColor="neutral-faded" height={10} width={10} />
<View.Item grow>
<View backgroundColor="neutral-faded" height={10} />
</View.Item>
</View>
</ActionBar>

Position

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 position="top">
<View backgroundColor="neutral-faded" height={10} />
</ActionBar>

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

<ActionBar size="large">
<View backgroundColor="neutral-faded" height={10} />
</ActionBar>

Elevation

When rendering ActionBar on top of the rest of the content, you can use elevated property to add a shadow to it based on its position.

<ActionBar elevated>
<View backgroundColor="neutral-faded" height={10} />
</ActionBar>

Composition

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

<Card padding={0}>
<View backgroundColor="neutral-faded" height={50} />
<ActionBar>
<View direction="row" gap={4}>
<View.Item columns={6}>
<Button color="primary" fullWidth>
Confirm
</Button>
</View.Item>
<View.Item columns={6}>
<Button color="critical" variant="ghost" fullWidth>
Cancel
</Button>
</View.Item>
</View>
</ActionBar>
</Card>

Accessibility

  • 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:
<ActionBar attributes={{ role: "region", "aria-labelledby": "label-id" }}>
<Text as="h3" variant="title-3" attributes={{ id: "label-id" }}>
Action bar title
</Text>
</ActionBar>