​
Overview

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

​
Properties

NameTypeDescription
dataArray of any: {id,buttonText,hoverText,iconURL,onClick}Array of button element properties
buttonGroupStyleButtonGroupStyleStyling properties and values of the element

​
ButtonGroupStyle

NameDescription
widthSets the width of the element
heightSets the height of the element
borderSets the border of the element
borderRadiusSets the border radius of the element
backgroundSets all background style properties at once, such as color, image, origin and size, or repeat method of the element. Reference link
iconTintSets the tint or color applied to the element
buttonTextFontSets all the different properties of font of text appearing on each button Reference link
buttonTextColorSets the foreground color for each button.
buttonBorderSets the border for each button
buttonBorderRadiusSets the border radius for each button
buttonBackgroundSets all background style properties at once, such as color, image, origin and size, or repeat method for each button. Reference link
activeButtonTextFontSets all the different properties of font of text appearing on the button with an active state Reference link
activeButtonTextColorSets the foreground color of the text appearing on the button with an active state.
activeButtonBorderSets the border on the button with an active state
activeButtonBorderRadiusSets the border radius of the button with an active state
activeButtonBackgroundSets all background style properties at once, such as color, image, origin and size, or repeat method of button with an active state. Reference link
activeButtonBoxShadowSets shadow effects around the button with an active state
buttonSeparatorColorSets the foreground color of the divider line that appears between each individual button element

​
Events

NameDescription
cc-button-group-clickedEvent triggered when user clicks on any of the button within the element

​
Usage

import '@cometchat/uikit-elements';//import the web component package.
import { ButtonGroupStyle } from '@cometchat/uikit-elements';

const editMessage = event => {
  //perform appropriate action
}

const viewMore = event => {
	//perform appropriate action
}

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

<cometchat-button-group :data="buttonGroup"></cometchat-button-group>