> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Button Group

> Button Group — CometChat documentation.

## Overview

This element is grouping of buttons together in a single line.

## Properties

| Name             | Type                                                              | Description                                  |
| ---------------- | ----------------------------------------------------------------- | -------------------------------------------- |
| data             | Array of any: \{id,buttonText,hoverText,iconURL,onClick}          | Array of button element properties           |
| buttonGroupStyle | [ButtonGroupStyle](/ui-kit/angular/button-group#buttongroupstyle) | Styling properties and values of the element |

## ButtonGroupStyle

| Name                     | Description                                                                                                                                                                                                         |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| width                    | Sets the width of the element                                                                                                                                                                                       |
| height                   | Sets the height of the element                                                                                                                                                                                      |
| border                   | Sets the border of the element                                                                                                                                                                                      |
| borderRadius             | Sets the border radius of the element                                                                                                                                                                               |
| background               | Sets all background style properties at once, such as color, image, origin and size, or repeat method of the element. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/background)                 |
| iconTint                 | Sets the tint or color applied to the element                                                                                                                                                                       |
| buttonTextFont           | Sets all the different properties of font of text appearing on each button [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                                                  |
| buttonTextColor          | Sets the foreground color for each button.                                                                                                                                                                          |
| buttonBorder             | Sets the border for each button                                                                                                                                                                                     |
| buttonBorderRadius       | Sets the border radius for each button                                                                                                                                                                              |
| buttonBackground         | Sets all background style properties at once, such as color, image, origin and size, or repeat method for each button. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/background)                |
| activeButtonTextFont     | Sets all the different properties of font of text appearing on the button with an active state [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                              |
| activeButtonTextColor    | Sets the foreground color of the text appearing on the button with an active state.                                                                                                                                 |
| activeButtonBorder       | Sets the border on the button with an active state                                                                                                                                                                  |
| activeButtonBorderRadius | Sets the border radius of the button with an active state                                                                                                                                                           |
| activeButtonBackground   | Sets all background style properties at once, such as color, image, origin and size, or repeat method of button with an active state. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/background) |
| activeButtonBoxShadow    | Sets shadow effects around the button with an active state                                                                                                                                                          |
| buttonSeparatorColor     | Sets the foreground color of the divider line that appears between each individual button element                                                                                                                   |

## Events

| Name                    | Description                                                              |
| ----------------------- | ------------------------------------------------------------------------ |
| cc-button-group-clicked | Event triggered when user clicks on any of the button within the element |

## Usage

<Tabs>
  <Tab title="HTML">
    ```html theme={null}
    <cometchat-button-group 
    [data]="buttonGroup"
    ></cometchat-button-group>
    ```
  </Tab>

  <Tab title="JavaScript">
    ```js theme={null}
    import '@cometchat/uikit-elements';//import the web component package.
    import { ButtonGroupStyle } from '@cometchat/uikit-elements';

    editMessage = (event: any) => {
      //perform appropriate action
    }
      
    viewMore = (event: any) => {
      //perform appropriate action
    }

    buttonGroup = [
        {
          id : "edit", 
          iconURL : "https://img.icons8.com/?size=24&id=21076&format=svg", 
          onClick : this.editMessage
        }, 
        {
          id : "more", 
          buttonText : "More", 
          hoverText : "View more options", 
          onClick : this.viewMore
        }
    ];
    ```
  </Tab>
</Tabs>