Components/Data display

ETag Tag

import EUI 1.0

Examples

Tag with icon

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETag { text: "EUI" iconSource: EIcons.HOUSE }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Tag with avatar

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETag { text: "EUI" avatarSource: "qrc:/example/images/gallery/avatar-02.jpg" }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Checkable tags, custom colors and closing

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Row { spacing: 12 ETag { checkable: true text: qsTr("Toggle") } ETag { hit: true color: "#FFF0DE" styleType: EStyle.Warning text: qsTr("Important") } ETag { closable: true text: qsTr("Closable") onClosed: visible = false } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Tag

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETag { closable: true text: qsTr("Success") styleType: EStyle.Success onClosed: visible = false }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

checkablebool

Allow clicks to toggle the checked state.

Defaultfalse

checkedbool

Whether the control is checked or active.

Defaultfalse

closablebool

Show a close or remove button.

Defaultfalse

colorcolor

Custom color; a transparent value usually selects theme or semantic colors.

DefaultDynamic binding

effectstring

Visual theme of the component.

light
dark
plain

Default"light"

enabledbool

Allow interaction; false disables the control.

Defaulttrue

heightreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitHeight

hitbool

Show tag outline emphasis.

Defaultfalse

roundbool

Use rounded pill button styling.

Defaultfalse

sizeint

Control size; inherits the nearest EConfigProvider by default.

EStyle.Small
EStyle.Medium
EStyle.Large

DefaultInherited; EStyle.Medium by default

styleTypeint

Semantic color style.

EStyle.Default
EStyle.Primary
EStyle.Success
EStyle.Info
EStyle.Warning
EStyle.Danger

DefaultEStyle.Primary

textstring

Displayed text.

Default""

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitWidth

darkEffectboolRead only

Whether the visual effect is dark.

DefaultComputed at runtime

iconSourceint

Icon used by the component.

EIcons.*
0 (no icon)

Default0

avatarSourceurl

Avatar image URL displayed inside a tag.

Default""

Signals

SignaturePurpose

closed()

Emitted after the component closes.

clicked()

Emitted when the content is clicked.

changed(bool checked)

Emitted when tag selection changes; checked is its selected state.