Creating Buttons

To create a button component:

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

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

  2. Click Design to edit the file in Form Editor.
  3. In Navigator, select Item and set the width (W) and height (H) of the button in Properties.
  4. Drag-and-drop a Rectangle from Library > Components > Default Components > Basic to the component in Navigator. This creates a nested component where the Item is the parent of the Rectangle. Components are positioned relative to their parents.
  5. In the Properties view, modify the appearance of the rectangle:
    1. In the Color field, select the button color.
    2. In the Radius field, set the radius of the rectangle to produce rounded corners for the button.
    3. Select Layout, and then select the (Fill to Parent) button to anchor the Rectangle to the Item.
  6. Drag-and-drop a Text component to the Item in Navigator.
  7. In the Properties view, edit the properties of the Text component
    1. In the Text field, enter 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. Select Layout > Fill to Parent to anchor the text to the whole button area.
  8. Press Ctrl+S to save the button.

    "Button component"

To be useful, the button component has to be created in a project. When you work on other files in the project to create screens or other components for the UI, the button component appears in Library > Components > My Components. You can use it to create button instances and modify their properties to assign them useful IDs, change their appearance, and set the button text for each button instance, for example.

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

© 2021 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.