> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-in-group-react-v6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Mentions Formatter

> Format @mentions in CometChat Flutter UI Kit message lists, composers, and conversations with custom styles and tap handling.

## Overview

The `CometChatMentionsFormatter` class formats mentions within text messages displayed in the chat interface. For the base `CometChatTextFormatter` API, see [Text Formatters](/ui-kit/flutter/customization-text-formatters).

## Usage

Pass `CometChatMentionsFormatter` to the `textFormatters` property of widgets like [CometChatConversations](/ui-kit/flutter/conversations), [CometChatMessageList](/ui-kit/flutter/message-list), or [CometChatMessageComposer](/ui-kit/flutter/message-composer).

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    textFormatters: [
      CometChatMentionsFormatter(
        messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
          TextStyle(
            color: alignment == BubbleAlignment.left ? Colors.orange : Colors.pink,
            fontSize: 14,
            fontWeight: FontWeight.bold,
          ),
      ),
    ]
    ```
  </Tab>
</Tabs>

***

## Actions

##### onMentionTap

Setting a listener for mention-click events in Message Bubbles. This listener is activated when a mention is clicked, returning the corresponding user object.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageList(
      user: user,
      textFormatters: [
        CometChatMentionsFormatter(
          onMentionTap: (mention, mentionedUser, {message}) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Tapped on ${mentionedUser.name}')),
            );
          },
          messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
            TextStyle(
              color: alignment == BubbleAlignment.left ? Colors.orange : Colors.greenAccent,
              fontSize: 14,
              fontWeight: FontWeight.bold,
            ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

***

## Customization

| Property                   | Description                            | Code                                |
| -------------------------- | -------------------------------------- | ----------------------------------- |
| trackingCharacter          | Character that triggers mention search | `String? trackingCharacter`         |
| pattern                    | Regex pattern to identify mentions     | `RegExp? pattern`                   |
| messageBubbleTextStyle     | Text style for message bubble          | `TextStyle? messageBubbleTextStyle` |
| messageInputTextStyle      | Text style for message input           | `TextStyle? messageInputTextStyle`  |
| onMentionTap               | Callback for mention tap actions       | `void Function(User)? onMentionTap` |
| groupMembersRequestBuilder | Request builder for group members      | `GroupMembersRequestBuilder?`       |
| usersRequestBuilder        | Request builder for users              | `UsersRequestBuilder?`              |

***

## Advanced

### Composer Mention Text Style

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageComposer(
      user: user,
      textFormatters: [
        CometChatMentionsFormatter(
          messageInputTextStyle: (theme) {
            return const TextStyle(
              color: Colors.lightBlueAccent,
              fontSize: 14,
              fontWeight: FontWeight.bold,
            );
          },
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### Message Bubble Mention Text Style

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageList(
      user: user,
      textFormatters: [
        CometChatMentionsFormatter(
          messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
            TextStyle(
              color: alignment == BubbleAlignment.left ? Colors.orange : Colors.greenAccent,
              fontSize: 14,
              fontWeight: FontWeight.bold,
            ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### Conversations Mention Text Style

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversations(
      textFormatters: [
        CometChatMentionsFormatter(
          messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
            const TextStyle(
              color: Colors.lightBlueAccent,
              fontSize: 14,
              fontWeight: FontWeight.bold,
            ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>