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 with one of six position values, like bottom or top-end. top and bottom position can be used for the full width sidebars, while other positions apply a default offset value.

You can modify the offset value yourself and apply a different positionType, like absolute or fixed. Use the active property to show or hide the bar.

<View
  backgroundColor="neutral-faded"
  height="160px"
  borderRadius="large"
  overflow="hidden"
>
  <ActionBar
    position="bottom-end"
    offset={2}
    positionType="absolute"
    padding={2}
    active={toggle.active}
  >
    <View direction="row" gap={2}>
      <Button onClick={handleSave} color="primary">
        Save
      </Button>
      <Button onClick={handleCancel} variant="outline">
        Cancel
      </Button>
    </View>
  </ActionBar>
</View>

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>