To create a button component:

1. Select File > New File or Project > Qt > QML File > Choose to create a QML file called Button.qml (for example).

   Note: Components are listed in the Library only if the filename begins with a capital letter.

2. Click Design to edit the file in the visual editor.
3. In the Navigator, click Rectangle to set properties for it.
4. In the Properties pane, modify the appearance of the button.
   1. In the Size field, set the width (W) and height (H) of the button.
   2. In the Color field, select the button color.
   3. In the Radius field, use the slider to set the radius of the rectangle and produce rounded corners for the button.
5. Drag and drop a Text item on top of the Rectangle. This creates a nested item where Rectangle is the parent item of Text. Items are positioned relative to their parents.
6. In the Properties pane, edit the properties of the Text item.
   1. In the Text field, type Button.

      You can select the text color in the Text color field and the font, size, and style in the Font section.

   2. In the Alignment field, select the center buttons to align the text to the center of the button.
   3. Click Layout, and then click the (Fill to Parent) button to anchor the text to the whole button area.
7. Press Ctrl+S to save the button.

   

To create a graphical button that scales beautifully without using vector graphics, use the BorderImage type. For more information, see Creating Scalable Buttons and Borders.