Buttons are used as triggers for actions. They should rarely, if ever, be used for navigation. Instead use Links because it takes users to a new page and is not associated with actions.

To make different actions clear and possible to distinguish from each other we have different types of buttons. Button size, colours, labels and location varies with the purpose and importance they have in relation to the task. Buttons are one of the most important signals to the users according to how to complete the task and should be used consistently.

JSON structure example

"viewDefinition": {
    "children": {
        "buttonComponent": {
            "type": "button",
            "id": "buttonId",
            "color": "highlight",
            "disabled": true,
            "icon": "bell",
            "size": "small",
            "text":  "Button Text",
            "variant": "primary"

Do's and Don'ts

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

Defining logic for Buttons

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