Button

Register on Lenra

Element of type Button

Button

This component provides a push button with several presentation options.

You can set its text, disable it, adjust its size and style, react to a click and add left or right icons.

Examples

Simple button

Here is a Button in it's simplest form.

{
    "type": "button",
    "text": "My button",
    "onPressed": {
        "action": "buttonPressed"
    },
}

Disabled button

You can disable the button with a graphical feedback to let the user know he can't interact with it.

{
    "type": "button",
    "text": "My button",
    "disabled": true,
}

Size and style adjusted button

Buttons also come with a range of different UI styles.

{
    "type": "button",
    "text": "My button",
    "size": "large",
    "mainStyle": "secondary",
}

Button with icons

{
    "type": "button",
    "text": "My button",
    "leftIcon": {
        "type": "icon",
        "value": "smart_button",
    },
    "rightIcon": {
        // You can also use a widget instead of an icon
        "type": "text",
        "value": "This can be used as an icon"
    },
}

Properties

AttributeDescriptionTypeDetails
typeThe identifier of the componentstring ("button")
textThe value of the text inside the buttonstring
disabledThe button is disabled if trueboolean
leftIconcomponenttypestring ("icon")
mainStyleThe style to use, the component will be changed according to the theme.string ("primary", "secondary", "tertiary")
onPressedBasic Listener
rightIconcomponenttypestring ("icon")
sizeThe size to use, the component will be sized according to the value.string ("small", "medium", "large")
submitWhether the button is a submit button for a form.boolean