CODEWITHSUNDEEP
qt
DHamrick
DHamrick

Reputation: 8488

Qt QPushbutton Icon above Text

When I create a QPushButton with an Icon it by default displays the text to the right of the icon. Is there a way to have the text display underneath the icon?

Upvotes: 33

Views: 44815

Answers (3)

RajaRaviVarma
RajaRaviVarma

Reputation: 2742

This is not possible with QPushButton. In QPushButton, the only placement options (LayoutDirection) are LeftToRight, RightToLeft and Auto. But you can use QToolButton instead.

Use Qt Creator, switch to Design pane, add a QToolButton and in the right side bottom pane, you will see an option 'textFormat', in that select ToolButtonTextUnderIcon.

Update: The textFormat option has been changed to toolButtonStyle in recent versions of Qt Creator (4.7.0).

Upvotes: 6

richardwb
richardwb

Reputation: 4529

If you're able to, the easiest thing to do is use a QToolButton instead:

QToolButton* button = new QToolButton(this);
button->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
button->setIcon(myIcon);
button->setText("Sample text");

If that's not an option you could consider creating your own button widget, possibly derived from QPushButton or QAbstractButton. In this case you'll probably (I haven't tried it myself) want to focus most of your efforts on reimplementing paintEvent().

[Edit: read the comments for alternatives which are probably way simpler than this]

Upvotes: 43

Caronte
Caronte

Reputation: 139

QPushButton {
    padding: -25px 0 10px 0;
    border: 1px solid black;
    border-radius: 2px;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-origin: content;
    background-image: url(":/new/resource/accept.png");
 }
QPushButton:disabled {
    background-image: url(":/new/resource/accept_b.png");
 }

Upvotes: 8

Related Questions