Button inputs

We can define buttons to add interactions for the user in the form. A button takes the following properties onClick, buttonProps and checked. The label will be placed inside the button.

"button": {
  "component": "button",
  "label": "Set value on click"
}

onClick

The onClick property allows to define what will be done when the user clicks on the button. For now, it only takes an object with set property. The set property can be directly an object or an array of object. Each set object is an object containing a property to interact with and the value that will be set to. The property is a path to a property in the data. The value can be a string, a number, a boolean or an object. When the value is an object, it must have a property from that is a path to a property in the data. The value will be the value of the property defined in from.

Simple onClick example :

"button": {
  "component": "button",
  "label": "Set value on click",
  "onClick": {
    "set": {
      "property": "name",
      "value": "Value set from button"
    }
  }
}

When the user clicks on the button, the value of the property name will be set to Value set from button.

Multiple set onClick :

"button_2": {
  "component": "button",
  "label": "Set multiple values on click",
  "onClick": {
    "set": [
      {
        "property": "first_name",
        "value": "Bernard"
      },
      {
        "property": "email",
        "value": "[email protected]"
      }
    ]
  }
}

When the user clicks on the button, the value of the property first_name will be set to Bernard and the value of the property email will be set to [email protected]

Set onClick with value from other data :

"button_3": {
  "component": "button",
  "label": "Set value from other data on click",
  "onClick": {
    "set": {
      "property": "name",
      "value": {
        "from": "first_name"
      }
    }
  }
}

When the user clicks on the button, the value of the property name will be set to the value of the property first_name.

Conditions

Each set of a click action can be conditionned by defining a conditions array. The conditions are defined here.

"button_4": {
  "component": "button",
  "label": "Set value from other data on click",
  "onClick": {
    "set": {
      "property": "name",
      "value": {
        "from": "first_name"
      },
      "condition": [
        {
          "property": "can_set_name",
          "assertion": "isTrue"
        }
      ]
    }
  }
}

Button with conditional on click#

buttonProps

The buttonProps property allows to define the props of the button. It takes an object with the props we want to define. The props will be passed to the button component. Here is an example :

"large_button": {
  "component": "button",
  "label": "Large button",
  "checked": false,
  "buttonProps": {
    "color": "danger",
    "block": true,
    "size": "lg"
  }
}

The buttonProps is an object that accepts multiple properties color, block, size, img and outline.

Size

The size property accepts one of those sizes : xl, lg, md, s. It determines the size of the button.

Color

We can define the color of the button by setting the color property.

Color	Description
primary	Primary color
secondary	Secondary color
success	Success color
danger	Danger color
warning	Warning color
info	Info color
light	Light color
dark	Dark color
link	Link color

tip

Color accepts an array of colors with their respective conditions.

"button_with_multiple_colors": {
  "component": "button",
  "label": "Button with multiple colors",
  "color": [
    {
      "color": "primary",
      "condition": [
        {
          "property": "button_color",
          "assertion": "equal",
          "value": "primary",
        },
      ],
    },
    {
      "color": "secondary",
      "condition": [
        {
          "property": "button_color",
          "assertion": "equal",
          "value": "secondary",
        },
      ],
    },
  ]
}

This example will display the button in primary color if the button_color property is 'primary', and in secondary color if the button_color property is 'secondary'.

Button with conditionnal colors#

Block

block is a boolean that determines if the button will take the full width of the container.

Img

We can define an image to be displayed in the button by setting the img property. It accepts a string that is the path to the image. The image will be displayed on the center of the button and the label will be set as the alt attribute of the image.

Outline

outline is a boolean that determines if the button will be outlined or not.

tip

Outline accepts an array of conditions that will be used to determine if the button will be outlined or not.

"button_with_multiple_outlines": {
  "component": "button",
  "label": "Button with multiple outlines",
  "buttonProps": {
    "outline": [
      {
        "property": "button_outline",
        "assertion": "isTrue"
      }
    ]
  }
}

Button with conditionnal outline#

Checked

We also might want to show the button as checked. We can do this by setting the checked property to true. It will add a checked icon on the button in order to display the checked state. The checked property accepts a boolean, or a complex condition object defined in the conditions section.

"button_checked": {
  "component": "button",
  "label": "Button checked",
  "checked": true
}

"button_with_condition_checked": {
  "component": "button",
  "label": "Button checked with condition",
  "checked": {
    "property": "display_button_as_checked",
    "assertion": "isTrue"
  }
}

In this previous example, the button will be marked as checked if the property display_button_as_checked is true.

Storybook Examples

Simple Buttons#

Buttons Variants#

Img Buttons#