Icon Button

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

Name	Type	Description
text	string	Text to appear on the element
hoverText	string	Text to appear on the element on mouseover
iconURL	string	Asset URL of the icon to be displayed on the element
alignment	IconButtonAlignment	Group of constants representing the alignment options
disabled	boolean	When set to true, prevents the user from interacting with the button: it cannot be pressed or focused.
buttonStyle	object	Styling properties and values of the element

Events

Events triggered by the element

Name	Description
cc-button-clicked	Event 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>