# Message Actions

This example shows how to add a custom message action. The SDK supports these built-in actions:

- `delete`
- `edit`
- `flag`
- `mute`
- `pin`
- `quote`
- `react`
- `remindMe`
- `reply`
- `saveForLater`

## Best Practices

- Keep custom actions user-focused and easy to understand.
- Avoid duplicating built-in actions with custom handlers.
- Use `customMessageActions` for simple additions; use custom list for complex UI.
- Keep action handlers idempotent and fast.
- Respect user permissions and moderation policies in custom actions.

## Using customMessageActions

The `MessageList` component accepts a prop called [`customMessageActions`](/chat/docs/sdk/react/v13/components/core-components/message_list#custommessageactions/). This prop is an object type, with the key serving as the name (and the title) of the action and the value as the handler function to be run on click.

In the example below, we add a custom `Yell` option that shows a browser alert.

<admonition type="note">

The handler receives the `message` and the click `event`.

</admonition>

```tsx
import { MessageList } from "stream-chat-react";
import type { CustomMessageActions } from "stream-chat-react";

const customMessageActions: CustomMessageActions = {
  Yell: (message, event) => {
    window.alert(`Yell action clicked on message: ${message.id}!`);
  },
};

export const WrappedMessageList = () => {
  return <MessageList customMessageActions={customMessageActions} />;
};
```

## Using CustomMessageActionList Component

If you need more flexibility (for example, translated labels), use `CustomMessageActionList`.

<admonition type="note">

If you don’t replicate the internal logic of the default [`CustomMessageActionList`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageActions/CustomMessageActionsList.tsx), you can only use one customization option from this guide at a time.

</admonition>

```tsx
import { Channel } from "stream-chat-react";

const CustomMessageActionList = () => {
  const { message } = useMessageContext("CustomMessageActionList");
  const { t } = useTranslationContext("CustomMessageActionList");

  return (
    <>
      <button
        className="str-chat__message-actions-list-item-button"
        onClick={(event) => {
          window.alert(`Yell action clicked on message: ${message.id}!`);
        }}
      >
        {t("yell")}
      </button>

      {/** ...other action buttons... */}
    </>
  );
};

export const WrappedChannel = ({ children }) => (
  <Channel CustomMessageActionList={CustomMessageActionList}>
    {children}
  </Channel>
);
```

Custom actions are displayed above the defaults in the actions list.

![Preview of the Custom Message Action](@chat-sdk/react/v13/_assets/custom-message-action.png)


---

This page was last updated at 2026-04-21T09:53:40.864Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v13/guides/theming/actions/message_actions/](https://getstream.io/chat/docs/sdk/react/v13/guides/theming/actions/message_actions/).