Cannot assign to non-existent property

Question

I am trying to make a very simple program to learn how to define custom QML types for reuse. I'm not sure why I'm getting the following error:

Cannot assign to non-existent property "color"

I have searched for an answer and have not found anything that solves it.

Below is the code. Qt underlines color and radius in red, meaning that it is being flagged as an "invalid property name."

//Button.qml
import QtQuick 2.3

Rectangle {
width: 100; height: 100
color: "red"

    MouseArea {
        anchors.fill: parent
        onClicked: console.log("button clicked!")
    }
}

//main.qml 
import QtQuick 2.3
import QtQuick.Controls 1.2

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("&Open")
                onTriggered: console.log("Open action triggered");
            }
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }

    Column {
        Button {width: 50; height: 50}
        Button { x: 50; width: 100; height: 50; color: "blue" }
        Button { width: 50; height: 50; radius: 8}
    }

}

Solution

Qt Quick Controls has a Button type, and so do you. Apparently the Button from the Qt Quick Controls import (which has no radius or color property) gets chosen over your local file. You have a few options:

1. Rename your Button type to something else.
2. Import Qt Quick Controls into a namespace.
3. Import your type into a namespace.

Here's how you'd do option #2:

import QtQuick 2.3
import QtQuick.Controls 1.2 as Controls

Controls.ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    menuBar: Controls.MenuBar {
        Controls.Menu {
            title: qsTr("File")
            Controls.MenuItem {
                text: qsTr("&Open")
                onTriggered: console.log("Open action triggered")
            }
            Controls.MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit()
            }
        }
    }

    Column {
        Button {
            width: 50
            height: 50
        }
        Button {
            x: 50
            width: 100
            height: 50
            color: "blue"
        }
        Button {
            width: 50
            height: 50
            radius: 8
        }
    }
}