Button Group

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	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
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
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
activeButtonTextFont	Sets all the different properties of font of text appearing on the button with an active state Reference link
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
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

Javascript

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>