Skip to main content

Button

A native push button with the shadcn variants, sizes and keyboard behavior.

Loading preview…
Live C++Source and licences
#include <QApplication>
#include <QFile>
#include <QHBoxLayout>
#include <QLabel>
#include <QPainter>
#include <QStandardItemModel>
#include <QUrl>
#include <QVBoxLayout>
#include <array>
#ifdef SHADCN_GALLERY_MEDIA
#include <shadcn/media.hpp>
#endif
#include <shadcn/shadcn.hpp>

QWidget* example(QWidget* parent = nullptr) {
    using namespace shadcn;
    auto* canvas = new QWidget(parent);
    canvas->setAutoFillBackground(true);
    auto* outer = new QHBoxLayout(canvas);
    outer->setContentsMargins(32, 32, 32, 32);
    auto* host = new QWidget(canvas);
    auto* layout = new QVBoxLayout(host);
    layout->setContentsMargins(0, 0, 0, 0);
    layout->setSpacing(16);
    outer->addStretch();
    outer->addWidget(host, 0, Qt::AlignCenter);
    outer->addStretch();
    auto* row = new QHBoxLayout;
    row->setSpacing(8);
    auto* button = new Button("Button", host);
    button->setVariant(Variant::Outline);
    row->addWidget(button);
    auto* icon = new Button({}, host);
    icon->setButtonSize(ButtonSize::IconSm);
    icon->setVariant(Variant::Outline);
    icon->setAccessibleName("Move up");
    QPixmap image(32, 32);
    image.fill(Qt::transparent);
    QPainter p(&image);
    p.setRenderHint(QPainter::Antialiasing);
    p.setPen(QPen(host->palette().color(QPalette::WindowText), 2.7, Qt::SolidLine, Qt::RoundCap,
                  Qt::RoundJoin));
    p.drawLine(16, 24, 16, 8);
    p.drawLine(16, 8, 8, 16);
    p.drawLine(16, 8, 24, 16);
    p.end();
    icon->setIcon(QIcon(image));
    row->addWidget(icon);
    layout->addLayout(row);
    return canvas;
}

Installation​

add_subdirectory(shadcn-cpp)
target_link_libraries(app PRIVATE shadcn::widgets)

Usage​

#include <shadcn/widgets.hpp>

shadcn::Button button("Continue", parent);
button.setVariant(shadcn::Variant::Outline);
button.setButtonSize(shadcn::ButtonSize::Sm);
QObject::connect(&button, &QPushButton::clicked, receiver, onClicked);

Use make_child when the parent should own the widget.

auto& button = shadcn::make_child<shadcn::Button>(window, "Continue");
layout.addWidget(&button);

Pointer ripple​

Enable an optional ripple from the pointer position. It fades over 1.6 seconds and respects reduced motion.

Loading preview…
Live C++Source and licences
#include <QApplication>
#include <QFile>
#include <QHBoxLayout>
#include <QLabel>
#include <QPainter>
#include <QStandardItemModel>
#include <QUrl>
#include <QVBoxLayout>
#include <array>
#ifdef SHADCN_GALLERY_MEDIA
#include <shadcn/media.hpp>
#endif
#include <shadcn/shadcn.hpp>

QWidget* example(QWidget* parent = nullptr) {
    using namespace shadcn;
    auto* canvas = new QWidget(parent);
    canvas->setAutoFillBackground(true);
    auto* outer = new QHBoxLayout(canvas);
    outer->setContentsMargins(32, 32, 32, 32);
    auto* host = new QWidget(canvas);
    auto* layout = new QVBoxLayout(host);
    layout->setContentsMargins(0, 0, 0, 0);
    layout->setSpacing(16);
    outer->addStretch();
    outer->addWidget(host, 0, Qt::AlignCenter);
    outer->addStretch();
    auto* button = new Button("Click anywhere", host);
    button->setVariant(Variant::Outline);
    button->setRippleEnabled(true);
    layout->addWidget(button);
    return canvas;
}
button.setRippleEnabled(true);

Adapted from UI Components by Saurabh Chauhan. The MIT notice is retained.

API​

The public API includes six variants, eight sizes, an invalid state and inherited Qt button signals. The button grows when its text needs more room.

Keyboard and accessibility​

Space and Enter activate the button. Qt supplies focus handling, accessible text and signal delivery. Set an accessible name when the visible text does not describe the action.