ActionGroup

An action group combines several actions that are logically connected.

Items

The ActionGroup component accepts the Item components from the Collections API. The Item can be applied directly as children of the ActionGroup.

<ActionGroup>
  <Item key='note'>Note</Item>
  <Item key='call'>Call</Item>
  <Item key='meeting'>Meeting</Item>
</ActionGroup>

<ActionGroup>
  <Item key='note'>Note</Item>
  <Item key='call'>Call</Item>
  <Item key='meeting'>Meeting</Item>
</ActionGroup>

<ActionGroup>
  <Item key="note">
    Note
  </Item>
  <Item key="call">
    Call
  </Item>
  <Item key="meeting">
    Meeting
  </Item>
</ActionGroup>

Alternatively, the items can be passed through the items prop and rendered via a render prop.

const items = [
  { label: 'Note', name: 'note' },
  { label: 'Call', name: 'call' },
  { label: 'Meeting', name: 'meeting' }
];

<ActionGroup items={items}>
  {(item) => <Item key={item.name}>{item.label}</Item>}
</ActionGroup>;

const items = [
  { label: 'Note', name: 'note' },
  { label: 'Call', name: 'call' },
  { label: 'Meeting', name: 'meeting' }
];

<ActionGroup items={items}>
  {(item) => <Item key={item.name}>{item.label}</Item>}
</ActionGroup>;

const items = [
  {
    label: 'Note',
    name: 'note'
  },
  {
    label: 'Call',
    name: 'call'
  },
  {
    label: 'Meeting',
    name: 'meeting'
  }
];

<ActionGroup
  items={items}
>
  {(item) => (
    <Item
      key={item.name}
    >
      {item.label}
    </Item>
</WRAPPER>
  )}
</ActionGroup>;

Icons

Icons can be added to the items by passing an icon as a child of the Item component.

<ActionGroup>
  <Item key='note'>
    <Icon name='DocumentIcon' variant='outline' />
    <Text>Note</Text>
  </Item>
  <Item key='call'>
    <Icon name='PhoneIcon' variant='outline' />
    <Text>Call</Text>
  </Item>
  <Item key='meeting'>
    <Icon name='UserIcon' variant='outline' />
    <Text>Meeting</Text>
  </Item>
</ActionGroup>

<ActionGroup>
  <Item key='note'>
    <Icon name='DocumentIcon' variant='outline' />
    <Text>Note</Text>
  </Item>
  <Item key='call'>
    <Icon name='PhoneIcon' variant='outline' />
    <Text>Call</Text>
  </Item>
  <Item key='meeting'>
    <Icon name='UserIcon' variant='outline' />
    <Text>Meeting</Text>
  </Item>
</ActionGroup>

<ActionGroup>
  <Item key="note">
    <Icon
      name="DocumentIcon"
      variant="outline"
    />
    <Text>Note</Text>
  </Item>
  <Item key="call">
    <Icon
      name="PhoneIcon"
      variant="outline"
    />
    <Text>Call</Text>
  </Item>
  <Item key="meeting">
    <Icon
      name="UserIcon"
      variant="outline"
    />
    <Text>
      Meeting
    </Text>
  </Item>
</ActionGroup>

If you wish, you can also hide the label through the buttonLabelBehavior prop.

<ActionGroup buttonLabelBehavior='hide'>
  <Item key='note'>
    <Icon name='DocumentIcon' variant='outline' />
    <Text>Note</Text>
  </Item>
  <Item key='call'>
    <Icon name='PhoneIcon' variant='outline' />
    <Text>Call</Text>
  </Item>
  <Item key='meeting'>
    <Icon name='UserIcon' variant='outline' />
    <Text>Meeting</Text>
  </Item>
</ActionGroup>

<ActionGroup buttonLabelBehavior='hide'>
  <Item key='note'>
    <Icon name='DocumentIcon' variant='outline' />
    <Text>Note</Text>
  </Item>
  <Item key='call'>
    <Icon name='PhoneIcon' variant='outline' />
    <Text>Call</Text>
  </Item>
  <Item key='meeting'>
    <Icon name='UserIcon' variant='outline' />
    <Text>Meeting</Text>
  </Item>
</ActionGroup>

<ActionGroup buttonLabelBehavior="hide">
  <Item key="note">
    <Icon
      name="DocumentIcon"
      variant="outline"
    />
    <Text>Note</Text>
  </Item>
  <Item key="call">
    <Icon
      name="PhoneIcon"
      variant="outline"
    />
    <Text>Call</Text>
  </Item>
  <Item key="meeting">
    <Icon
      name="UserIcon"
      variant="outline"
    />
    <Text>
      Meeting
    </Text>
  </Item>
</ActionGroup>

Selection

The ActionGroup supports selection similar to any other component that is based on the Selection API. The selection can be uncontrolled through the defaultSelectedKeys prop.

<ActionGroup selectionMode='single' defaultSelectedKeys={['call']}>
  <Item key='note'>Note</Item>
  <Item key='call'>Call</Item>
  <Item key='meeting'>Meeting</Item>
</ActionGroup>

<ActionGroup
  selectionMode="single"
  defaultSelectedKeys={['call']}
>
  <Item key="note">Note</Item>
  <Item key="call">Call</Item>
  <Item key="meeting">Meeting</Item>
</ActionGroup>

<ActionGroup
  selectionMode="single"
  defaultSelectedKeys={[
    'call'
  ]}
>
  <Item key="note">
    Note
  </Item>
  <Item key="call">
    Call
  </Item>
  <Item key="meeting">
    Meeting
  </Item>
</ActionGroup>

The selection can also be controlled through the selectedKeys and onSelectionChange props.

function Example() {
  const [selectedAction, setSelectedAction] = useState(new Set(['call']));

  return (
    <div>
      <ActionGroup
        selectionMode="single"
        selectedKeys={selectedAction}
        onSelectionChange={setSelectedAction}
      >
        <Item key="note">Note</Item>
        <Item key="call">Call</Item>
        <Item key="meeting">Meeting</Item>
      </ActionGroup>
      <p>Current selection: {[...selectedAction]}</p>
    </div>
  );
}

function Example() {
  const [selectedAction, setSelectedAction] = useState(
    new Set(['call'])
  );

  return (
    <div>
      <ActionGroup
        selectionMode="single"
        selectedKeys={selectedAction}
        onSelectionChange={setSelectedAction}
      >
        <Item key="note">Note</Item>
        <Item key="call">Call</Item>
        <Item key="meeting">Meeting</Item>
      </ActionGroup>
      <p>Current selection: {[...selectedAction]}</p>
    </div>
  );
}

function Example() {
  const [
    selectedAction,
    setSelectedAction
  ] = useState(
    new Set(['call'])
  );

  return (
    <div>
      <ActionGroup
        selectionMode="single"
        selectedKeys={selectedAction}
        onSelectionChange={setSelectedAction}
      >
        <Item key="note">
          Note
        </Item>
        <Item key="call">
          Call
        </Item>
        <Item key="meeting">
          Meeting
        </Item>
      </ActionGroup>
      <p>
        Current
        selection:{' '}
        {[...selectedAction]}
      </p>
    </div>
  );
}

The ActionGroup also supports multi-selection through the selectionMode='multiple' setting.

function Example() {
  const [selectedAction, setSelectedAction] = useState(new Set(['call']));

  return (
    <div>
      <ActionGroup
        selectionMode="multiple"
        selectedKeys={selectedAction}
        onSelectionChange={setSelectedAction}
      >
        <Item key="note">Note</Item>
        <Item key="call">Call</Item>
        <Item key="meeting">Meeting</Item>
      </ActionGroup>
      <p>Current selection: {[...selectedAction].join(', ')}</p>
    </div>
  );
}

function Example() {
  const [selectedAction, setSelectedAction] = useState(
    new Set(['call'])
  );

  return (
    <div>
      <ActionGroup
        selectionMode="multiple"
        selectedKeys={selectedAction}
        onSelectionChange={setSelectedAction}
      >
        <Item key="note">Note</Item>
        <Item key="call">Call</Item>
        <Item key="meeting">Meeting</Item>
      </ActionGroup>
      <p>
        Current selection: {[...selectedAction].join(', ')}
      </p>
    </div>
  );
}

function Example() {
  const [
    selectedAction,
    setSelectedAction
  ] = useState(
    new Set(['call'])
  );

  return (
    <div>
      <ActionGroup
        selectionMode="multiple"
        selectedKeys={selectedAction}
        onSelectionChange={setSelectedAction}
      >
        <Item key="note">
          Note
        </Item>
        <Item key="call">
          Call
        </Item>
        <Item key="meeting">
          Meeting
        </Item>
      </ActionGroup>
      <p>
        Current
        selection:{' '}
        {[...selectedAction]
          .join(', ')}
      </p>
    </div>
  );
}

Events

The ActionGroup supports a onAction prop, which is called when an action is selected.

function Example() {
  const [pressedAction, setPressedAction] = useState('');

  return (
    <div>
      <ActionGroup onAction={setPressedAction}>
        <Item key='note'>Note</Item>
        <Item key='call'>Call</Item>
        <Item key='meeting'>Meeting</Item>
      </ActionGroup>
      <p>Pressed action: {pressedAction}</p>
    </div>
  );
}

function Example() {
  const [pressedAction, setPressedAction] = useState('');

  return (
    <div>
      <ActionGroup onAction={setPressedAction}>
        <Item key='note'>Note</Item>
        <Item key='call'>Call</Item>
        <Item key='meeting'>Meeting</Item>
      </ActionGroup>
      <p>Pressed action: {pressedAction}</p>
    </div>
  );
}

function Example() {
  const [
    pressedAction,
    setPressedAction
  ] = useState('');

  return (
    <div>
      <ActionGroup
        onAction={setPressedAction}
      >
        <Item key="note">
          Note
        </Item>
        <Item key="call">
          Call
        </Item>
        <Item key="meeting">
          Meeting
        </Item>
      </ActionGroup>
      <p>
        Pressed action:
        {' '}
        {pressedAction}
      </p>
    </div>
  );
}

Collapsing

By default, the ActionGroup will wrap to a new line if the space is insufficient to display all items. However, this is not always optimal since it easily can lead to content shifts. As such, you can control this behaviour with the overflowMode prop.

The behaviour also differs whether the ActionGroup is selectable or not. If the action group is not selectable, then the overflowing items will be moved into a dropdown menu.

Non-Selectable

<ActionGroup overflowMode='collapse' style={{maxWidth: '750px'}}>
  <Item key='note'>
    <Icon name='DocumentIcon' variant='outline' />
    <Text>Note</Text>
  </Item>
  <Item key='call'>
    <Icon name='PhoneIcon' variant='outline' />
    <Text>Call</Text>
  </Item>
  <Item key='meeting'>
    <Icon name='UserIcon' variant='outline' />
    <Text>Meeting</Text>
  </Item>
  <Item key='task'>
    <Icon name='CheckIcon' variant='outline' />
    <Text>Task</Text>
  </Item>
  <Item key='chart'>
    <Icon name='ClockIcon' variant='outline' />
    <Text>Event</Text>
  </Item>
  <Item key='payment'>
    <Icon name='DocumentIcon' variant='outline' />
    <Text>Payment</Text>
  </Item>
</ActionGroup>

<ActionGroup
  overflowMode="collapse"
  style={{ maxWidth: '750px' }}
>
  <Item key="note">
    <Icon name="DocumentIcon" variant="outline" />
    <Text>Note</Text>
  </Item>
  <Item key="call">
    <Icon name="PhoneIcon" variant="outline" />
    <Text>Call</Text>
  </Item>
  <Item key="meeting">
    <Icon name="UserIcon" variant="outline" />
    <Text>Meeting</Text>
  </Item>
  <Item key="task">
    <Icon name="CheckIcon" variant="outline" />
    <Text>Task</Text>
  </Item>
  <Item key="chart">
    <Icon name="ClockIcon" variant="outline" />
    <Text>Event</Text>
  </Item>
  <Item key="payment">
    <Icon name="DocumentIcon" variant="outline" />
    <Text>Payment</Text>
  </Item>
</ActionGroup>

<ActionGroup
  overflowMode="collapse"
  style={{
    maxWidth: '750px'
  }}
>
  <Item key="note">
    <Icon
      name="DocumentIcon"
      variant="outline"
    />
    <Text>Note</Text>
  </Item>
  <Item key="call">
    <Icon
      name="PhoneIcon"
      variant="outline"
    />
    <Text>Call</Text>
  </Item>
  <Item key="meeting">
    <Icon
      name="UserIcon"
      variant="outline"
    />
    <Text>
      Meeting
    </Text>
  </Item>
  <Item key="task">
    <Icon
      name="CheckIcon"
      variant="outline"
    />
    <Text>Task</Text>
  </Item>
  <Item key="chart">
    <Icon
      name="ClockIcon"
      variant="outline"
    />
    <Text>Event</Text>
  </Item>
  <Item key="payment">
    <Icon
      name="DocumentIcon"
      variant="outline"
    />
    <Text>
      Payment
    </Text>
  </Item>
</ActionGroup>

Single-Selectable

If the ActionGroup is single selectable, then the icon from the selected item will be used.

<ActionGroup
  aria-label='Select an activity'
  selectionMode='single'
  overflowMode='collapse'
  disallowEmptySelection
  defaultSelectedKeys={['note']}
  buttonLabelBehavior='hide'
  style={{maxWidth: '200px'}}
>
  <Item key='note'>
    <Icon name='DocumentIcon' variant='outline' />
    <Text>Note</Text>
  </Item>
  <Item key='call'>
    <Icon name='PhoneIcon' variant='outline' />
    <Text>Call</Text>
  </Item>
  <Item key='meeting'>
    <Icon name='UserIcon' variant='outline' />
    <Text>Meeting</Text>
  </Item>
  <Item key='task'>
    <Icon name='CheckIcon' variant='outline' />
    <Text>Task</Text>
  </Item>
  <Item key='chart'>
    <Icon name='ClockIcon' variant='outline' />
    <Text>Event</Text>
  </Item>
  <Item key='payment'>
    <Icon name='DocumentIcon' variant='outline' />
    <Text>Payment</Text>
  </Item>
</ActionGroup>

<ActionGroup
  aria-label='Select an activity'
  selectionMode='single'
  overflowMode='collapse'
  disallowEmptySelection
  defaultSelectedKeys={['note']}
  buttonLabelBehavior='hide'
  style={{maxWidth: '200px'}}
>
  <Item key='note'>
    <Icon name='DocumentIcon' variant='outline' />
    <Text>Note</Text>
  </Item>
  <Item key='call'>
    <Icon name='PhoneIcon' variant='outline' />
    <Text>Call</Text>
  </Item>
  <Item key='meeting'>
    <Icon name='UserIcon' variant='outline' />
    <Text>Meeting</Text>
  </Item>
  <Item key='task'>
    <Icon name='CheckIcon' variant='outline' />
    <Text>Task</Text>
  </Item>
  <Item key='chart'>
    <Icon name='ClockIcon' variant='outline' />
    <Text>Event</Text>
  </Item>
  <Item key='payment'>
    <Icon name='DocumentIcon' variant='outline' />
    <Text>Payment</Text>
  </Item>
</ActionGroup>

<ActionGroup
  aria-label="Select an activity"
  selectionMode="single"
  overflowMode="collapse"
  disallowEmptySelection
  defaultSelectedKeys={[
    'note'
  ]}
  buttonLabelBehavior="hide"
  style={{
    maxWidth: '200px'
  }}
>
  <Item key="note">
    <Icon
      name="DocumentIcon"
      variant="outline"
    />
    <Text>Note</Text>
  </Item>
  <Item key="call">
    <Icon
      name="PhoneIcon"
      variant="outline"
    />
    <Text>Call</Text>
  </Item>
  <Item key="meeting">
    <Icon
      name="UserIcon"
      variant="outline"
    />
    <Text>
      Meeting
    </Text>
  </Item>
  <Item key="task">
    <Icon
      name="CheckIcon"
      variant="outline"
    />
    <Text>Task</Text>
  </Item>
  <Item key="chart">
    <Icon
      name="ClockIcon"
      variant="outline"
    />
    <Text>Event</Text>
  </Item>
  <Item key="payment">
    <Icon
      name="DocumentIcon"
      variant="outline"
    />
    <Text>
      Payment
    </Text>
  </Item>
</ActionGroup>

Multi-Selectable

If the ActionGroup is multi-selectable, then all actions will be moved into the menu, which is why a summaryIcon prop will be necessary.

<ActionGroup
  aria-label='Select the activities'
  selectionMode='multiple'
  overflowMode='collapse'
  summaryIcon={<Icon name='CalendarDaysIcon' variant='outline' />}
  style={{maxWidth: '200px'}}
>
  <Item key='note' textValue='note'>
    <Icon name='DocumentIcon' variant='outline' />
    <Text>Note</Text>
  </Item>
  <Item key='call' textValue='call'>
    <Icon name='PhoneIcon' variant='outline' />
    <Text>Call</Text>
  </Item>
  <Item key='meeting' textValue='meeting'>
    <Icon name='UserIcon' variant='outline' />
    <Text>Meeting</Text>
  </Item>
  <Item key='task' textValue='task'>
    <Icon name='CheckIcon' variant='outline' />
    <Text>Task</Text>
  </Item>
  <Item key='chart' textValue='chart'>
    <Icon name='ClockIcon' variant='outline' />
    <Text>Event</Text>
  </Item>
  <Item key='payment' textValue='payment'>
    <Icon name='DocumentIcon' variant='outline' />
    <Text>Payment</Text>
  </Item>
</ActionGroup>

<ActionGroup
  aria-label="Select the activities"
  selectionMode="multiple"
  overflowMode="collapse"
  summaryIcon={
    <Icon name="CalendarDaysIcon" variant="outline" />
  }
  style={{ maxWidth: '200px' }}
>
  <Item key="note" textValue="note">
    <Icon name="DocumentIcon" variant="outline" />
    <Text>Note</Text>
  </Item>
  <Item key="call" textValue="call">
    <Icon name="PhoneIcon" variant="outline" />
    <Text>Call</Text>
  </Item>
  <Item key="meeting" textValue="meeting">
    <Icon name="UserIcon" variant="outline" />
    <Text>Meeting</Text>
  </Item>
  <Item key="task" textValue="task">
    <Icon name="CheckIcon" variant="outline" />
    <Text>Task</Text>
  </Item>
  <Item key="chart" textValue="chart">
    <Icon name="ClockIcon" variant="outline" />
    <Text>Event</Text>
  </Item>
  <Item key="payment" textValue="payment">
    <Icon name="DocumentIcon" variant="outline" />
    <Text>Payment</Text>
  </Item>
</ActionGroup>

<ActionGroup
  aria-label="Select the activities"
  selectionMode="multiple"
  overflowMode="collapse"
  summaryIcon={
    <Icon
      name="CalendarDaysIcon"
      variant="outline"
    />
  }
  style={{
    maxWidth: '200px'
  }}
>
  <Item
    key="note"
    textValue="note"
  >
    <Icon
      name="DocumentIcon"
      variant="outline"
    />
    <Text>Note</Text>
  </Item>
  <Item
    key="call"
    textValue="call"
  >
    <Icon
      name="PhoneIcon"
      variant="outline"
    />
    <Text>Call</Text>
  </Item>
  <Item
    key="meeting"
    textValue="meeting"
  >
    <Icon
      name="UserIcon"
      variant="outline"
    />
    <Text>
      Meeting
    </Text>
  </Item>
  <Item
    key="task"
    textValue="task"
  >
    <Icon
      name="CheckIcon"
      variant="outline"
    />
    <Text>Task</Text>
  </Item>
  <Item
    key="chart"
    textValue="chart"
  >
    <Icon
      name="ClockIcon"
      variant="outline"
    />
    <Text>Event</Text>
  </Item>
  <Item
    key="payment"
    textValue="payment"
  >
    <Icon
      name="DocumentIcon"
      variant="outline"
    />
    <Text>
      Payment
    </Text>
  </Item>
</ActionGroup>

Button Labels

If necessary, you can also decide to hide the button labels if the ActionGroup does not have enough space.

<ActionGroup
  overflowMode='collapse'
  buttonLabelBehavior='collapse'
  style={{maxWidth: '200px'}}
  selectionMode='single'
  disabledKeys={['task', 'meeting', 'chart']}
>
  <Item key='note'>
    <Icon name='DocumentIcon' variant='outline' />
    <Text>Note</Text>
  </Item>
  <Item key='call'>
    <Icon name='PhoneIcon' variant='outline' />
    <Text>Call</Text>
  </Item>
  <Item key='meeting'>
    <Icon name='UserIcon' variant='outline' />
    <Text>Meeting</Text>
  </Item>
  <Item key='task'>
    <Icon name='CheckIcon' variant='outline' />
    <Text>Task</Text>
  </Item>
  <Item key='chart'>
    <Icon name='ClockIcon' variant='outline' />
    <Text>Event</Text>
  </Item>
  <Item key='payment'>
    <Icon name='DocumentIcon' variant='outline' />
    <Text>Payment</Text>
  </Item>
</ActionGroup>

<ActionGroup
  overflowMode='collapse'
  buttonLabelBehavior='collapse'
  style={{maxWidth: '200px'}}
  selectionMode='single'
  disabledKeys={['task', 'meeting', 'chart']}
>
  <Item key='note'>
    <Icon name='DocumentIcon' variant='outline' />
    <Text>Note</Text>
  </Item>
  <Item key='call'>
    <Icon name='PhoneIcon' variant='outline' />
    <Text>Call</Text>
  </Item>
  <Item key='meeting'>
    <Icon name='UserIcon' variant='outline' />
    <Text>Meeting</Text>
  </Item>
  <Item key='task'>
    <Icon name='CheckIcon' variant='outline' />
    <Text>Task</Text>
  </Item>
  <Item key='chart'>
    <Icon name='ClockIcon' variant='outline' />
    <Text>Event</Text>
  </Item>
  <Item key='payment'>
    <Icon name='DocumentIcon' variant='outline' />
    <Text>Payment</Text>
  </Item>
</ActionGroup>

<ActionGroup
  overflowMode="collapse"
  buttonLabelBehavior="collapse"
  style={{
    maxWidth: '200px'
  }}
  selectionMode="single"
  disabledKeys={[
    'task',
    'meeting',
    'chart'
  ]}
>
  <Item key="note">
    <Icon
      name="DocumentIcon"
      variant="outline"
    />
    <Text>Note</Text>
  </Item>
  <Item key="call">
    <Icon
      name="PhoneIcon"
      variant="outline"
    />
    <Text>Call</Text>
  </Item>
  <Item key="meeting">
    <Icon
      name="UserIcon"
      variant="outline"
    />
    <Text>
      Meeting
    </Text>
  </Item>
  <Item key="task">
    <Icon
      name="CheckIcon"
      variant="outline"
    />
    <Text>Task</Text>
  </Item>
  <Item key="chart">
    <Icon
      name="ClockIcon"
      variant="outline"
    />
    <Text>Event</Text>
  </Item>
  <Item key="payment">
    <Icon
      name="DocumentIcon"
      variant="outline"
    />
    <Text>
      Payment
    </Text>
  </Item>
</ActionGroup>

Vertical Alignment

The ActionGroup can also be rendered vertically. In that case, if the height is too small, the collapsing behaviour can also be changed.

<ActionGroup
  overflowMode="collapse"
  orientation="vertical"
  buttonLabelBehavior="hide"
  style={{ maxHeight: '36px' }}
>
  <Item key="note">
    <Icon name="DocumentIcon" variant="outline" />
    <Text>Note</Text>
  </Item>
  <Item key="call">
    <Icon name="PhoneIcon" variant="outline" />
    <Text>Call</Text>
  </Item>
  <Item key="meeting">
    <Icon name="UserIcon" variant="outline" />
    <Text>Meeting</Text>
  </Item>
  <Item key="task">
    <Icon name="CheckIcon" variant="outline" />
    <Text>Task</Text>
  </Item>
  <Item key="chart">
    <Icon name="ClockIcon" variant="outline" />
    <Text>Event</Text>
  </Item>
  <Item key="payment">
    <Icon name="DocumentIcon" variant="outline" />
    <Text>Payment</Text>
  </Item>
</ActionGroup>

<ActionGroup
  overflowMode="collapse"
  orientation="vertical"
  buttonLabelBehavior="hide"
  style={{ maxHeight: '36px' }}
>
  <Item key="note">
    <Icon name="DocumentIcon" variant="outline" />
    <Text>Note</Text>
  </Item>
  <Item key="call">
    <Icon name="PhoneIcon" variant="outline" />
    <Text>Call</Text>
  </Item>
  <Item key="meeting">
    <Icon name="UserIcon" variant="outline" />
    <Text>Meeting</Text>
  </Item>
  <Item key="task">
    <Icon name="CheckIcon" variant="outline" />
    <Text>Task</Text>
  </Item>
  <Item key="chart">
    <Icon name="ClockIcon" variant="outline" />
    <Text>Event</Text>
  </Item>
  <Item key="payment">
    <Icon name="DocumentIcon" variant="outline" />
    <Text>Payment</Text>
  </Item>
</ActionGroup>

<ActionGroup
  overflowMode="collapse"
  orientation="vertical"
  buttonLabelBehavior="hide"
  style={{
    maxHeight: '36px'
  }}
>
  <Item key="note">
    <Icon
      name="DocumentIcon"
      variant="outline"
    />
    <Text>Note</Text>
  </Item>
  <Item key="call">
    <Icon
      name="PhoneIcon"
      variant="outline"
    />
    <Text>Call</Text>
  </Item>
  <Item key="meeting">
    <Icon
      name="UserIcon"
      variant="outline"
    />
    <Text>
      Meeting
    </Text>
  </Item>
  <Item key="task">
    <Icon
      name="CheckIcon"
      variant="outline"
    />
    <Text>Task</Text>
  </Item>
  <Item key="chart">
    <Icon
      name="ClockIcon"
      variant="outline"
    />
    <Text>Event</Text>
  </Item>
  <Item key="payment">
    <Icon
      name="DocumentIcon"
      variant="outline"
    />
    <Text>
      Payment
    </Text>
  </Item>
</ActionGroup>