Creating a custom QML component

We already touched the topic of custom components when we worked with the form editor in the previous chapter. Our QML files implemented reusable components with a clean interface that can be used in the rest of the application. We will now take a more low-level approach and create a new QML component directly from QML code using the basic Qt Quick building blocks. Our component will be a button with a rounded shape and a nice background. The button will hold definable text and an icon. Our component should look good for different texts and icons.

Time for action – Creating a button component

Start by creating a new project in Qt Creator. Choose Qt Quick Application - Empty as the project template. Name the project custom_button and leave the rest of the options unchanged.

At this point, you should end up with a QML document containing an empty window. Let's start by creating the button frame. Edit the main.qml file to add a new Rectangle item to the window:

import...