FreeKill/qml/Pages/MetroButton.qml

import QtQuick 2.15

Item {
    property bool enabled: true
    property alias text: title.text
    property alias textColor: title.color
    property alias textFont: title.font
    property alias backgroundColor: bg.color
    property alias border: bg.border
    property alias iconSource: icon.source
    property int padding: 5

    signal clicked

    id: button
    width: icon.width + title.implicitWidth + padding * 2
    height: Math.max(icon.height, title.implicitHeight) + padding * 2

    Rectangle {
        id: bg
        anchors.fill: parent
        color: "black"
        border.width: 2
        border.color: "white"
        opacity: 0.8
    }

    states: [
        State {
            name: "hovered"; when: mouse.containsMouse
            PropertyChanges { target: bg; color: "white" }
            PropertyChanges { target: title; color: "black" }
        },
        State {
            name: "disabled"; when: !enabled
            PropertyChanges { target: button; opacity: 0.2 }
        }
    ]

    MouseArea {
        id: mouse
        anchors.fill: parent
        hoverEnabled: parent.enabled
        onReleased: if (parent.enabled) parent.clicked()
    }

    Row {
        x: padding
        y: padding
        anchors.centerIn: parent
        spacing: 5

        Image {
            id: icon
            anchors.verticalCenter: parent.verticalCenter
            fillMode: Image.PreserveAspectFit
        }

        Text {
            id: title
            font.pixelSize: 18
            // font.family: "WenQuanYi Micro Hei"
            anchors.verticalCenter: parent.verticalCenter
            text: ""
            color: "white"
        }
    }
}