A button component in QML

Button.qml

import Qt 4.7

BorderImage {
    id: buttonbase

    signal clicked

    property int hitboxExtension : 20
    property alias text : label.text
    property bool pressed: hitbox.pressed && hitbox.containsMouse

    source: pressed ? "button_down.png" : "button_up.png"

    border.left: 50;
    border.right: 50;

    MouseArea {
        id: hitbox
        anchors.fill: parent
        anchors.topMargin: -hitboxExtension
        anchors.bottomMargin: -hitboxExtension
        anchors.leftMargin: -hitboxExtension
        anchors.rightMargin: -hitboxExtension

        onClicked: { haptics.buttonClick(); parent.clicked() }
        onPressedChanged: { if (hitbox.pressed) haptics.buttonClick(); }
    }

    Text {
        id: label
        anchors.centerIn: parent
        anchors.verticalCenterOffset: pressed ? -2 : -3
        font.family: "Lato Black"
        font.pixelSize: 26
        color: "#ffffff"
        styleColor: "#4f000000"
        style: Text.Sunken
    }
}

Button1.qml

import Qt 4.7

BorderImage {
    id: buttonbase

    signal clicked

    property bool pressed: hitbox.pressed && hitbox.containsMouse

    source: pressed ? "button_down.png" : "button_up.png"

    border.left: 50;
    border.right: 50;

    MouseArea {
        id: hitbox
        anchors.fill: parent
        onClicked: parent.clicked()
    }
}

Button2.qml

import Qt 4.7

BorderImage {
    id: buttonbase

    signal clicked

    property alias text : label.text
    property bool pressed: hitbox.pressed && hitbox.containsMouse

    source: pressed ? "button_down.png" : "button_up.png"

    border.left: 50;
    border.right: 50;

    MouseArea {
        id: hitbox
        anchors.fill: parent
        onClicked: parent.clicked()
    }

    Text {
        id: label
        anchors.centerIn: parent
        anchors.verticalCenterOffset: pressed ? -2 : -3
        font.family: "Lato Black"
        font.pixelSize: 26

        color: "#ffffff"
        styleColor: "#4f000000"
        style: Text.Sunken
    }
}

haptics.cpp

#include "haptics.h"

#ifdef Q_OS_SYMBIAN
#include <QFeedbackEffect>
QTM_USE_NAMESPACE
#endif

Haptics::Haptics(QObject *parent) :
    QObject(parent)
{
}

void Haptics::buttonClick() {
#ifdef Q_OS_SYMBIAN
    QFeedbackEffect::playThemeEffect(QFeedbackEffect::ThemeBasicButton);
#endif
}

haptics.h

#ifndef HAPTICS_H
#define HAPTICS_H

#include <QObject>

class Haptics : public QObject
{
    Q_OBJECT
public:
    explicit Haptics(QObject *parent = 0);

signals:

public slots:
    void buttonClick();

};

#endif // HAPTICS_H

HitboxExtensionSnip.qml

property int hitboxExtension : 10

// Yadda yadda

MouseArea {
    id: hitbox
    anchors.fill: parent
    anchors.topMargin: -hitboxExtension
    anchors.bottomMargin: -hitboxExtension
    anchors.leftMargin: -hitboxExtension
    anchors.rightMargin: -hitboxExtension

main.cpp

    Haptics haptics;
    QDeclarativeView w;
    QDeclarativeEngine* engine = w.engine();
    engine->rootContext()->setContextProperty("haptics", &haptics);

tester.qml

import Qt 4.7

Rectangle {

    width: 360
    height: 640

    color: "#444444"


    Button {
        id: selectButton
        anchors.left: parent.left
        anchors.leftMargin: 30
        anchors.right: parent.right
        anchors.rightMargin: 30
        anchors.bottom: quitButton.top
        anchors.bottomMargin: 20
        text: "Select person"

        onClicked: { proxyItem.sourceItem = picker; proxyItem.grabImage(); }
    }

        Button {
        id: quitButton
        anchors.left: parent.left
        anchors.leftMargin: 30
        anchors.right: parent.right
        anchors.rightMargin: 30
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 30
        text: "Exit"

        onClicked: Qt.quit();
    }
}