ActionBar

Action bars are used for single and bulk selection patterns when a user needs to perform actions on one or more items at the same time.

install	`yarn add @adobe/react-spectrum`
added	3.27.0
usage	`import {ActionBar, ActionBarContainer} from '@adobe/react-spectrum'`

View guidelines

Spectrum

Example#

import type {Selection} from '@adobe/react-spectrum';

function Example() {
  let [selectedKeys, setSelectedKeys] = React.useState<Selection>(
    new Set(['photoshop'])
  );

  return (
    <ActionBarContainer height={300} maxWidth="size-6000">
      <ListView
        aria-label="ListView with action bar"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        <Item key="photoshop">Adobe Photoshop</Item>
        <Item key="illustrator">Adobe Illustrator</Item>
        <Item key="xd">Adobe XD</Item>
      </ListView>
      <ActionBar
        isEmphasized
        selectedItemCount={selectedKeys === 'all' ? 'all' : selectedKeys.size}
        onAction={(key) => alert(`Performing ${key} action...`)}
        onClearSelection={() => setSelectedKeys(new Set())}
      >
        <Item key="edit">
          <Edit />
          <Text>Edit</Text>
        </Item>
        <Item key="copy">
          <Copy />
          <Text>Copy</Text>
        </Item>
        <Item key="delete">
          <Delete />
          <Text>Delete</Text>
        </Item>
      </ActionBar>
    </ActionBarContainer>
  );
}

<Example />

import type {Selection} from '@adobe/react-spectrum';

function Example() {
  let [selectedKeys, setSelectedKeys] = React.useState<
    Selection
  >(new Set(['photoshop']));

  return (
    <ActionBarContainer height={300} maxWidth="size-6000">
      <ListView
        aria-label="ListView with action bar"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        <Item key="photoshop">Adobe Photoshop</Item>
        <Item key="illustrator">Adobe Illustrator</Item>
        <Item key="xd">Adobe XD</Item>
      </ListView>
      <ActionBar
        isEmphasized
        selectedItemCount={selectedKeys === 'all'
          ? 'all'
          : selectedKeys.size}
        onAction={(key) =>
          alert(`Performing ${key} action...`)}
        onClearSelection={() =>
          setSelectedKeys(new Set())}
      >
        <Item key="edit">
          <Edit />
          <Text>Edit</Text>
        </Item>
        <Item key="copy">
          <Copy />
          <Text>Copy</Text>
        </Item>
        <Item key="delete">
          <Delete />
          <Text>Delete</Text>
        </Item>
      </ActionBar>
    </ActionBarContainer>
  );
}

<Example />

import type {Selection} from '@adobe/react-spectrum';

function Example() {
  let [
    selectedKeys,
    setSelectedKeys
  ] = React.useState<
    Selection
  >(
    new Set([
      'photoshop'
    ])
  );

  return (
    <ActionBarContainer
      height={300}
      maxWidth="size-6000"
    >
      <ListView
        aria-label="ListView with action bar"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        <Item key="photoshop">
          Adobe Photoshop
        </Item>
        <Item key="illustrator">
          Adobe
          Illustrator
        </Item>
        <Item key="xd">
          Adobe XD
        </Item>
      </ListView>
      <ActionBar
        isEmphasized
        selectedItemCount={selectedKeys ===
            'all'
          ? 'all'
          : selectedKeys
            .size}
        onAction={(
          key
        ) =>
          alert(
            `Performing ${key} action...`
          )}
        onClearSelection={() =>
          setSelectedKeys(
            new Set()
          )}
      >
        <Item key="edit">
          <Edit />
          <Text>
            Edit
          </Text>
        </Item>
        <Item key="copy">
          <Copy />
          <Text>
            Copy
          </Text>
        </Item>
        <Item key="delete">
          <Delete />
          <Text>
            Delete
          </Text>
        </Item>
      </ActionBar>
    </ActionBarContainer>
  );
}

<Example />

Content#

An ActionBar is a companion component intended to facilitate bulk actions on selected items within a collection component. It consists of an ActionGroup, a clear button, and a count of selected items. It accepts a list of Item elements as children, each with a key prop. Alternatively, a function that returns Item elements is also supported as seen below. See the collection components docs for more details about this API. These Item elements are used to populate the buttons in the ActionBar, and follows the ActionGroup content guidelines for customization and labeling.

import type {Selection} from '@adobe/react-spectrum';

function Example() {
  let barItems = [
    { key: 'edit', label: 'Edit' },
    { key: 'copy', label: 'Copy' },
    { key: 'delete', label: 'Delete' }
  ];

  let [selectedKeys, setSelectedKeys] = React.useState<Selection>(
    new Set(['photoshop'])
  );

  return (
    <ActionBarContainer height={300} maxWidth="size-6000">
      <ListView
        aria-label="ListView with action bar"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        <Item key="photoshop">Adobe Photoshop</Item>
        <Item key="illustrator">Adobe Illustrator</Item>
        <Item key="xd">Adobe XD</Item>
      </ListView>
      <ActionBar
        items={barItems}
        selectedItemCount={selectedKeys === 'all' ? 'all' : selectedKeys.size}
        onAction={(key) => alert(`Performing ${key} action...`)}
        onClearSelection={() => setSelectedKeys(new Set())}
        isEmphasized
      >
        {(item) => (
          <Item key={item.key}>
            {item.label}
          </Item>
        )}
      </ActionBar>
    </ActionBarContainer>
  );
}

<Example />

import type {Selection} from '@adobe/react-spectrum';

function Example() {
  let barItems = [
    { key: 'edit', label: 'Edit' },
    { key: 'copy', label: 'Copy' },
    { key: 'delete', label: 'Delete' }
  ];

  let [selectedKeys, setSelectedKeys] = React.useState<
    Selection
  >(new Set(['photoshop']));

  return (
    <ActionBarContainer height={300} maxWidth="size-6000">
      <ListView
        aria-label="ListView with action bar"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        <Item key="photoshop">Adobe Photoshop</Item>
        <Item key="illustrator">Adobe Illustrator</Item>
        <Item key="xd">Adobe XD</Item>
      </ListView>
      <ActionBar
        items={barItems}
        selectedItemCount={selectedKeys === 'all'
          ? 'all'
          : selectedKeys.size}
        onAction={(key) =>
          alert(`Performing ${key} action...`)}
        onClearSelection={() =>
          setSelectedKeys(new Set())}
        isEmphasized
      >
        {(item) => (
          <Item key={item.key}>
            {item.label}
          </Item>
        )}
      </ActionBar>
    </ActionBarContainer>
  );
}

<Example />

import type {Selection} from '@adobe/react-spectrum';

function Example() {
  let barItems = [
    {
      key: 'edit',
      label: 'Edit'
    },
    {
      key: 'copy',
      label: 'Copy'
    },
    {
      key: 'delete',
      label: 'Delete'
    }
  ];

  let [
    selectedKeys,
    setSelectedKeys
  ] = React.useState<
    Selection
  >(
    new Set([
      'photoshop'
    ])
  );

  return (
    <ActionBarContainer
      height={300}
      maxWidth="size-6000"
    >
      <ListView
        aria-label="ListView with action bar"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        <Item key="photoshop">
          Adobe Photoshop
        </Item>
        <Item key="illustrator">
          Adobe
          Illustrator
        </Item>
        <Item key="xd">
          Adobe XD
        </Item>
      </ListView>
      <ActionBar
        items={barItems}
        selectedItemCount={selectedKeys ===
            'all'
          ? 'all'
          : selectedKeys
            .size}
        onAction={(
          key
        ) =>
          alert(
            `Performing ${key} action...`
          )}
        onClearSelection={() =>
          setSelectedKeys(
            new Set()
          )}
        isEmphasized
      >
        {(item) => (
          <Item
            key={item
              .key}
          >
            {item.label}
          </Item>
        )}
      </ActionBar>
    </ActionBarContainer>
  );
}

<Example />

Accessibility#

The contents of the ActionBar should follow the same accessibility guidelines as ActionGroup's items, see the ActionGroup docs for more details.

Internationalization#

To internationalize an ActionBar, the content provided to all child items should be localized. A localized string for the selection count and clear button aria-label will be provided automatically. For languages that are read right-to-left (e.g. Hebrew and Arabic), the layout of the ActionBar is automatically flipped.

Events#

Use the onClearSelection prop as a callback to handle when the clear button in the ActionBar is pressed. Additionally, the onAction prop can be used as a callback for when the user presses any of the buttons in the ActionBar. The key from the pressed <Item> will be passed to the callback.

The following example clears row selection within the TableView when the clear button is pressed and alerts the user as to what action is being taken on the selected rows when the buttons are pressed.

import type {Selection} from '@adobe/react-spectrum';

function ActionBarActions(props) {
  let [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set([2]));
  let rows = [
    { id: 1, name: 'Charizard', type: 'Fire, Flying', level: '67' },
    { id: 2, name: 'Blastoise', type: 'Water', level: '56' },
    { id: 3, name: 'Venusaur', type: 'Grass, Poison', level: '83' },
    { id: 4, name: 'Pikachu', type: 'Electric', level: '100' }
  ];

  return (
    <ActionBarContainer height="size-5000">
      <TableView
        aria-label="Table with action bar and controlled selection"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        <TableHeader>
          <Column key="name">Name</Column>
          <Column key="type">Type</Column>
          <Column key="level" align="end">Level</Column>
        </TableHeader>
        <TableBody items={rows}>
          {(item) => (
            <Row>
              {(columnKey) => <Cell>{item[columnKey]}</Cell>}
            </Row>
          )}
        </TableBody>
      </TableView>
      <ActionBar
        isEmphasized
        selectedItemCount={selectedKeys === 'all' ? 'all' : selectedKeys.size}
        onClearSelection={() => {
          setSelectedKeys(new Set());
        }}
        onAction={(key) => alert(`Performing ${key} action...`)}      >
        <Item key="edit">
          <Edit />
          <Text>Edit</Text>
        </Item>
        <Item key="delete">
          <Delete />
          <Text>Delete</Text>
        </Item>
      </ActionBar>
    </ActionBarContainer>
  );
}

import type {Selection} from '@adobe/react-spectrum';

function ActionBarActions(props) {
  let [selectedKeys, setSelectedKeys] = React.useState<
    Selection
  >(new Set([2]));
  let rows = [
    {
      id: 1,
      name: 'Charizard',
      type: 'Fire, Flying',
      level: '67'
    },
    {
      id: 2,
      name: 'Blastoise',
      type: 'Water',
      level: '56'
    },
    {
      id: 3,
      name: 'Venusaur',
      type: 'Grass, Poison',
      level: '83'
    },
    {
      id: 4,
      name: 'Pikachu',
      type: 'Electric',
      level: '100'
    }
  ];

  return (
    <ActionBarContainer height="size-5000">
      <TableView
        aria-label="Table with action bar and controlled selection"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        <TableHeader>
          <Column key="name">Name</Column>
          <Column key="type">Type</Column>
          <Column key="level" align="end">Level</Column>
        </TableHeader>
        <TableBody items={rows}>
          {(item) => (
            <Row>
              {(columnKey) => <Cell>{item[columnKey]}
              </Cell>}
            </Row>
          )}
        </TableBody>
      </TableView>
      <ActionBar
        isEmphasized
        selectedItemCount={selectedKeys === 'all'
          ? 'all'
          : selectedKeys.size}
        onClearSelection={() => {
          setSelectedKeys(new Set());
        }}
        onAction={(key) =>
          alert(`Performing ${key} action...`)}      >
        <Item key="edit">
          <Edit />
          <Text>Edit</Text>
        </Item>
        <Item key="delete">
          <Delete />
          <Text>Delete</Text>
        </Item>
      </ActionBar>
    </ActionBarContainer>
  );
}

import type {Selection} from '@adobe/react-spectrum';

function ActionBarActions(
  props
) {
  let [
    selectedKeys,
    setSelectedKeys
  ] = React.useState<
    Selection
  >(new Set([2]));
  let rows = [
    {
      id: 1,
      name: 'Charizard',
      type:
        'Fire, Flying',
      level: '67'
    },
    {
      id: 2,
      name: 'Blastoise',
      type: 'Water',
      level: '56'
    },
    {
      id: 3,
      name: 'Venusaur',
      type:
        'Grass, Poison',
      level: '83'
    },
    {
      id: 4,
      name: 'Pikachu',
      type: 'Electric',
      level: '100'
    }
  ];

  return (
    <ActionBarContainer height="size-5000">
      <TableView
        aria-label="Table with action bar and controlled selection"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        <TableHeader>
          <Column key="name">
            Name
          </Column>
          <Column key="type">
            Type
          </Column>
          <Column
            key="level"
            align="end"
          >
            Level
          </Column>
        </TableHeader>
        <TableBody
          items={rows}
        >
          {(item) => (
            <Row>
              {(columnKey) => (
                <Cell>
                  {item[
                    columnKey
                  ]}
                </Cell>
              )}
            </Row>
          )}
        </TableBody>
      </TableView>
      <ActionBar
        isEmphasized
        selectedItemCount={selectedKeys ===
            'all'
          ? 'all'
          : selectedKeys
            .size}
        onClearSelection={() => {
          setSelectedKeys(
            new Set()
          );
        }}
        onAction={(key) =>
          alert(
            `Performing ${key} action...`
          )}      >
        <Item key="edit">
          <Edit />
          <Text>
            Edit
          </Text>
        </Item>
        <Item key="delete">
          <Delete />
          <Text>
            Delete
          </Text>
        </Item>
      </ActionBar>
    </ActionBarContainer>
  );
}

Props#

ActionBarContainer props#

Name	Type	Description
`children`	`ReactNode`	The contents of the ActionBarContainer. Should include a ActionBar and the renderable content it is associated with.

Layout

Name	Type	Description
`flex`	`Responsive<string \| number \| boolean>`	When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN.
`flexGrow`	`Responsive<number>`	When used in a flex layout, specifies how the element will grow to fit the space available. See MDN.
`flexShrink`	`Responsive<number>`	When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN.
`flexBasis`	`Responsive<number \| string>`	When used in a flex layout, specifies the initial main size of the element. See MDN.
`alignSelf`	`Responsive<'auto' \| 'normal' \| 'start' \| 'end' \| 'center' \| 'flex-start' \| 'flex-end' \| 'self-start' \| 'self-end' \| 'stretch'>`	Overrides the `alignItems` property of a flex or grid container. See MDN.
`justifySelf`	`Responsive<'auto' \| 'normal' \| 'start' \| 'end' \| 'flex-start' \| 'flex-end' \| 'self-start' \| 'self-end' \| 'center' \| 'left' \| 'right' \| 'stretch'>`	Specifies how the element is justified inside a flex or grid container. See MDN.
`order`	`Responsive<number>`	The layout order for the element within a flex or grid container. See MDN.
`gridArea`	`Responsive<string>`	When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN.
`gridColumn`	`Responsive<string>`	When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN.
`gridRow`	`Responsive<string>`	When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN.
`gridColumnStart`	`Responsive<string>`	When used in a grid layout, specifies the starting column to span within the grid. See MDN.
`gridColumnEnd`	`Responsive<string>`	When used in a grid layout, specifies the ending column to span within the grid. See MDN.
`gridRowStart`	`Responsive<string>`	When used in a grid layout, specifies the starting row to span within the grid. See MDN.
`gridRowEnd`	`Responsive<string>`	When used in a grid layout, specifies the ending row to span within the grid. See MDN.

Spacing

Name	Type	Description
`margin`	`Responsive<DimensionValue>`	The margin for all four sides of the element. See MDN.
`marginTop`	`Responsive<DimensionValue>`	The margin for the top side of the element. See MDN.
`marginBottom`	`Responsive<DimensionValue>`	The margin for the bottom side of the element. See MDN.
`marginStart`	`Responsive<DimensionValue>`	The margin for the logical start side of the element, depending on layout direction. See MDN.
`marginEnd`	`Responsive<DimensionValue>`	The margin for the logical end side of an element, depending on layout direction. See MDN.
`marginX`	`Responsive<DimensionValue>`	The margin for both the left and right sides of the element. See MDN.
`marginY`	`Responsive<DimensionValue>`	The margin for both the top and bottom sides of the element. See MDN.

Sizing

Name	Type	Description
`width`	`Responsive<DimensionValue>`	The width of the element. See MDN.
`minWidth`	`Responsive<DimensionValue>`	The minimum width of the element. See MDN.
`maxWidth`	`Responsive<DimensionValue>`	The maximum width of the element. See MDN.
`height`	`Responsive<DimensionValue>`	The height of the element. See MDN.
`minHeight`	`Responsive<DimensionValue>`	The minimum height of the element. See MDN.
`maxHeight`	`Responsive<DimensionValue>`	The maximum height of the element. See MDN.

Positioning

Name	Type	Description
`position`	`Responsive<'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky'>`	Specifies how the element is positioned. See MDN.
`top`	`Responsive<DimensionValue>`	The top position for the element. See MDN.
`bottom`	`Responsive<DimensionValue>`	The bottom position for the element. See MDN.
`left`	`Responsive<DimensionValue>`	The left position for the element. See MDN. Consider using `start` instead for RTL support.
`right`	`Responsive<DimensionValue>`	The right position for the element. See MDN. Consider using `start` instead for RTL support.
`start`	`Responsive<DimensionValue>`	The logical start position for the element, depending on layout direction. See MDN.
`end`	`Responsive<DimensionValue>`	The logical end position for the element, depending on layout direction. See MDN.
`zIndex`	`Responsive<number>`	The stacking order for the element. See MDN.
`isHidden`	`Responsive<boolean>`	Hides the element.

Accessibility

Name	Type	Description
`id`	`string`	The element's unique identifier. See MDN.

Advanced

Name	Type	Description
`UNSAFE_className`	`string`	Sets the CSS className for the element. Only use as a last resort. Use style props instead.
`UNSAFE_style`	`CSSProperties`	Sets inline style for the element. Only use as a last resort. Use style props instead.

ActionBar props#

Name	Type	Default	Description
`children`	`ItemElement<object> \| ItemElement<object>[] \| ItemRenderer<object>`	—	An list of `Item` elements or a function. If the latter, a list of items must be provided using the `items` prop.
`selectedItemCount`	`number \| 'all'`	—	The number of selected items that the ActionBar is currently linked to. If 0, the ActionBar is hidden.
`items`	`Iterable<object>`	—	A list of items to display as children. Must be used with a function as the sole child.
`disabledKeys`	`Iterable<Key>`	—	A list of keys to disable.
`isEmphasized`	`boolean`	—	Whether the ActionBar should be displayed with a emphasized style.
`buttonLabelBehavior`	`'show' \| 'collapse' \| 'hide'`	`'collapse'`	Defines when the text within the buttons should be hidden and only the icon should be shown. When set to 'hide', the text is always shown in a tooltip. When set to 'collapse', the text is visible if space is available, and hidden when space is limited. The text is always visible when the item is collapsed into a menu.

Events

Name	Type	Description
`onClearSelection`	`() => void`	Handler that is called when the ActionBar clear button is pressed.
`onAction`	`( (key: Key )) => void`	Handler that is called when an ActionBar button is pressed.

Layout

Name	Type	Description
`flex`	`Responsive<string \| number \| boolean>`	When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN.
`flexGrow`	`Responsive<number>`	When used in a flex layout, specifies how the element will grow to fit the space available. See MDN.
`flexShrink`	`Responsive<number>`	When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN.
`flexBasis`	`Responsive<number \| string>`	When used in a flex layout, specifies the initial main size of the element. See MDN.
`alignSelf`	`Responsive<'auto' \| 'normal' \| 'start' \| 'end' \| 'center' \| 'flex-start' \| 'flex-end' \| 'self-start' \| 'self-end' \| 'stretch'>`	Overrides the `alignItems` property of a flex or grid container. See MDN.
`justifySelf`	`Responsive<'auto' \| 'normal' \| 'start' \| 'end' \| 'flex-start' \| 'flex-end' \| 'self-start' \| 'self-end' \| 'center' \| 'left' \| 'right' \| 'stretch'>`	Specifies how the element is justified inside a flex or grid container. See MDN.
`order`	`Responsive<number>`	The layout order for the element within a flex or grid container. See MDN.
`gridArea`	`Responsive<string>`	When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN.
`gridColumn`	`Responsive<string>`	When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN.
`gridRow`	`Responsive<string>`	When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN.
`gridColumnStart`	`Responsive<string>`	When used in a grid layout, specifies the starting column to span within the grid. See MDN.
`gridColumnEnd`	`Responsive<string>`	When used in a grid layout, specifies the ending column to span within the grid. See MDN.
`gridRowStart`	`Responsive<string>`	When used in a grid layout, specifies the starting row to span within the grid. See MDN.
`gridRowEnd`	`Responsive<string>`	When used in a grid layout, specifies the ending row to span within the grid. See MDN.

Spacing

Name	Type	Description
`margin`	`Responsive<DimensionValue>`	The margin for all four sides of the element. See MDN.
`marginTop`	`Responsive<DimensionValue>`	The margin for the top side of the element. See MDN.
`marginBottom`	`Responsive<DimensionValue>`	The margin for the bottom side of the element. See MDN.
`marginStart`	`Responsive<DimensionValue>`	The margin for the logical start side of the element, depending on layout direction. See MDN.
`marginEnd`	`Responsive<DimensionValue>`	The margin for the logical end side of an element, depending on layout direction. See MDN.
`marginX`	`Responsive<DimensionValue>`	The margin for both the left and right sides of the element. See MDN.
`marginY`	`Responsive<DimensionValue>`	The margin for both the top and bottom sides of the element. See MDN.

Sizing

Name	Type	Description
`width`	`Responsive<DimensionValue>`	The width of the element. See MDN.
`minWidth`	`Responsive<DimensionValue>`	The minimum width of the element. See MDN.
`maxWidth`	`Responsive<DimensionValue>`	The maximum width of the element. See MDN.
`height`	`Responsive<DimensionValue>`	The height of the element. See MDN.
`minHeight`	`Responsive<DimensionValue>`	The minimum height of the element. See MDN.
`maxHeight`	`Responsive<DimensionValue>`	The maximum height of the element. See MDN.

Positioning

Name	Type	Description
`position`	`Responsive<'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky'>`	Specifies how the element is positioned. See MDN.
`top`	`Responsive<DimensionValue>`	The top position for the element. See MDN.
`bottom`	`Responsive<DimensionValue>`	The bottom position for the element. See MDN.
`left`	`Responsive<DimensionValue>`	The left position for the element. See MDN. Consider using `start` instead for RTL support.
`right`	`Responsive<DimensionValue>`	The right position for the element. See MDN. Consider using `start` instead for RTL support.
`start`	`Responsive<DimensionValue>`	The logical start position for the element, depending on layout direction. See MDN.
`end`	`Responsive<DimensionValue>`	The logical end position for the element, depending on layout direction. See MDN.
`zIndex`	`Responsive<number>`	The stacking order for the element. See MDN.
`isHidden`	`Responsive<boolean>`	Hides the element.

Accessibility

Name	Type	Description
`id`	`string`	The element's unique identifier. See MDN.

Advanced

Name	Type	Description
`UNSAFE_className`	`string`	Sets the CSS className for the element. Only use as a last resort. Use style props instead.
`UNSAFE_style`	`CSSProperties`	Sets inline style for the element. Only use as a last resort. Use style props instead.

Visual options#

isEmphasized#

isEmphasized should be applied to the ActionBar when it should call attention, such as when floating in a TableView. It should be omitted if the ActionBar should blend in with the rest of the UI, directing a user’s focus to elsewhere in a view.

import type {Selection} from '@adobe/react-spectrum';

function Example({ isEmphasized }: { isEmphasized?: boolean }) {
  let [selectedKeys, setSelectedKeys] = React.useState<Selection>(
    new Set(['photoshop'])
  );

  return (
    <ActionBarContainer height={300} width="size-5000">
      <ListView
        aria-label="ListView with action bar"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        <Item key="photoshop">Adobe Photoshop</Item>
        <Item key="illustrator">Adobe Illustrator</Item>
        <Item key="xd">Adobe XD</Item>
      </ListView>
      <ActionBar
        isEmphasized={isEmphasized}        selectedItemCount={selectedKeys === 'all' ? 'all' : selectedKeys.size}
        onAction={(key) => alert(`Performing ${key} action...`)}
        onClearSelection={() => setSelectedKeys(new Set())}
      >
        <Item key="edit">
          <Edit />
          <Text>Edit</Text>
        </Item>
        <Item key="copy">
          <Copy />
          <Text>Copy</Text>
        </Item>
        <Item key="delete">
          <Delete />
          <Text>Delete</Text>
        </Item>
      </ActionBar>
    </ActionBarContainer>
  );
}

<Flex direction="row" gap="size-200" wrap>
  <Example />
  <Example isEmphasized />
</Flex>

import type {Selection} from '@adobe/react-spectrum';

function Example(
  { isEmphasized }: { isEmphasized?: boolean }
) {
  let [selectedKeys, setSelectedKeys] = React.useState<
    Selection
  >(new Set(['photoshop']));

  return (
    <ActionBarContainer height={300} width="size-5000">
      <ListView
        aria-label="ListView with action bar"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        <Item key="photoshop">Adobe Photoshop</Item>
        <Item key="illustrator">Adobe Illustrator</Item>
        <Item key="xd">Adobe XD</Item>
      </ListView>
      <ActionBar
        isEmphasized={isEmphasized}        selectedItemCount={selectedKeys === 'all'
          ? 'all'
          : selectedKeys.size}
        onAction={(key) =>
          alert(`Performing ${key} action...`)}
        onClearSelection={() => setSelectedKeys(new Set())}
      >
        <Item key="edit">
          <Edit />
          <Text>Edit</Text>
        </Item>
        <Item key="copy">
          <Copy />
          <Text>Copy</Text>
        </Item>
        <Item key="delete">
          <Delete />
          <Text>Delete</Text>
        </Item>
      </ActionBar>
    </ActionBarContainer>
  );
}

<Flex direction="row" gap="size-200" wrap>
  <Example />
  <Example isEmphasized />
</Flex>

import type {Selection} from '@adobe/react-spectrum';

function Example(
  { isEmphasized }: {
    isEmphasized?:
      boolean;
  }
) {
  let [
    selectedKeys,
    setSelectedKeys
  ] = React.useState<
    Selection
  >(
    new Set([
      'photoshop'
    ])
  );

  return (
    <ActionBarContainer
      height={300}
      width="size-5000"
    >
      <ListView
        aria-label="ListView with action bar"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        <Item key="photoshop">
          Adobe Photoshop
        </Item>
        <Item key="illustrator">
          Adobe
          Illustrator
        </Item>
        <Item key="xd">
          Adobe XD
        </Item>
      </ListView>
      <ActionBar
        isEmphasized={isEmphasized}        selectedItemCount={selectedKeys ===
            'all'
          ? 'all'
          : selectedKeys
            .size}
        onAction={(
          key
        ) =>
          alert(
            `Performing ${key} action...`
          )}
        onClearSelection={() =>
          setSelectedKeys(
            new Set()
          )}
      >
        <Item key="edit">
          <Edit />
          <Text>
            Edit
          </Text>
        </Item>
        <Item key="copy">
          <Copy />
          <Text>
            Copy
          </Text>
        </Item>
        <Item key="delete">
          <Delete />
          <Text>
            Delete
          </Text>
        </Item>
      </ActionBar>
    </ActionBarContainer>
  );
}

<Flex
  direction="row"
  gap="size-200"
  wrap
>
  <Example />
  <Example
    isEmphasized
  />
</Flex>

isDisabled#

To disable individual items, a list of disabledKeys can be provided.

import type {Selection} from '@adobe/react-spectrum';

function Example() {
  let [selectedKeys, setSelectedKeys] = React.useState<Selection>(
    new Set(['photoshop'])
  );

  return (
    <ActionBarContainer height={300} width="size-5000">
      <ListView
        aria-label="ListView with action bar"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        <Item key="photoshop">Adobe Photoshop</Item>
        <Item key="illustrator">Adobe Illustrator</Item>
        <Item key="xd">Adobe XD</Item>
      </ListView>
      <ActionBar
        disabledKeys={['edit']}        isEmphasized={true}
        selectedItemCount={selectedKeys === 'all' ? 'all' : selectedKeys.size}
        onAction={(key) => alert(`Performing ${key} action...`)}
        onClearSelection={() => setSelectedKeys(new Set())}
      >
        <Item key="edit">
          <Edit />
          <Text>Edit</Text>
        </Item>
        <Item key="copy">
          <Copy />
          <Text>Copy</Text>
        </Item>
        <Item key="delete">
          <Delete />
          <Text>Delete</Text>
        </Item>
      </ActionBar>
    </ActionBarContainer>
  );
}

<Example />

import type {Selection} from '@adobe/react-spectrum';

function Example() {
  let [selectedKeys, setSelectedKeys] = React.useState<
    Selection
  >(new Set(['photoshop']));

  return (
    <ActionBarContainer height={300} width="size-5000">
      <ListView
        aria-label="ListView with action bar"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        <Item key="photoshop">Adobe Photoshop</Item>
        <Item key="illustrator">Adobe Illustrator</Item>
        <Item key="xd">Adobe XD</Item>
      </ListView>
      <ActionBar
        disabledKeys={['edit']}        isEmphasized={true}
        selectedItemCount={selectedKeys === 'all'
          ? 'all'
          : selectedKeys.size}
        onAction={(key) =>
          alert(`Performing ${key} action...`)}
        onClearSelection={() => setSelectedKeys(new Set())}
      >
        <Item key="edit">
          <Edit />
          <Text>Edit</Text>
        </Item>
        <Item key="copy">
          <Copy />
          <Text>Copy</Text>
        </Item>
        <Item key="delete">
          <Delete />
          <Text>Delete</Text>
        </Item>
      </ActionBar>
    </ActionBarContainer>
  );
}

<Example />

import type {Selection} from '@adobe/react-spectrum';

function Example() {
  let [
    selectedKeys,
    setSelectedKeys
  ] = React.useState<
    Selection
  >(
    new Set([
      'photoshop'
    ])
  );

  return (
    <ActionBarContainer
      height={300}
      width="size-5000"
    >
      <ListView
        aria-label="ListView with action bar"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        <Item key="photoshop">
          Adobe Photoshop
        </Item>
        <Item key="illustrator">
          Adobe
          Illustrator
        </Item>
        <Item key="xd">
          Adobe XD
        </Item>
      </ListView>
      <ActionBar
        disabledKeys={[
          'edit'
        ]}        isEmphasized={true}
        selectedItemCount={selectedKeys ===
            'all'
          ? 'all'
          : selectedKeys
            .size}
        onAction={(
          key
        ) =>
          alert(
            `Performing ${key} action...`
          )}
        onClearSelection={() =>
          setSelectedKeys(
            new Set()
          )}
      >
        <Item key="edit">
          <Edit />
          <Text>
            Edit
          </Text>
        </Item>
        <Item key="copy">
          <Copy />
          <Text>
            Copy
          </Text>
        </Item>
        <Item key="delete">
          <Delete />
          <Text>
            Delete
          </Text>
        </Item>
      </ActionBar>
    </ActionBarContainer>
  );
}

<Example />

Name	Type	Description
`children`	`ReactNode`	Rendered contents of the item or child items.
`title`	`ReactNode`	Rendered contents of the item if `children` contains child items.
`textValue`	`string`	A string representation of the item's contents, used for features like typeahead.
`aria-label`	`string`	An accessibility label for this item.
`childItems`	`Iterable<T>`	A list of child item objects. Used for dynamic collections.
`hasChildItems`	`boolean`	Whether this item has children, even if not loaded yet.
`href`	`Href`	A URL to link to. See MDN.
`hrefLang`	`string`	Hints at the human language of the linked URL. SeeMDN.
`target`	`HTMLAttributeAnchorTarget`	The target window for the link. See MDN.
`rel`	`string`	The relationship between the linked resource and the current page. See MDN.
`download`	`boolean \| string`	Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.
`ping`	`string`	A space-separated list of URLs to ping when the link is followed. See MDN.
`referrerPolicy`	`HTMLAttributeReferrerPolicy`	How much of the referrer to send when following the link. See MDN.
`routerOptions`	`RouterOptions`	Options for the configured client side router.