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