Skip to main content

QCustomTileButton

QCustomTileButton

A selectable device / action TILE.

A rounded-rectangle button with a line ICON above a CAPTION — the classic smart-home / launcher tile. It is CHECKABLE: the selected tile paints a two-stop diagonal GRADIENT (e.g. purple->pink) with light icon+text, the rest paint a flat card fill with muted icon+text. Painted with QPainter so it stays crisp at any size and recolours on a theme switch (all colours are qproperties); the icon is a recoloured SVG so it flips light/muted with the selected state.

Give it an icon with iconPath (an .svg) + a caption in code or Qt Designer. It is a QAbstractButton, so it emits clicked()/toggled(bool) and participates in a QButtonGroup for single-select device grids.

At a glance

TierFree (GPLv3)
Importfrom Custom_Widgets.QCustomTileButton import QCustomTileButton
Qt DesignerYes — drag it from the palette

Quick start

from Custom_Widgets.QCustomTileButton import QCustomTileButton

widget = QCustomTileButton()

Dark theme

Colours come from the design tokens, so the widget follows the app theme with no extra work.

QCustomTileButton in dark theme

Properties

Every property below is settable in code and in Qt Designer.

PropertyTypeDefault
textstring
iconQIcon
iconSizeint34
shortcutQKeySequence
checkablebool
checkedbool
autoRepeatbool
autoExclusivebool
autoRepeatDelayint
autoRepeatIntervalint
downbool
captionstringLights
iconPathstring
gradientStartcolor#a05cf0
gradientEndcolor#f45c9c
bgColorcolor#242850
iconColorcolor#9aa0c6
activeColorcolor#ffffff
cornerRadiusint16

Methods

MethodDescription
activeColor(*args, **kwargs)Active color.
bgColor(*args, **kwargs)Bg color.
caption(*args, **kwargs)Caption.
cornerRadius(*args, **kwargs)Corner radius.
gradientEnd(*args, **kwargs)Gradient end.
gradientStart(*args, **kwargs)Gradient start.
iconColor(*args, **kwargs)Icon color.
iconPath(*args, **kwargs)Icon path.
iconSize(*args, **kwargs)Icon size.
setCaption(text)Set the caption.
setGradient(start, end)Set the gradient.
setIconPath(path)Set the icon path.

Theming

Colours come from the design tokens, so they follow the active theme. Roles used: accent.

See Design tokens.

QCustomActionButton · QCustomCopyButton · QCustomQPushButton · QCustomQPushButtonGroup · QCustomRainbowButton · QCustomSocialButton · QCustomThemeDarkLightToggle