How to fit Button to icon size?

Kobid

Hi,
Is it possible to act Button control like ToolButton? I have set display: AbstractButton.IconOnly but it still has extra space. I have tried everything:

Button {
spacing: 0
padding: 0
leftInset: 0
rightInset: 0
leftPadding: 0
Layout.margins: 0
horizontalPadding: 0
verticalPadding: 0
display: AbstractButton.IconOnly
icon.source: "qrc:/icons/icons/plus-solid-full.svg"
icon.color: myPalette.buttonText
}

ToolButton works as expected (green rectangle) but it doesn't have background even if I set flat: false:

GrecKo

Your issue is caused by the implicitWidth of the button being the max of its content's implicitWidth (+ padding) and its background's implicitWidth.
One quick workaround is to to background.implicitWidht: 0 to ignore it and just use the one from the icon or change the implicitWidth of the button to depend only on the content:

Button {
    display: AbstractButton.IconOnly
    icon.source: "qrc:/icons/icons/plus-solid-full.svg"
    icon.color: myPalette.buttonText
    implicitWidth: implicitContentWidth + leftPadding + rightPadding
}

In this case I would maybe instead customize a ToolButton with background.visible: true. I assume you are using the Fusion style.

SGaist

Hi,

You can fix the size of the button in your code for example as you know the size of the icons.
Another option could be to add a spacer at the end of the layout to push the button against the combo box.

Kobid

I would preffer icon fit to button size than inversely. That is because controls have some preffered size due to its own role and also screen DPI and scale (I'm working on 4k display) so all controls nicely fit to each other's height in layouts. So in this case height should be default and width=icon.width. But with this solution icon is smaller:

Button {
                       display: AbstractButton.IconOnly
                       icon.source: "qrc:/icons/icons/plus-solid-full.svg"
                       icon.color: myPalette.buttonText
                       // icon.height: 24
                       // icon.width: 24
                       implicitWidth: icon.width
                   }

When I set some icon width, for example 24:

Button {
                        display: AbstractButton.IconOnly
                        icon.source: "qrc:/icons/icons/plus-solid-full.svg"
                        icon.color: myPalette.buttonText
                        // icon.height: 24
                        icon.width: 24
                        implicitWidth: icon.width
                    }

Then button's height become larger than other buttons. This is situation which I mentioned at the beginning - I don't know how to predict preffered icon size for user OS, theme and resolution.
About spacer. Can't find equivalent for qtwidget's spacer so I added Item at the end:

Item {
                        Layout.fillWidth: true
                    }

But result looks like on screens above - it doesn't squeeze buttons

GrecKo

Your issue is caused by the implicitWidth of the button being the max of its content's implicitWidth (+ padding) and its background's implicitWidth.
One quick workaround is to to background.implicitWidht: 0 to ignore it and just use the one from the icon or change the implicitWidth of the button to depend only on the content:

Button {
    display: AbstractButton.IconOnly
    icon.source: "qrc:/icons/icons/plus-solid-full.svg"
    icon.color: myPalette.buttonText
    implicitWidth: implicitContentWidth + leftPadding + rightPadding
}

In this case I would maybe instead customize a ToolButton with background.visible: true. I assume you are using the Fusion style.

Kobid

@GrecKo Thank you! Indeed both of your tricks do the job, for Button and ToolButton. For background.visible: true I would never figure it out - I was convinced that flat: false should do that.

GrecKo

To figure that out I read the source code of fusion/ToolButton.qml

SGaist

Damn ! I somehow missed that you were using QML 😅
Sorry for the wrong hints. I am glad that @GrecKo was able to help you