# ToolbarSecondaryActions

**Category:** Features/Actions/SecondaryActions

## Design

### Description

The `ToolbarSecondaryActions` component displays multiple secondary action buttons in a collection toolbar. Each action can be a single button or a button with a dropdown menu that shows additional actions.


```tsx
import { ToolbarSecondaryActions } from '@wix/patterns';
```

### Multiple secondary action buttons

Display multiple secondary action buttons in the toolbar.

```tsx
import React from 'react';
import { Page } from '@wix/design-system';
import {
  Table,
  PageWrapper,
  useTableCollection,
  OffsetQuery,
  ToolbarSecondaryActions,
} from '@wix/patterns';
import { contacts } from '@wix/crm';

function Buttons() {
  const state = useTableCollection<contacts.Contact>({
    queryName: 'contacts-Buttons',
    paginationMode: 'offset',
    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
    fetchData: (query: OffsetQuery) => {
      const { limit, offset, search } = query;

      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

      if (search) {
        queryBuilder = queryBuilder.startsWith('info.name.first', search);
      }

      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
        items,
        total,
      }));
    },
    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <PageWrapper>
      <Page height="400px">
        <Page.Header />
        <Page.Content>
          <Table
            state={state}
            secondaryActions={
              <ToolbarSecondaryActions
                items={[
                  {
                    label: 'button 1',
                    onClick: () => console.log('I do something'),
                    biName: 'ctaName for bi purposes',
                  },
                  {
                    label: 'button 2',
                    onClick: () => console.log('I do something else'),
                    biName: 'ctaName for bi purposes',
                  },
                ]}
              />
            }
            columns={[
              {
                id: 'name',
                title: 'Name',
                width: '250px',
                render: (contact) =>
                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
              },
            ]}
          />
        </Page.Content>
      </Page>
    </PageWrapper>
  );
}
```

### Multiple actions with dropdown menus

Display multiple secondary action buttons, each with a dropdown menu that shows additional actions when clicked.

```tsx
import React from 'react';
import { Page } from '@wix/design-system';
import {
  Table,
  PageWrapper,
  useTableCollection,
  OffsetQuery,
  ToolbarSecondaryActions,
} from '@wix/patterns';
import { contacts } from '@wix/crm';
import { Edit } from '@wix/wix-ui-icons-common';

function Popovers() {
  const state = useTableCollection<contacts.Contact>({
    queryName: 'contacts-Popovers',
    paginationMode: 'offset',
    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
    fetchData: (query: OffsetQuery) => {
      const { limit, offset, search } = query;

      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

      if (search) {
        queryBuilder = queryBuilder.startsWith('info.name.first', search);
      }

      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
        items,
        total,
      }));
    },
    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <PageWrapper>
      <Page height="400px">
        <Page.Header />
        <Page.Content>
          <Table
            state={state}
            secondaryActions={
              <ToolbarSecondaryActions
                items={[
                  {
                    label: 'popover 1',
                    onClick: () => console.log('I do something else'),
                    biName: 'ctaName for bi purposes',
                    subItems: [
                      {
                        label: 'Edit',
                        prefixIcon: <Edit />,
                        onClick: () => console.log('Edit'),
                      },
                    ],
                  },
                  {
                    label: 'popover 2',
                    onClick: () => console.log('I do something else'),
                    biName: 'ctaName for bi purposes',
                    subItems: [
                      {
                        label: 'Edit',
                        prefixIcon: <Edit />,
                        onClick: () => console.log('Edit'),
                      },
                    ],
                  },
                ]}
              />
            }
            columns={[
              {
                id: 'name',
                title: 'Name',
                width: '250px',
                render: (contact) =>
                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
              },
            ]}
          />
        </Page.Content>
      </Page>
    </PageWrapper>
  );
}
```

### Mixed buttons and dropdown menus

Display a combination of single action buttons and buttons with dropdown menus in the same toolbar.

```tsx
import React from 'react';
import { Page } from '@wix/design-system';
import {
  Table,
  PageWrapper,
  useTableCollection,
  OffsetQuery,
  ToolbarSecondaryActions,
} from '@wix/patterns';
import { contacts } from '@wix/crm';

function ButtonAndPopovers() {
  const state = useTableCollection<contacts.Contact>({
    queryName: 'contacts-ButtonAndPopovers',
    paginationMode: 'offset',
    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
    fetchData: (query: OffsetQuery) => {
      const { limit, offset, search } = query;

      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

      if (search) {
        queryBuilder = queryBuilder.startsWith('info.name.first', search);
      }

      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
        items,
        total,
      }));
    },
    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <PageWrapper>
      <Page height="400px">
        <Page.Header />
        <Page.Content>
          <Table
            state={state}
            secondaryActions={
              <ToolbarSecondaryActions
                items={[
                  {
                    label: 'button',
                    onClick: () => console.log('I do something'),
                    biName: 'ctaName for bi purposes',
                  },
                  {
                    label: 'popover',
                    onClick: () => console.log('I do something else'),
                    biName: 'ctaName for bi purposes',
                    subItems: [
                      {
                        label: 'subitem 1',
                        onClick: () => console.log('I do something'),
                        biName: 'ctaName for bi purposes',
                      },
                    ],
                  },
                ]}
              />
            }
            columns={[
              {
                id: 'name',
                title: 'Name',
                width: '250px',
                render: (contact) =>
                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
              },
            ]}
          />
        </Page.Content>
      </Page>
    </PageWrapper>
  );
}
```

### Grouped actions with dividers

Group actions in a dropdown menu by providing `subItems` as nested arrays. Each array creates a group, and dividers appear between groups.

```tsx
import React from 'react';
import { Page } from '@wix/design-system';
import {
  Table,
  PageWrapper,
  useTableCollection,
  OffsetQuery,
  ToolbarSecondaryActions,
} from '@wix/patterns';
import { contacts } from '@wix/crm';
import { Edit } from '@wix/wix-ui-icons-common';

function PopoverAndDivider() {
  const state = useTableCollection<contacts.Contact>({
    queryName: 'contacts-PopoverAndDivider',
    paginationMode: 'offset',
    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
    fetchData: (query: OffsetQuery) => {
      const { limit, offset, search } = query;

      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

      if (search) {
        queryBuilder = queryBuilder.startsWith('info.name.first', search);
      }

      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
        items,
        total,
      }));
    },
    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <PageWrapper>
      <Page height="400px">
        <Page.Header />
        <Page.Content>
          <Table
            state={state}
            secondaryActions={
              <ToolbarSecondaryActions
                items={[
                  {
                    label: 'button',
                    onClick: () => console.log('I do something'),
                    biName: 'ctaName for bi purposes',
                  },
                  {
                    label: 'popover',
                    onClick: () => console.log('I do something else'),
                    biName: 'ctaName for bi purposes',
                    subItems: [
                      [
                        {
                          label: 'Edit',
                          prefixIcon: <Edit />,
                          onClick: () => console.log('Edit'),
                        },
                      ],
                      [
                        {
                          label: 'delete',
                          onClick: () => console.log('Edit'),
                          disabled: true,
                          tooltip: 'Disabled',
                        },
                      ],
                    ],
                  },
                ]}
              />
            }
            columns={[
              {
                id: 'name',
                title: 'Name',
                width: '250px',
                render: (contact) =>
                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
              },
            ]}
          />
        </Page.Content>
      </Page>
    </PageWrapper>
  );
}
```

## API

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `items` | `ActionSubitem[]` | Yes | - | The secondary actions to display in the toolbar. \| [ActionSubitem[][]](./?path=/story/common-types--actionsubitem) |