## Actions group

The `<ActionsGroup />` component is used to achieve consistent spacing between actions.

- When used in a table cell, pass the `inlineFlex` prop.
- Pass `orientation="vertical"` if you need to stack the actions vertically. Defaults to `horizontal`.

```tsx live
const actions: Action[] = [
  {
    label: 'Collaborate',
    icon: MyTeamIcon,
    tone: 'neutral',
    onClick: () => console.log('Collaborate button clicked'),
  },
  {
    label: 'Delete',
    icon: DeleteIcon,
    tone: 'critical',
    onClick: () => console.log('Delete button clicked'),
  },
];

return (
  <ActionsGroup inlineFlex>
    <Button
      iconOnly
      icon={EditIcon}
      size="small"
      label="Edit"
      tone="neutral"
      onClick={() => {
        console.log('Edit button clicked');
      }}
    />
    <ActionsDropdown size="small" tone="neutral" actions={actions} />
  </ActionsGroup>
);
```

## Actions dropdown

The `<ActionsDropdown />` component displays a list of actions. A selection triggers the action immediately.

Use when there is limited space and you need to display overflow actions in a list. For example, it can be used in the [BulkActionBar](/packages/bulk-action-bar/), or for [table inline actions](/packages/table/#inline-actions).

<Notice>
  <Text>
    Consider using a <Link href="/packages/select-dropdown" label="SelectDropdown" /> if the selected option is used to
    filter or sort existing content.
  </Text>
</Notice>

### actions

Use the `actions` prop to define the list of actions.

This prop takes an array of type `Action` – or `ActionGroup` if [grouped actions](#grouped-actions) are needed – which can be imported from the package. Define at least a `label` and `onClick` for each item in the array.

```tsx live
// import { Action, ActionsDropdown } from '@eds/actions';

const actions: Action[] = [
  {
    label: 'Action 1',
    onClick: () => {
      console.log('Action 1');
    },
  },
  {
    label: 'Action 2',
    onClick: () => {
      console.log('Action 2');
    },
  },
];

return <ActionsDropdown align="start" actions={actions} />;
```

#### With icons

Define an `icon` for each action only when absolutely necessary; when adding essential value and having a strong association with the label. Avoid using icons just for decoration, or mixing and matching icon use; that’s to say, if using an icon in one action item, use icons in all items.

```tsx live
const actionsWithIcon: Action[] = [
  {
    icon: ViewIcon,
    label: 'Preview',
    onClick: () => {
      console.log('Preview');
    },
  },
  {
    icon: EditIcon,
    label: 'Edit',
    onClick: () => {
      console.log('Edit');
    },
  },
  {
    icon: CopyIcon,
    label: 'Copy',
    onClick: () => {
      console.log('Copy');
    },
  },
  {
    icon: DownloadIcon,
    label: 'Download',
    onClick: () => {
      console.log('Download');
    },
  },
];

return <ActionsDropdown align="start" actions={actionsWithIcon} />;
```

#### With radio buttons

Use `radioOptions` to define a group of radio buttons. This prop takes an array of `RadioActionOption`s. Each option takes a `label` and `value` - and determines it's checked state by matching the `value` field in the `Action` parent object.

Using radio buttons should in `ActionGroup` should be restricted to behaviour with limited options and immediate effect, as the popover will be dismissed when a radio button is clicked.

```tsx live
const [sortBy, setSortBy] = useState('title');
const [orderBy, setOrderBy] = useState('asc');

const actionsWithRadio: Action[] = [
  {
    label: 'Sort by',
    value: sortBy,
    radioOptions: [
      { label: 'Title', value: 'title' },
      { label: 'Description', value: 'description' },
    ],
    onChange: (val) => {
      setSortBy(val);
    },
  },
  {
    label: 'Order by',
    value: orderBy,
    radioOptions: [
      { label: 'Ascending', value: 'asc' },
      { label: 'Descending', value: 'desc' },
    ],
    onChange: (val) => {
      setOrderBy(val);
    },
  },
];

return <ActionsDropdown align="start" actions={actionsWithRadio} />;
```

#### Grouped actions

Use grouped actions to create logical groupings within the dropdown. If needed, define a `label` that describes the group of actions clearly.

```tsx live
// import { ActionGroup, ActionsDropdown } from '@eds/actions';

const itemsGroup: ActionGroup[] = [
  {
    label: 'Requisition',
    actions: [
      {
        label: 'Withdraw',
        onClick: () => {
          console.log('Withdraw');
        },
      },
      {
        label: 'Place on hold',
        onClick: () => {
          console.log('Place on hold');
        },
      },
      {
        label: 'Interviews',
        onClick: () => {
          console.log('Interviews');
        },
      },
    ],
  },
  {
    label: 'Manage',
    actions: [
      {
        label: 'Costing',
        onClick: () => {
          console.log('Costing');
        },
      },
      {
        label: 'Job ads',
        onClick: () => {
          console.log('Job ads');
        },
      },
      {
        label: 'Candidates',
        onClick: () => {
          console.log('Candidates');
        },
      },
    ],
  },
];

return <ActionsDropdown align="start" actions={itemsGroup} />;
```

Alternatively, if no `label` is defined, sections are grouped with just dividers.

```tsx live
const itemsGroupNoLabel: ActionGroup[] = [
  {
    actions: [
      {
        label: 'View profile',
        onClick: () => {
          console.log('View profile');
        },
      },
      {
        label: 'Edit profile',
        onClick: () => {
          console.log('Edit profile');
        },
      },
    ],
  },
  {
    actions: [
      {
        label: 'Terminate',
        onClick: () => {
          console.log('Terminate');
        },
      },
      {
        label: 'Deactivate',
        onClick: () => {
          console.log('Deactivate');
        },
      },
    ],
  },
  {
    actions: [
      {
        label: 'Change password',
        onClick: () => {
          console.log('Change password');
        },
      },
      {
        label: 'Force password change',
        onClick: () => {
          console.log('Force password change');
        },
      },
    ],
  },
  {
    actions: [
      {
        label: 'Login as this user',
        onClick: () => {
          console.log('Login as this user');
        },
      },
    ],
  },
];

return <ActionsDropdown align="start" actions={itemsGroupNoLabel} />;
```

#### Critical actions

By default, the actions in the dropdown list are of neutral tone.

For a critical action, define `tone: 'critical'` to provide an immediate visual indication that the action is destructive. Additionally, it's recommended to define the action's label to something commonly understood as destructive (e.g., "Delete" or "Deactivate").

Prefer placing it as the last action in the list, and if possible, avoid having more than one critical action in the same dropdown.

```tsx live
const actions: Action[] = [
  {
    icon: ViewIcon,
    label: 'Preview',
    onClick: () => {
      console.log('Preview');
    },
  },
  {
    icon: EditIcon,
    label: 'Edit',
    onClick: () => {
      console.log('Edit');
    },
  },
  {
    icon: CopyIcon,
    label: 'Copy',
    onClick: () => {
      console.log('Copy');
    },
  },
  {
    icon: MyTeamIcon,
    label: 'Collaborate',
    onClick: () => {
      console.log('Collaborate');
    },
  },
  {
    tone: 'critical',
    icon: DeleteIcon,
    label: 'Delete',
    onClick: () => {
      console.log('Delete');
    },
  },
];

return <ActionsDropdown align="start" actions={actions} />;
```

#### Disabled actions

When an action can only be used sometimes, under certain conditions, it should be displayed as disabled rather than removing it from the list.

Define `isDisabled: true` to disable the action.

```tsx live
const actions: Action[] = [
  {
    label: 'Transfer owner',
    isDisabled: true,
    onClick: () => {
      console.log('Transfer owner');
    },
  },
  {
    label: 'Withdraw requisition',
    tone: 'neutral',
    onClick: () => {
      console.log('Withdraw requisition');
    },
  },
  {
    label: 'Finalise requisition',
    isDisabled: true,
    onClick: () => {
      console.log('Finalise requisition');
    },
  },
];

return <ActionsDropdown align="start" actions={actions} />;
```

#### Link actions

When an action is used to navigate the user to a different page, an href can be specified to take the user to another url.

Define `href: "url"` to specify where the link should take the user to.

<Notice>
  <Text>A critical action cannot be a link because critical actions are only for destructive tasks.</Text>
</Notice>

```tsx live
const actions: Action[] = [
  {
    icon: ViewIcon,
    label: 'Preview',
    href: '#view',
  },
  {
    icon: EditIcon,
    label: 'Edit',
    href: '#edit',
  },
  {
    label: 'Approve',
    isDisabled: true,
    href: '#approve',
  },
];

return <ActionsDropdown align="start" actions={actions} />;
```

### Trigger

Out-of-the-box, the actions dropdown comes with a default button to trigger its open state. It uses an `OverflowVerticalIcon` alongside a visually hidden text label of "More actions" to communicate that more options can be accessed.

#### Custom trigger

You also can pass your own button via the `trigger` prop. This is a render function that takes three arguments; `ref`, `isOpen` and `disabled`, and returns a `JSX.Element`.

- `ref` needs to be passed to your button component for positioning.
- `isOpen` can be passed if you want to change something in the button when the dropdown is open.
- `disabled` can be passed if the trigger need to be disabled.

It's recommended to use an [Button](/packages/button/) of either `neutral` or `ghost` tone if custom trigger is used.

```tsx live
const itemsGroup: ActionGroup[] = [
  {
    label: 'Group1',
    actions: [
      {
        label: 'Edit Action',
        icon: EditIcon,
        tone: 'neutral',
        onClick: () => {
          console.log('Edit Action');
        },
      },
      {
        label: 'Action2',
        icon: CloseIcon,
        isDisabled: true,
        onClick: () => {
          console.log('action2');
        },
      },
    ],
  },
  {
    label: 'Group2',
    actions: [
      {
        label: 'Delete Action',
        icon: DeleteIcon,
        tone: 'critical',
        onClick: () => {
          console.log('action3');
        },
      },
    ],
  },
];

const trigger = (ref: React.RefObject<HTMLButtonElement>, isOpen?: boolean, disabled?: boolean) => (
  <Button
    ref={ref}
    icon={isOpen ? ChevronUpIcon : ChevronDownIcon}
    iconPlacement="right"
    label="Custom trigger"
    tone="neutral"
    disabled={disabled}
    pressed={isOpen}
  />
);

return (
  <Flex flexDirection="column" gap="medium">
    <Flex gap="medium" alignItems="center">
      <Text>Custom trigger:</Text>
      <ActionsDropdown align="start" actions={itemsGroup} trigger={trigger} />
    </Flex>

    <Flex gap="medium" alignItems="center">
      <Text>Custom trigger when disabled:</Text>
      <ActionsDropdown align="start" actions={itemsGroup} trigger={trigger} disabled />
    </Flex>
  </Flex>
);
```

### Text overflow

When the action label text is too long for the available horizontal space, the overflowing text wraps to the next line. Prefer clear and concise labels.

```tsx live
const actions: Action[] = [
  {
    label: 'Edit',
    onClick: () => {
      console.log('Edit');
    },
  },
  {
    label: 'This is an example of a very long label wrapping over two lines',
    onClick: () => {
      console.log('This is an example of a very long label wrapping over two lines');
    },
  },
];

return <ActionsDropdown align="start" actions={actions} />;
```

A set of components to help compose interfaces with multiple actions.

Actions

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Flex

Grid

Heading

Icon

Illustration

Link

List

Loading

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Tabs

Text

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources