Creating Buttons

To create a button component:

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

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

2. Click Design to edit the file in the visual editor.
3. In the Navigator pane, 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 element where Rectangle is the parent element of Text. Elements 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, 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 button to anchor the text to the whole button area.
7. Press Ctrl+S to save the button.

   

Note: To view the button, you must add it to a Qt Quick Application or Qt Quick UI project.

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