Action bar

<View width="400px" maxWidth="100%">
  <ActionBar paddingInline={4} paddingBlock={3}>
    <View backgroundColor="neutral-faded" height={10} />
  </ActionBar>
</View>

ActionBar can be used at any application level and may fulfill many different roles, from control panels to price display areas in product checkout processes. It provides a content slot and allows for 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 to display it as a top or bottom content section. Changing its position will alter the side where the divider is displayed.

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

You can control its vertical and horizontal padding separately with paddingInline and paddingBlock properties.

<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 the 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>

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