Action bar

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


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>

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>

You can change ActionBar paddingInline and paddingBlock the same way as you can do it for View.

<ActionBar paddingInline={4} paddingBlock={3}>
  <View backgroundColor="neutral-faded" height={10} />
</ActionBar>

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>

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="critical" variant="faded" fullWidth>
          Cancel
        </Button>
      </View.Item>
      <View.Item columns={6}>
        <Button color="primary" fullWidth>
          Confirm
        </Button>
      </View.Item>
    </View>
  </ActionBar>
</Card>
  • 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>
Previous
Next