Contents

Badge QML Type

A badge with a colored background. More...

Import Statement: import org.kde.kirigami
Since: 6.25

Properties

Detailed Description

Useful for badging something in an attention-getting way to indicate a non-default status. Supports both text and an icon, both optional.

If the badge has no text or has single-line text, it will have a highly rounded, pill-shaped appearance. Otherwise it will be a rounded rectangle.

Typical implementation:

import org.kde.kirigami as Kirigami

Kirigami.Badge {
    text: i18nc("@info badge text", "New!")
    type: Kirigami.Badge.Type.Positive
}

Implemented as a number badge:

import org.kde.kirigami as Kirigami

Kirigami.Badge {
    text: 25
}

Implemented as a warning with a re-colored icon:

import org.kde.kirigami as Kirigami

Kirigami.Badge {
    icon.name: "edit-bomb-symbolic"
    text: i18nc("@info badge text", "The computer is about to explode")
    type: Kirigami.Badge.Type.Negative
}

Implemented with a custom color and non-recolored icon:

import org.kde.kirigami as Kirigami

Kirigami.Badge {
    icon.name: "applications-science"
    text: i18nc("@info badge text", "Science")
    customColor: Kirigami.Theme.visitedLinkColor
}

Property Documentation

customColor : color [since 6.25]

When set, this property overrides the default background color that was chosen by the implementation based on the type property.

The implementation should set a legible text color for whatever color is chosen here. For maximum control over the text color, also set customTextColor.

This property was introduced in 6.25.

customTextColor : color [since 6.25]

When set, this property overrides the default text color that was chosen by the implementation based on the type or customTextColor properties.

This property was introduced in 6.25.

icon group

icon.color : color

icon.fromControlsIcon : function

icon.height : real

icon.name : string

icon.source : var

icon.width : real

This grouped property determines the appearance of the optional icon.

If you set the color property or pass an icon name ending in "-symbolic", the icon will be masked and re-colored to match the text color.

The default is to display no icon.

NameDescription
nameThis property holds icon name.

The icon will be loaded from the platform theme. If the icon is found in the theme, it will always be used; even if icon.source is also set. If the icon is not found, icon.source will be used instead.

sourceThis property holds the icon source.

The icon will be loaded as a regular image.

widthThis property holds the width of the icon.
heightThis property holds the height of the icon.
colorThis property holds the icon tint color.

The icon is tinted with the specified color, unless the color is set to "transparent".

fromControlsIconBind this icon to all matching properties of a Controls icon group.

This function automatically binds all properties to matching properties of a controls icon group, since we cannot just reuse the Controls icon group.

To use it, you can assign the result to an IconPropertiesGroup, like so:

icon: icon.fromControlsIcon(control.icon).

text : string [since 6.25]

This property determines the label text in the badge. Long text will wrap, but try to minimize text length anyway. The label is limited to plain text.

The default value is an empty string, i.e. no text.

This property was introduced in 6.25.

type : enumeration

This property holds the badge type, which affects the badge's default background color.

One of

  • Information
  • Positive
  • Warning
  • Error

The default is Kirigami.Badge.Type.Information, which the implementation should use to produce a soft blue background with the Breeze color scheme.