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.

installyarn add @adobe/react-spectrum
added3.27.0
usageimport {ActionBar, ActionBarContainer} from '@adobe/react-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#


224 selectedDeleteEditCopyAction group (quiet)Item counterClose button

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#

NameTypeDescription
childrenReactNodeThe contents of the ActionBarContainer. Should include a ActionBar and the renderable content it is associated with.
Layout
NameTypeDescription
flexResponsive<stringnumberboolean>When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN.
flexGrowResponsive<number>When used in a flex layout, specifies how the element will grow to fit the space available. See MDN.
flexShrinkResponsive<number>When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN.
flexBasisResponsive<numberstring>When used in a flex layout, specifies the initial main size of the element. See MDN.
alignSelfResponsive<'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.
justifySelfResponsive<'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.
orderResponsive<number>The layout order for the element within a flex or grid container. See MDN.
gridAreaResponsive<string>When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN.
gridColumnResponsive<string>When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN.
gridRowResponsive<string>When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN.
gridColumnStartResponsive<string>When used in a grid layout, specifies the starting column to span within the grid. See MDN.
gridColumnEndResponsive<string>When used in a grid layout, specifies the ending column to span within the grid. See MDN.
gridRowStartResponsive<string>When used in a grid layout, specifies the starting row to span within the grid. See MDN.
gridRowEndResponsive<string>When used in a grid layout, specifies the ending row to span within the grid. See MDN.
Spacing
NameTypeDescription
marginResponsive<DimensionValue>The margin for all four sides of the element. See MDN.
marginTopResponsive<DimensionValue>The margin for the top side of the element. See MDN.
marginBottomResponsive<DimensionValue>The margin for the bottom side of the element. See MDN.
marginStartResponsive<DimensionValue>The margin for the logical start side of the element, depending on layout direction. See MDN.
marginEndResponsive<DimensionValue>The margin for the logical end side of an element, depending on layout direction. See MDN.
marginXResponsive<DimensionValue>The margin for both the left and right sides of the element. See MDN.
marginYResponsive<DimensionValue>The margin for both the top and bottom sides of the element. See MDN.
Sizing
NameTypeDescription
widthResponsive<DimensionValue>The width of the element. See MDN.
minWidthResponsive<DimensionValue>The minimum width of the element. See MDN.
maxWidthResponsive<DimensionValue>The maximum width of the element. See MDN.
heightResponsive<DimensionValue>The height of the element. See MDN.
minHeightResponsive<DimensionValue>The minimum height of the element. See MDN.
maxHeightResponsive<DimensionValue>The maximum height of the element. See MDN.
Positioning
NameTypeDescription
positionResponsive<'static''relative''absolute''fixed''sticky'>Specifies how the element is positioned. See MDN.
topResponsive<DimensionValue>The top position for the element. See MDN.
bottomResponsive<DimensionValue>The bottom position for the element. See MDN.
leftResponsive<DimensionValue>The left position for the element. See MDN. Consider using start instead for RTL support.
rightResponsive<DimensionValue>The right position for the element. See MDN. Consider using start instead for RTL support.
startResponsive<DimensionValue>The logical start position for the element, depending on layout direction. See MDN.
endResponsive<DimensionValue>The logical end position for the element, depending on layout direction. See MDN.
zIndexResponsive<number>The stacking order for the element. See MDN.
isHiddenResponsive<boolean>Hides the element.
Accessibility
NameTypeDescription
idstringThe element's unique identifier. See MDN.
Advanced
NameTypeDescription
UNSAFE_classNamestringSets the CSS className for the element. Only use as a last resort. Use style props instead.
UNSAFE_styleCSSPropertiesSets inline style for the element. Only use as a last resort. Use style props instead.

ActionBar props#

NameTypeDefaultDescription
childrenItemElement<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.
selectedItemCountnumber'all'The number of selected items that the ActionBar is currently linked to. If 0, the ActionBar is hidden.
itemsIterable<object>A list of items to display as children. Must be used with a function as the sole child.
disabledKeysIterable<Key>A list of keys to disable.
isEmphasizedbooleanWhether 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
NameTypeDescription
onClearSelection() => voidHandler that is called when the ActionBar clear button is pressed.
onAction( (key: Key )) => voidHandler that is called when an ActionBar button is pressed.
Layout
NameTypeDescription
flexResponsive<stringnumberboolean>When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN.
flexGrowResponsive<number>When used in a flex layout, specifies how the element will grow to fit the space available. See MDN.
flexShrinkResponsive<number>When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN.
flexBasisResponsive<numberstring>When used in a flex layout, specifies the initial main size of the element. See MDN.
alignSelfResponsive<'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.
justifySelfResponsive<'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.
orderResponsive<number>The layout order for the element within a flex or grid container. See MDN.
gridAreaResponsive<string>When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN.
gridColumnResponsive<string>When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN.
gridRowResponsive<string>When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN.
gridColumnStartResponsive<string>When used in a grid layout, specifies the starting column to span within the grid. See MDN.
gridColumnEndResponsive<string>When used in a grid layout, specifies the ending column to span within the grid. See MDN.
gridRowStartResponsive<string>When used in a grid layout, specifies the starting row to span within the grid. See MDN.
gridRowEndResponsive<string>When used in a grid layout, specifies the ending row to span within the grid. See MDN.
Spacing
NameTypeDescription
marginResponsive<DimensionValue>The margin for all four sides of the element. See MDN.
marginTopResponsive<DimensionValue>The margin for the top side of the element. See MDN.
marginBottomResponsive<DimensionValue>The margin for the bottom side of the element. See MDN.
marginStartResponsive<DimensionValue>The margin for the logical start side of the element, depending on layout direction. See MDN.
marginEndResponsive<DimensionValue>The margin for the logical end side of an element, depending on layout direction. See MDN.
marginXResponsive<DimensionValue>The margin for both the left and right sides of the element. See MDN.
marginYResponsive<DimensionValue>The margin for both the top and bottom sides of the element. See MDN.
Sizing
NameTypeDescription
widthResponsive<DimensionValue>The width of the element. See MDN.
minWidthResponsive<DimensionValue>The minimum width of the element. See MDN.
maxWidthResponsive<DimensionValue>The maximum width of the element. See MDN.
heightResponsive<DimensionValue>The height of the element. See MDN.
minHeightResponsive<DimensionValue>The minimum height of the element. See MDN.
maxHeightResponsive<DimensionValue>The maximum height of the element. See MDN.
Positioning
NameTypeDescription
positionResponsive<'static''relative''absolute''fixed''sticky'>Specifies how the element is positioned. See MDN.
topResponsive<DimensionValue>The top position for the element. See MDN.
bottomResponsive<DimensionValue>The bottom position for the element. See MDN.
leftResponsive<DimensionValue>The left position for the element. See MDN. Consider using start instead for RTL support.
rightResponsive<DimensionValue>The right position for the element. See MDN. Consider using start instead for RTL support.
startResponsive<DimensionValue>The logical start position for the element, depending on layout direction. See MDN.
endResponsive<DimensionValue>The logical end position for the element, depending on layout direction. See MDN.
zIndexResponsive<number>The stacking order for the element. See MDN.
isHiddenResponsive<boolean>Hides the element.
Accessibility
NameTypeDescription
idstringThe element's unique identifier. See MDN.
Advanced
NameTypeDescription
UNSAFE_classNamestringSets the CSS className for the element. Only use as a last resort. Use style props instead.
UNSAFE_styleCSSPropertiesSets 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>