IIconButton

A component that displays an interactive icon button with hover and click states.

Example

Simple icon button with click handler

const deleteButton: IIconButton = {
  iconName: "delete.svg",
  size: 20,
  color: "#333333",
  hoverColor: "#FF0000",
  onClick: async () => {
    try {
      await deleteItem();
      return {
        actions: [Actions.showToast],
        toastProps: [{
          title: "Item deleted successfully",
          type: ToastType.success
        }]
      };
    } catch (error) {
      return {
        actions: [Actions.showToast],
        toastProps: [{
          title: "Failed to delete item",
          type: ToastType.error
        }]
      };
    }
  },
  isDisabled: false,
  title: "Delete item"
}

Properties

Property	Type	Description
iconName	string	The button display icon. The icon image must be uploaded to the assets folder. Only the image name with the extension must be specified in this field. The icon is rendered at the size set in the size field.
iconHoverName	string	The icon displayed while the cursor is over the button. The icon image must be uploaded to the assets folder. Only the image name with the extension must be specified in this field.
iconClickName	string	The icon displayed while the button is being clicked. The icon image must be uploaded to the assets folder. Only the image name with the extension must be specified in this field.
color	string	Icon color. Can be "accent" or any CSS color value
hoverColor	string	Icon color on hover action
clickColor	string	Icon color on click action
size	number	Button height and width value. Can be a number (pixels)
isFill	boolean	Determines if icon fill is needed
isStroke	boolean	Determines if icon stroke is needed
isDisabled	boolean	Sets the button to present a disabled state
isClickable	boolean	Sets cursor value to indicate clickability
onClick	() => TReturnMessage	Sets a button callback function triggered when the button is clicked
id	string	Sets component id
title	string	Data when user hover on icon (tooltip text)
tooltipId	string	Tooltip id for advanced tooltip configuration
tooltipContent	string	Tooltip content text
className	string	Defines the CSS class for styling the component. Can be used to override or extend the default component styles.