Icon Button


Buttons are used to initialise an action. Button icons help speed up cognition of the UI and the task the user has to perform. Our goal is to use icons carefully and sparingly. Icons should be distinct and informative.

JSON structure example

"viewDefinition": {
    "children": {
        "iconButtonComponent": {
            "type": "icon-button",
            "id": "iconButtonId",
            "color": "highlight",
            "disabled": true,
            "icon": "bell",
            "size": "small",
            "customIcon": "https://icons.com/icon.svg",
            "variant": "primary"

Do's and Don'ts

For more details, refer to Icon Button Usage and Visual styleguides in our Storybook

Defining logic for Icon buttons

You must define what happens when the Icon button is clicked by linking an action to the Click event for the button. For more details, see Logic map.