Skip to main content

Tag

<ui5-tag> | Since 2.0.0

The ui5-tag is a component which serves the purpose to attract the user attention to some piece of information (state, quantity, condition, etc.). It can contain icon and text information, and its design can be chosen from specific design types.

Usage Guidelines​

  • If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the wrappingType property.
  • Colors can be semantic or not semantic.

ES6 Module Import​

import "@ui5/webcomponents/dist/Tag.js";

Basic Sample​

Properties​

design​

DescriptionDefines the design type of the component.
Type"Set1" | "Set2" | "Neutral" | "Information" | "Positive" | "Negative" | "Critical"
Default"Neutral"
Since1.22.0

colorScheme​

DescriptionDefines the color scheme of the component. There are 10 predefined schemes. To use one you can set a number from "1" to "10". The colorScheme "1" will be set by default.
Typestring
Default"1"

hideStateIcon​

DescriptionDefines if the default state icon is shown.
Typeboolean
Defaultfalse
Since1.22.0

interactive​

DescriptionDefines if the component is interactive (focusable and pressable).
Typeboolean
Defaultfalse
Since1.22.0

wrappingType​

DescriptionDefines how the text of a component will be displayed when there is not enough space.
Note: For option "Normal" the text will wrap and the words will not be broken based on hyphenation.
Type"None" | "Normal"
Default"Normal"
Since1.22.0

size​

DescriptionDefines predefined size of the component.
Type"S" | "L"
Default"S"
Since2.0.0

Slots​

default​

DescriptionDefines the text of the component.
Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
TypeArray<Node>

icon​

DescriptionDefines the icon to be displayed in the component.
TypeArray<IIcon>

Events​

click​

DescriptionFired when the user clicks on an interactive tag.
Note: The event will be fired if the interactive property is true
TypeCustomEvent
Since1.22.0
BubblesYes
CancelableNo

Methods​

No methods available for this component.

CSS Parts​

NameDescription
rootUsed to style the root element.

More Samples​

Designs​

Interactive Tag​

An Interactive tag responds to focus, hover and press.

Text Wrapping​

Color Scheme Set 1​

You can use color schemes from different sets, here is the set "1".

Color Scheme Set 2​

You can use color schemes from different sets, here is the set "2".

Size​