Class Badge
A small overlay element that displays numerical or status information.
Implements
Inherited Members
Namespace: Unity.AppUI.UI
Assembly: Unity.AppUI.dll
Syntax
[UxmlElement]
public class Badge : BaseVisualElement, IEventHandler, IResolvedStyle, ITransform, ITransitionAnimations, IExperimentalFeatures, IVisualElementScheduler, IContextOverrideElement, IAdditionalDataHolderRemarks
The Badge component generates a small badge element that can be used to display counts, notifications, or status information. It's commonly used to show unread messages, notifications, or task counts on top of icons or other UI elements.
Badges can be customized in various ways, including their position (using anchors), appearance (using variants), and overlap behavior. They can display numbers with an optional maximum value, or appear as simple dots for status indication.
When using badges, ensure they provide meaningful information and don't overwhelm the user interface. Consider using the dot variant for simple status indicators and the default variant for numerical information.
Examples
Basic Badge Usage — Simple numerical badge.
<Badge content="5" />Status Indicator — Using dot variant as a status indicator.
<Badge variant="Dot" background-color="#4CAF50" />Notification Badge — Badge overlapping an icon to show notifications.
<VisualElement>
<Icon name="notifications" />
<Badge content="3" overlap-type="Circular" horizontal-anchor="Right" vertical-anchor="Top" />
</VisualElement>Maximum Value Badge — Badge showing maximum value with overflow.
<Badge content="1000" max="999" background-color="#FF4081" />Constructors
Badge()
Default constructor.
Declaration
public Badge()Fields
badgeUssClassName
The Badge badge styling class.
Declaration
public const string badgeUssClassName = "appui-badge__badge"Field Value
| Type | Description |
|---|---|
| string |
horizontalAnchorUssClassName
The Badge horizontal anchor styling class prefix.
Declaration
public const string horizontalAnchorUssClassName = "appui-badge--anchor-horizontal-"Field Value
| Type | Description |
|---|---|
| string |
labelUssClassName
The Badge label styling class.
Declaration
public const string labelUssClassName = "appui-badge__label"Field Value
| Type | Description |
|---|---|
| string |
overlapUssClassName
The Badge overlap type styling class prefix.
Declaration
public const string overlapUssClassName = "appui-badge--overlap-"Field Value
| Type | Description |
|---|---|
| string |
ussClassName
The Badge main styling class.
Declaration
public const string ussClassName = "appui-badge"Field Value
| Type | Description |
|---|---|
| string |
variantClassName
The Badge variant styling class prefix.
Declaration
public const string variantClassName = "appui-badge--"Field Value
| Type | Description |
|---|---|
| string |
verticalAnchorUssClassName
The Badge vertical anchor styling class prefix.
Declaration
public const string verticalAnchorUssClassName = "appui-badge--anchor-vertical-"Field Value
| Type | Description |
|---|---|
| string |
zeroUssClassName
The Badge Zero content styling class.
Declaration
public const string zeroUssClassName = "appui-badge--zero"Field Value
| Type | Description |
|---|---|
| string |
Properties
backgroundColor
The background color of the Badge.
Declaration
[CreateProperty]
[UxmlAttribute]
[Header("Badge")]
public Optional<Color> backgroundColor { get; set; }Property Value
| Type | Description |
|---|---|
| Optional<Color> |
color
The content color of the Badge.
Declaration
[CreateProperty]
[UxmlAttribute]
public Optional<Color> color { get; set; }Property Value
| Type | Description |
|---|---|
| Optional<Color> |
contentContainer
The content container of the Badge.
Declaration
public override VisualElement contentContainer { get; }Property Value
| Type | Description |
|---|---|
| VisualElement |
Overrides
horizontalAnchor
The horizontal anchor of the Badge.
Declaration
[CreateProperty]
[UxmlAttribute]
public HorizontalAnchor horizontalAnchor { get; set; }Property Value
| Type | Description |
|---|---|
| HorizontalAnchor |
label
The textual content of the Badge.
Declaration
[CreateProperty]
[UxmlAttribute]
public string label { get; set; }Property Value
| Type | Description |
|---|---|
| string |
overlapType
The overlap type of the Badge.
Declaration
[CreateProperty]
[UxmlAttribute]
public BadgeOverlapType overlapType { get; set; }Property Value
| Type | Description |
|---|---|
| BadgeOverlapType |
variant
The variant of the Badge.
Declaration
[CreateProperty]
[UxmlAttribute]
public BadgeVariant variant { get; set; }Property Value
| Type | Description |
|---|---|
| BadgeVariant |
verticalAnchor
The vertical anchor of the Badge.
Declaration
[CreateProperty]
[UxmlAttribute]
public VerticalAnchor verticalAnchor { get; set; }Property Value
| Type | Description |
|---|---|
| VerticalAnchor |
Methods
GetHorizontalAnchorUssClassName(HorizontalAnchor)
Declaration
public static string GetHorizontalAnchorUssClassName(HorizontalAnchor enumValue)Parameters
| Type | Name | Description |
|---|---|---|
| HorizontalAnchor | enumValue |
Returns
| Type | Description |
|---|---|
| string |
GetOverlapUssClassName(BadgeOverlapType)
Declaration
public static string GetOverlapUssClassName(BadgeOverlapType enumValue)Parameters
| Type | Name | Description |
|---|---|---|
| BadgeOverlapType | enumValue |
Returns
| Type | Description |
|---|---|
| string |
GetVariantUssClassName(BadgeVariant)
Declaration
public static string GetVariantUssClassName(BadgeVariant enumValue)Parameters
| Type | Name | Description |
|---|---|---|
| BadgeVariant | enumValue |
Returns
| Type | Description |
|---|---|
| string |
GetVerticalAnchorUssClassName(VerticalAnchor)
Declaration
public static string GetVerticalAnchorUssClassName(VerticalAnchor enumValue)Parameters
| Type | Name | Description |
|---|---|---|
| VerticalAnchor | enumValue |
Returns
| Type | Description |
|---|---|
| string |