Skip to main content

Badge

The ui5-badge 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/Badge.js";

Basic Sample​

Properties​

design​

DescriptionDefines the design type of the component.
Type"Set1" | "Set2" | "Set3" | "Neutral" | "Information" | "Positive" | "Negative" | "Critical"
Default"Set3"
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.
Note: Color schemes have no visual representation in High Contrast Black (sap_belize_hcb) theme.
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).
Note: The badge cannot be interactive when design property is BadgeDesign.Set3
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"None"
Since1.22.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 badge.
Note: The event will be fired if the interactive property is true
TypeCustomEvent
Since1.22.0

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

Designs​

Interactive Badge​

An Interactive badge 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".

Color Scheme Set 3​

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