Icon Button

Usage

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"
        }
    }
}

• type (String) - the type attribute for a icon-button
• id (String) - an id for the component
• buttonAriaLabel (String) - aria-label for the button
• buttonTabIndex (String) - tabindex for the button
• buttonTitle (String) - title for the button
• buttonValue (String) - value for the button
• color (String) (Optional) - defines the color of the icon-button, choose from:
• Allowed values: {highlight, negative, neutral, positive, warning}
• Default: neutral
• customIcon (String) - Use a custom icon. The image source can be an Url or path to an image. A square image (1:1 aspect ratio) is recommended.
• disabled (Boolean) - set to true in order to disable the icon-button
  • Default: false
• icon (String) - icon to show inside the icon-button
• size (String) (Optional) - defines the size of the icon-button, choose from:
• Allowed values: {default, large, small, xsmall}
• Default: default
• variant (String) (Optional) - defines the variant of the icon-button, choose from:
• Allowed values: {ghost, primary, secondary}
• Default: secondary

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.