// Custom Button Component
export component Button inherits Rectangle {
    in property <bool> active: false;
    in property <image> icon <=> img.source;
    in property <string> text <=> label.text;
    out property <bool> pressed: touch.pressed;
    in property <bool> opaque: true;

    callback clicked;

    preferred-width: label.width + 27px;
    preferred-height: label.height + 5px;

    touch := TouchArea {
        clicked => {
            root.clicked()
        }
    }

    property <color> background-color: active ? Palette.primary-accent-color.brighter(0.10) : Palette.button-color;
    background: opaque ? (pressed ? background-color.darker(0.30) : background-color) : (pressed ? background-color.transparentize(0.85) : background-color.transparentize(0.65));

    label := Text {
        vertical-alignment: center;
        horizontal-alignment: center;
        color: active ? Palette.primary-accent-text-color : Palette.text-color;
        font-size: Palette.font-size;
    }

    img := Image {
        colorize: Palette.text-color;
    }
}

// Used the button in another file like this:

                property <int> count;

                Button {
                    text: "Clicked: " + count;
                    height: 200px;
                    clicked => {
                        count = count + 1;
                    }
                }