Skip to main content

​
Overview

This element uses Icon element and Label element to show text and icon(with background) and along with an alignment property to align the icon around the text. The purpose of this element is to initiate an action.

​
Properties

NameTypeDescription
textstringText to appear on the element
hoverTextstringText to appear on the element on mouseover
iconURLstringAsset URL of the icon to be displayed on the element
alignmentIconButtonAlignmentGroup of constants representing the alignment options
disabledbooleanWhen set to true, prevents the user from interacting with the button: it cannot be pressed or focused.
buttonStyleobjectStyling properties and values of the element

​
Events

Events triggered by the element
NameDescription
cc-button-clickedEvent triggered when user clicks on the element

​
Usage

  • JavaScript
import '@cometchat/uikit-elements';//import the web component package.
import { IconButtonAlignment } from '@cometchat/uikit-resources';

const text = "Large button";
const hoverText = "This is a large button";
const alignment = IconButtonAlignment.right
const iconURL = "https://img.icons8.com/?size=24&id=uooD0BINPxNE&format=svg";
const clickHandler = event => {
	//Perform appropriate action
}


<cometchat-icon-button
:text="text"
:alignment="alignment"
:hoverText="hoverText"
:iconURL="iconURL"
@cc-button-clicked="clickHandler">
</cometchat-icon-button>
⌘I