Lenra Docs
Register on Lenra
  • Home
  • Getting started
    Open/Close
  • Guides
    Open/Close
  • Features
    Open/Close
  • References
    Open/Close
  • Contribute

    Button

    This is the button component.

    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

    {
        "type": "button",
        "text": "My button",
        "onPressed": {
            "_type": "listener",
            "name": "buttonPressed"
        },
    }
    

    Disabled button

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

    Size and style adjusted button

    {
        "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 view instead of an icon
            "type": "text",
            "value": "This can be used as an icon"
        },
    }
    

    Properties

    AttributeDescriptionType
    _typeThe identifier of the component
    • button
    textThe value of the text inside the buttonstring
    disabledThe button is disabled if trueboolean
    leftIconThe Icon to useIcon
    mainStyleThe style to use, the component will be changed according to the theme.string
    • primary
    • secondary
    • tertiary
    onPressedListener
    rightIconThe Icon to useIcon
    sizeThe size to use, the component will be sized according to the value.string
    • medium
    • small
    • large
    submitWhether the button is a submit button for a form.boolean