paim-on/qml/view/Button.qml

import QtQuick 2.0

Rectangle {
    id: button

    property bool checkable: false
    property bool checked: false
    property bool checkBox: false
    property string title
    property alias horizontalAlignment: label.horizontalAlignment

    signal clicked()

    implicitHeight: block
    implicitWidth: block * 3
    color: checked ? "gray" : "lightgray"
    border.width: 1
    border.color: "black"
    radius: space / 4
    opacity: enabled ? (mouseArea.pressed ? 0.6 : 0.9) : 0.4


    function toggle() {
        checked = !checked
    }

    Text {
        id: label
        text: (checkBox ? (checked ? "☑ " : "☐ ") : "") + title
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        anchors.fill: parent
        anchors.margins: space
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: {
            if (checkable) {
                toggle()
            }

            parent.clicked()
        }
    }
}