Button

Usage

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

• type (String) - the type attribute for a button
• id (String) - an id for the component
• color (String) (Optional) - defines the color of the button, choose from:
• Allowed values: {highlight, negative, neutral, positive, warning}
• Default: neutral
• disabled (Boolean) - set to true in order to disable the button
  • Default: false
• icon (String) - icon to show inside the button
• size (String) (Optional) - defines the size of the button, choose from:
• Allowed values: {default, large, small, xsmall}
• Default: default
• text (String) - Button text
• variant (String) (Optional) - defines the variant of the button, choose from:
• Allowed values: {ghost, primary, secondary}
• Default: secondary

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.