# SelectedReactionsMenu

The `SelectedReactionsMenu` is a component that displays a list of message reactions with the users who left them. If a message already contains reactions, the user can tap on the section with reactions to show the component.

This is a **stateless component** which you can easily add to your UI if you're building a custom Messages screen. The component shows the following UI:

- **Reaction options**: The top part which shows a list of reactions the user can use to react to the message.
- **User reactions**: The main part which shows a list of users with their reactions left for the message.

Let's see how to use the component.

## Usage

If you're using the [`MessagesScreen`](/chat/docs/sdk/android/v5/compose/message-components/messages-screen/) component, the `SelectedReactionsMenu` component is already set up for you. To use the `SelectedReactionsMenu` component in your custom screens, simply add it to your UI, like so:

```kotlin
// The rest of your UI
if (selectedMessageState is SelectedMessageReactionsState) {
    val selectedMessage = selectedMessageState.message
    SelectedReactionsMenu(
        modifier = Modifier.align(Alignment.BottomCenter),
        // The currently logged-in user
        currentUser = user,
        // The capabilities the user has in a given channel
        ownCapabilities = selectedMessageState.ownCapabilities,
        // The message whose reactions you selected
        message = selectedMessage,
        onMessageAction = { action ->
            // Handle message action
        },
        onShowMoreReactionsSelected = {
            // Handle show more reactions button click
        },
        onDismiss = {
            // Handle dismiss
        }
    )
}

```

As you can see, showing the menu is very simple. If the `selectedMessageState` is an instance of `SelectedMessageReactionsState`, you pass in the currently logged in user, as well as the selected message. The reactions you show are taken from the [`ChatTheme`](/chat/docs/sdk/android/v5/compose/general-customization/chat-theme/) component and everything else required to show the component is taken care of internally.

The aforementioned code produces the following UI:

![Default SelectedReactionsMenu component](@chat-sdk/android/v5/_assets/compose_default_selected_reactions_menu.png)

The component shows the available reactions from the [`ChatTheme`](/chat/docs/sdk/android/v5/compose/general-customization/chat-theme/) on the top, followed by a list of message reactions.

To dismiss the component just tap outside of the dialog or press the system back button.

## Handling Actions

Here are the actions exposed by the `SelectedReactionsMenu` component:

```kotlin
@Composable
fun SelectedReactionsMenu(
    ..., // State
    onMessageAction: (MessageAction) -> Unit,
    onShowMoreReactionsSelected: () -> Unit,
    onDismiss: () -> Unit = {},
)
```

- `onMessageAction`: Handler used when the user performs an action such as leaving a reaction.
- `onShowMoreReactionsSelected`: Handler that propagates clicks on the show more reactions button.
- `onDismiss`: Handler used when the menu is dismissed by clicking outside of the dialog area or by pressing the system back button.

To handle these actions, you can override them like so:

```kotlin
if (selectedMessageState is SelectedMessageReactionsState) {
    SelectedReactionsMenu(
        ..., // State
        onMessageAction = { action ->
            composerViewModel.performMessageAction(action)
            listViewModel.performMessageAction(action)
        },
        onShowMoreReactionsSelected = {
            listViewModel.selectExtendedReactions(selectedMessage)
        },
        onDismiss = { listViewModel.removeOverlay() }
    )
}
```

In the snippet above, you propagate the `action` to the `composerViewModel` and `listViewModel`, for them to store the latest action. This will update the UI accordingly.

Alternatively, you call `listViewModel.removeOverlay()` to remove the overlay from the screen in `onDismiss()`. It's important to note that `onMessageAction()` calls `removeOverlay()` internally to hide the overlay.

Next, let's see how to customize the overlay.

## Customization

You can customize the reactions you show:

```kotlin
@Composable
fun SelectedReactionsMenu(
    ..., // State
    modifier: Modifier = Modifier,
    shape: Shape = ChatTheme.shapes.bottomSheet,
    overlayColor: Color = ChatTheme.colors.overlay,
    reactionTypes: Map<String, ReactionIcon> = ChatTheme.reactionIconFactory.createReactionIcons(),
    @DrawableRes showMoreReactionsIcon: Int = R.drawable.stream_compose_ic_more,
    ... // Actions and Slot APIs
)
```

- `modifier`: Modifier for the dialog component.
- `overlayColor`: Allows you to customize the color of the overlay.
- `shape`: Allows you to customize the shape of the dialog.
- `reactionTypes`: Allows you to customize reactions shown in the overlay. By default it uses `ChatTheme.reactionIconFactory` which is exposed by the [`ChatTheme`](/chat/docs/sdk/android/v5/compose/general-customization/chat-theme/) component.
- `showMoreReactionsIcon`: Allows you to customize the show more reactions icon. By default, the icon will appear when `ChatTheme.reactionIconFactory` provides more than five reactions.

The best way to customize reactions is by overriding `ChatTheme.reactionIconFactory` with your own implementation of `ReactionIconFactory` so that all of your components wrapped inside of `ChatTheme` draw from the same source.

By default `SelectedReactionsMenu` looks like a bottom sheet, however you can customize it to look like a completely different component, such as a dialog, a drawer or whatever helps you retain the look and feel of your app.

```kotlin
if (selectedMessageState is SelectedMessageReactionsState) {
    // Use a Modifier to customize the appearance
    SelectedReactionsMenu(
        ..., // State
        // Use a Modifier to customize the appearance
        modifier = Modifier
            .align(Alignment.Center)
            .padding(horizontal = 20.dp)
            .wrapContentSize(),
        // Assign a different shape to the Composable element
        shape = ChatTheme.shapes.attachment,
        currentUser = user,
        onMessageAction = { action ->
            // Handle message action
        },
        onDismiss = {
            // Handle dismiss
        },
        ...
    )
}
```

The code above will produce the following UI:

![Custom SelectedReactionsMenu component](@chat-sdk/android/v5/_assets/compose_custom_selected_reactions_menu_shape_and_alignment.png)

`SelectedReactionsMenu` provides you with Composable slots that are ready for more extensive customizations.

```kotlin
@Composable
fun SelectedReactionsMenu(
    ...,
    headerContent: @Composable ColumnScope.() -> Unit = {
        // Header content
    },
    centerContent: @Composable ColumnScope.() -> Unit = {
        // Center content
    }
)
```

- `headerContent`: Allows you to customize the content shown at the top of the menu. By default it shows reaction options.
- `centerContent`: Allows you to customize the content shown at the center of the menu. By default it shows user reactions.

You can easily override either slot:

```kotlin
if (selectedMessageState is SelectedMessageReactionsState) {
    SelectedReactionsMenu(
        ...,
        // Custom header content
        headerContent = {
            Text(
                modifier = Modifier
                    .padding(16.dp)
                    .background(
                        shape = ChatTheme.shapes.avatar,
                        color = ChatTheme.colors.infoAccent
                    )
                    .padding(horizontal = 8.dp),
                style = ChatTheme.typography.body,
                color = ChatTheme.colors.textHighEmphasis,
                text = "User Reactions"
            )
        }
    )
}
```

The example above shows how to replace the header content with a custom `Text`.

The result looks like this:

![Custom SelectedReactionsMenu component with a custom header content](@chat-sdk/android/v5/_assets/compose_custom_selected_reactions_menu_custom_header_slot.png)

---

This page was last updated at 2025-08-15T14:15:37.206Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/android/v5/compose/message-components/selected-reactions-menu/](https://getstream.io/chat/docs/sdk/android/v5/compose/message-components/selected-reactions-menu/).