UI5 Web Components
Search

Badge

v0.12.0
@ui5/webcomponents
<ui5-badge>

Basic Badge

available 1 required 2 3K bug 4 in process 5 in warehouse 6 7$ solution provided 8 pending release 9 customer action 10 This would truncate as it is too long 
<ui5-badge color-scheme="1">available 1</ui5-badge>
<ui5-badge color-scheme="2">required 2</ui5-badge>
<ui5-badge color-scheme="3">3</ui5-badge>
<ui5-badge color-scheme="4">bug 4</ui5-badge>
<ui5-badge color-scheme="5">in process 5</ui5-badge>
<ui5-badge color-scheme="6">in warehouse 6</ui5-badge>
<ui5-badge color-scheme="7">7</ui5-badge>
<ui5-badge color-scheme="8">solution provided 8</ui5-badge>
<ui5-badge color-scheme="9">pending release 9</ui5-badge>
<ui5-badge color-scheme="10">customer action 10</ui5-badge>
<ui5-badge style="width:200px;">This would truncate as it is too long</ui5-badge>

Badge with Icon

done in process pending 
<ui5-badge color-scheme="1">
	<ui5-icon name="accept" slot="icon"></ui5-icon>done
</ui5-badge>
<ui5-badge color-scheme="2">
	<ui5-icon name="sap-ui5" slot="icon"></ui5-icon>
</ui5-badge>
<ui5-badge color-scheme="3">
	<ui5-icon name="add-equipment" slot="icon"></ui5-icon>in process
</ui5-badge>
<ui5-badge color-scheme="4">
	<ui5-icon name="lab" slot="icon"></ui5-icon>
</ui5-badge>
<ui5-badge color-scheme="5">
	<ui5-icon name="email-read" slot="icon"></ui5-icon>
</ui5-badge>
<ui5-badge color-scheme="6">
	<ui5-icon name="pending" slot="icon"></ui5-icon>pending
</ui5-badge>
<ui5-badge color-scheme="7">
	<ui5-icon name="lightbulb" slot="icon"></ui5-icon>
</ui5-badge>
<ui5-badge color-scheme="8">
	<ui5-icon name="locked" slot="icon"></ui5-icon>
</ui5-badge>

Overview

The ui5-badge is a small non-interactive component which contains text information and color chosen from a list of predefined color schemes. It serves the purpose to attract the user attention to some piece of information (state, quantity, condition, etc.).

Usage Guidelines

  • If the text is longer than the width of the component, it doesn’t wrap, it shows ellipsis.
  • When truncated, the full text is not visible, therefore, it’s recommended to make more space for longer texts to be fully displayed.
  • Colors are not semantic and have no visual representation in High Contrast Black (sap_belize_hcb) theme.

ES6 Module Import

import "@ui5/webcomponents/dist/Badge";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
colorScheme
color-scheme
string
"1"
Defines the color scheme of the component. There are 10 predefined schemes. Each scheme applies different values for the background-color and border-color. 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.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
Node [0..n]
Defines 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.
icon
HTMLElement [0..n]
Defines the icon to be displayed in the component.
Theme: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel