Action bar

ActionBar can be used anywhere in your application and can serve various roles, such as a page header, control panel, or price display area in the checkout process. It provides a content slot and supports layout composition using utilities like View.

<ActionBar>
  <View gap={3} direction="row">
    <View backgroundColor="neutral-faded" height={10} width={10} />
    <View grow backgroundColor="neutral-faded" height={10} />
  </View>
</ActionBar>

ActionBar can be used 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>

Control its vertical and horizontal padding separately with the paddingInline and paddingBlock properties. Values you pass are applied as multipliers of the x1 unit token.

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

When rendering ActionBar on top of the rest of the content, use the elevated property to add a shadow.

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

ActionBar is very flexible and well for combining layouts, text elements, actions, 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 supports responsive syntax for the paddingInline and paddingBlock properties. Use object syntax to control their values based on the viewport size. Responsive properties are mobile-first, so selecting a value for a viewport will also apply it to all wider viewports.

<ActionBar paddingInline={{ s: 4, l: 6 }} />

• When used for displaying a set of controls, use it with the toolbar role and additional keyboard navigation.
• Link the action bar 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>