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 value 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="sys-enter" 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

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

valueState

Description	Defines the value 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
Type	"None" | "Positive" | "Critical" | "Negative" | "Information"
Default	"None"

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.

More Samples

Value States

The AvatarBadge supports different value states to indicate status or notifications.