AvatarBadge

<ui5-avatar-badge> | Since 2.19.0

The ui5-avatar-badge component is used to display a badge on top of ui5-avatar component. The badge can display an icon and supports different states for visual affordance.

Usage

The badge should be used as a child element of ui5-avatar in the badge slot.

<ui5-avatar>
  <ui5-avatar-badge icon="edit" slot="badge"></ui5-avatar-badge>
</ui5-avatar>

Keyboard Handling

The badge does not receive keyboard focus.

ES6 Module Import

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

Basic Sample

Properties

colorScheme

Description	Defines the color scheme of the badge using the indication color palette. Available options are "1" through "10", matching the indication colors. Note: state takes precedence - when state is set to any value other than None, the semantic state styling applies and colorScheme is ignored.
Type	string | undefined
Default	undefined
Since	2.27.0

icon

Description	Defines the icon name to be displayed inside the badge. Note: You should import the desired icon first, then use its name as "icon". import "@ui5/webcomponents-icons/dist/{icon_name}.js"
Type	string | undefined
Default	undefined

state

Description	Defines the state of the badge, which determines its styling. Available options: - None (default) - Standard appearance - Positive - Green, used for success/approved states - Critical - Orange, used for warning states - Negative - Red, used for error/rejected states - Information - Blue, used for informational states Note: state takes precedence over colorScheme. When state is set to any value other than None, the semantic styling applies and colorScheme is ignored.
Type	"Critical" | "Information" | "Negative" | "None" | "Positive"
Default	"None"

tooltip

Description	Defines the tooltip text of the badge icon. Note: If not provided, the badge uses the icon accessible name. If no icon accessible name is available, a generic fallback text is used.
Type	string | undefined
Default	undefined
Since	2.22.0

Slots

No slots available for this component.

Events

No events available for this component.

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

CSS Custom States

No CSS custom states available for this component.

More Samples

States

The AvatarBadge supports different states to indicate status or notifications.

Extended Color Palette

The AvatarBadge supports an extended color palette via the colorScheme property. Use values "1" through "10" to apply indication colors — vivid background, border, and text tones drawn from the SAP indication color tokens, with a subtle box shadow to enhance visibility.