microsoft · vnbaaij · Feb 18, 2025 · Dec 22, 2025 · Dec 22, 2025 · Dec 24, 2025
@@ -11,9 +11,9 @@ The `FluentAppBar` component is an implementation of the AppBar as you know from
 ## Change strings used in the UI
 
 The AppBar uses a string in the UI. It's value can be changed by leveraging the built-in [localization](/localization) functionality.
-The following values can be localized:
+The following values can be localized (the default value is shown between brackets) :
 
-- AppBar_MoreItems
+- AppBar_MoreItems ("View more apps")
 
 ## Simple AppBar
 

@@ -12,7 +12,7 @@ Different badges can display different content.
 
 - `Badge` displays text and/or an icon
 - `CounterBadge` displays numerical values
-- `PresenceBadge` displays status (not yet implemented)
+- `PresenceBadge` displays status 
 
 Typically a badge 'wraps' a component, such as a `FluentButton`, to indicate a status.
 
@@ -45,7 +45,7 @@ There are two actions authors should consider taking when using Badge to improve
    </FluentBadge>
    ```
 
-### Badge shouldn't rely only on color information
+### Badges shouldn't rely only on color information
 Include meaningful descriptions when using color to represent meaning in a badge. If relying on color only, ensure that non-visual information is included in the parent's label or description.
 
 ### Text on Badge
@@ -54,3 +54,4 @@ Badges are intended to have short text, small numerical values or status informa
 See the following pages for more information on the different badge components:
 - [Badge](/Badges/Badge)
 - [CounterBadge](/Badges/CounterBadge)
+- [PresenceBadge](/Badges/PresenceBadge)
@@ -0,0 +1 @@
+<FluentPresenceBadge />
@@ -0,0 +1,34 @@
+
+<FluentStack HorizontalGap="12px" Wrap="true">
+	<FluentAvatar Color="AvatarColor.Colorful" Name="Denis Voituron">
+		<FluentPresenceBadge Status="PresenceStatus.Available" slot="@FluentSlot.Badge" />
+	</FluentAvatar>
+
+	<FluentAvatar Color="AvatarColor.Colorful" Name="Vincent Baaij" Shape="AvatarShape.Square">
+		<FluentPresenceBadge Status="PresenceStatus.Away" slot="@FluentSlot.Badge" />
+	</FluentAvatar>
+
+	<FluentAvatar Color="AvatarColor.Colorful" Name="Tyme Bleyaert">
+		<FluentPresenceBadge Status="PresenceStatus.Busy" slot="@FluentSlot.Badge" />
+	</FluentAvatar>
+
+	<FluentAvatar Color="AvatarColor.Colorful" Name="Marvin Klein" Shape="AvatarShape.Square">
+		<FluentPresenceBadge Status="PresenceStatus.DoNotDisturb" slot="@FluentSlot.Badge" />
+	</FluentAvatar>
+
+	<FluentAvatar Color="AvatarColor.Colorful" Name="Adrien Clerbois">
+		<FluentPresenceBadge Status="PresenceStatus.Offline" slot="@FluentSlot.Badge" />
+	</FluentAvatar>
+
+	<FluentAvatar Color="AvatarColor.Colorful" Name="Tof Net" Shape="AvatarShape.Square">
+		<FluentPresenceBadge Status="PresenceStatus.OutOfOffice" slot="@FluentSlot.Badge" />
+	</FluentAvatar>
+
+	<FluentAvatar Color="AvatarColor.Colorful" Name="Scott McPhierson">
+		<FluentPresenceBadge Status="PresenceStatus.Blocked" slot="@FluentSlot.Badge" />
+	</FluentAvatar>
+
+	<FluentAvatar Color="AvatarColor.Colorful" Name="Idris Baker" Shape="AvatarShape.Square">
+		<FluentPresenceBadge Status="PresenceStatus.Unknown" slot="@FluentSlot.Badge" />
+	</FluentAvatar>
+</FluentStack>
@@ -0,0 +1,34 @@
+
+<FluentStack HorizontalGap="12px" Wrap="true">
+	<FluentAvatar Color="AvatarColor.Colorful" Name="Denis Voituron">
+		<FluentPresenceBadge Status="PresenceStatus.Available" OutOfOffice="true" slot="@FluentSlot.Badge" />
+	</FluentAvatar>
+
+	<FluentAvatar Color="AvatarColor.Colorful" Name="Vincent Baaij" Shape="AvatarShape.Square">
+		<FluentPresenceBadge Status="PresenceStatus.Away" OutOfOffice="true" slot="@FluentSlot.Badge" />
+	</FluentAvatar>
+
+	<FluentAvatar Color="AvatarColor.Colorful" Name="Tyme Bleyaert">
+		<FluentPresenceBadge Status="PresenceStatus.Busy" OutOfOffice="true" slot="@FluentSlot.Badge" />
+	</FluentAvatar>
+
+	<FluentAvatar Color="AvatarColor.Colorful" Name="Marvin Klein" Shape="AvatarShape.Square">
+		<FluentPresenceBadge Status="PresenceStatus.DoNotDisturb" OutOfOffice="true" slot="@FluentSlot.Badge" />
+	</FluentAvatar>
+
+	<FluentAvatar Color="AvatarColor.Colorful" Name="Adrien Clerbois">
+		<FluentPresenceBadge Status="PresenceStatus.Offline" OutOfOffice="true" slot="@FluentSlot.Badge" />
+	</FluentAvatar>
+
+	<FluentAvatar Color="AvatarColor.Colorful" Name="Tof Net" Shape="AvatarShape.Square">
+		<FluentPresenceBadge Status="PresenceStatus.OutOfOffice" OutOfOffice="true" slot="@FluentSlot.Badge" />
+	</FluentAvatar>
+
+	<FluentAvatar Color="AvatarColor.Colorful" Name="Scott McPhierson">
+		<FluentPresenceBadge Status="PresenceStatus.Blocked" OutOfOffice="true" slot="@FluentSlot.Badge" />
+	</FluentAvatar>
+
+	<FluentAvatar Color="AvatarColor.Colorful" Name="Idris Baker" Shape="AvatarShape.Square">
+		<FluentPresenceBadge Status="PresenceStatus.Unknown" OutOfOffice="true" slot="@FluentSlot.Badge" />
+	</FluentAvatar>
+</FluentStack>
@@ -0,0 +1,8 @@
+<FluentStack HorizontalGap="5" Wrap="true" VerticalAlignment="VerticalAlignment.Center">
+	<FluentPresenceBadge Status="PresenceStatus.Available" Size="BadgeSize.Tiny" />
+	<FluentPresenceBadge Status="PresenceStatus.Available" Size="BadgeSize.ExtraSmall" />
+	<FluentPresenceBadge Status="PresenceStatus.Available" Size="BadgeSize.Small" />
+	<FluentPresenceBadge Status="PresenceStatus.Available" Size="BadgeSize.Medium" />
+	<FluentPresenceBadge Status="PresenceStatus.Available" Size="BadgeSize.Large" />
+	<FluentPresenceBadge Status="PresenceStatus.Available" Size="BadgeSize.ExtraLarge" />
+</FluentStack>
@@ -0,0 +1,11 @@
+
+<FluentStack HorizontalGap="5" Wrap="true">
+	<FluentPresenceBadge Status="PresenceStatus.Available" />
+	<FluentPresenceBadge Status="PresenceStatus.Away" />
+	<FluentPresenceBadge Status="PresenceStatus.Busy" />
+	<FluentPresenceBadge Status="PresenceStatus.DoNotDisturb" />
+	<FluentPresenceBadge Status="PresenceStatus.Offline" />
+	<FluentPresenceBadge Status="PresenceStatus.OutOfOffice" />
+	<FluentPresenceBadge Status="PresenceStatus.Blocked" />
+	<FluentPresenceBadge Status="PresenceStatus.Unknown" />
+</FluentStack>
@@ -0,0 +1,11 @@
+
+<FluentStack HorizontalGap="5" Wrap="true">
+	<FluentPresenceBadge Status="PresenceStatus.Available" OutOfOffice="true" />
+	<FluentPresenceBadge Status="PresenceStatus.Away" OutOfOffice="true" />
+	<FluentPresenceBadge Status="PresenceStatus.Busy" OutOfOffice="true" />
+	<FluentPresenceBadge Status="PresenceStatus.DoNotDisturb" OutOfOffice="true" />
+	<FluentPresenceBadge Status="PresenceStatus.Offline" OutOfOffice="true" />
+	<FluentPresenceBadge Status="PresenceStatus.OutOfOffice" OutOfOffice="true" />
+	<FluentPresenceBadge Status="PresenceStatus.Blocked" OutOfOffice="true" />
+	<FluentPresenceBadge Status="PresenceStatus.Unknown" OutOfOffice="true" />
+</FluentStack>
@@ -0,0 +1,73 @@
+---
+title: Presence Badge
+route: /Badges/PresenceBadge
+icon: PresenceAvailable
+---
+
+
+A presence badge is a badge that displays a status indicator such as available, away, or busy.
+
+## Change strings used in the UI
+
+The AppBar uses a string in the UI. It's value can be changed by leveraging the built-in [localization](/localization) functionality.
-The AppBar uses a string in the UI. It's value can be changed by leveraging the built-in [localization](/localization) functionality.
+The PresenceBadge uses a string in the UI. Its value can be changed by leveraging the built-in [localization](/localization) functionality.
-The AppBar uses a string in the UI. It's value can be changed by leveraging the built-in [localization](/localization) functionality.
+The PresenceBadge uses a string in the UI. Its value can be changed by leveraging the built-in [localization](/localization) functionality.
+The following values can be localized (default value in brackets) :
+
+- PresenceStatus_Available ("available")
+- PresenceStatus_Away ("away")
+- PresenceStatus_Blocked ("blocked")
+- PresenceStatus_Busy ("busy")
+- PresenceStatus_DoNotDisturb ("do not disturb")
+- PresenceStatus_Offline ("offline")
+- PresenceStatus_OutOfOffice ("out of office")
+- PresenceStatus_Unknown ("unknown")
+
+## Examples
+
+### Default
+
+{{ PresenceBadgeDefault }}
+
+### Sizes
+
+A presence badge supports all `BadgeSize` values. The default value is `BadgeSize.Medium`.
+
+{{ PresenceBadgeSize }}
+
+### Status
+
+A presence badge status is set by mean of the `PresenceStatus` enumeration. See the documentation below for the possible values. The default is `PresenceStatus.Available`.
+
+{{ PresenceBadgeStatus }}
+
+### Out Of Office
+
+A presence badge can indicate if a user is out of office by setting the `OutOfOffice` parameter to `true`. This will change the appearance of the badge to indicate the out of office status.
+
+{{ PresenceBadgeStatusOOO }}
+
+### On Avatar
+
+The Avatar component is tailored to work with the PresenceBadge component. The PresenceBadge needs to be supplied as the `ChildContent` of the Avatar component.
+
+{{ PresenceBadgeOnAvatar }}
+
+### On Avatar with OutOfOffice
+
+The Avatar component is tailored to work with the PresenceBadge component. The PresenceBadge needs to be supplied as the `ChildContent` of the Avatar component.
+
+{{ PresenceBadgeOnAvatarOOO }}
+
+## API FluentPresenceBadge
+
+The PresenceBadge is a specialized Badge component and does **not** support the following parameters:
+
+-  Appearance
+-  BackgroundColor
+-  Color
+-  Content
+-  IconEnd
+-  IconLabel
+-  IconStart
+-  Shape
+
+{{ API Type=FluentPresenceBadge }}
@@ -15,22 +15,21 @@
                name="@GetNameValue"
                shape="@Shape.ToAttributeValue()"
                size="@Size.ToAttributeValue()"
-               slot="@Slot"
                @onclick="@OnClickHandlerAsync"
                @onkeydown="@OnKeyDownHandlerAsync"
                @attributes="@AdditionalAttributes">
-
     @if (DisplayImage)
     {
         <img alt="@Name"
              role="presentation"
              aria-hidden="true"
              src="@Image" />
     }
-
     @if (DisplayIcon && Icon is not null)
     {
         @Icon.ToMarkup(size: GetAvatarSize, color: "currentcolor", backgroundColor: "unset")
     }
 
+	@ChildContent
+
 </fluent-avatar>
@@ -43,7 +43,7 @@ public FluentAvatar(LibraryConfiguration configuration) : base(configuration) {
 
     /// <summary>
     /// Gets or sets the default icon. The icon will only be shown when there is no image or initials available.
-    /// </summary> 
+    /// </summary>
     [Parameter]
     public Icon? Icon { get; set; }
 
@@ -94,6 +94,12 @@ public FluentAvatar(LibraryConfiguration configuration) : base(configuration) {
     [Parameter]
     public string? Tooltip { get; set; }
 
+    /// <summary>
+    /// Gets or sets the content to be rendered inside the component.
+    /// </summary>
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
     /// <summary />
     protected override async Task OnInitializedAsync()
     {
@@ -138,7 +144,7 @@ Icon is not null
 
     private string GetAvatarSize =>
         Size is not null
-        ? $"{(int)Size}px"
+        ? $"{Size}px"
         : "32px"; // Default component size
 
     private string? GetActiveValue =>

@@ -134,7 +134,7 @@ protected override void OnParametersSet()
     }
 
     /// <summary />
-    protected string GetIconColor()
+    protected virtual string GetIconColor()
     {
         return Color switch
         {

@@ -0,0 +1,24 @@
+@namespace Microsoft.FluentUI.AspNetCore.Components
+@using Microsoft.FluentUI.AspNetCore.Components.Extensions
+@inherits FluentComponentBase
+
+<AddTag Name="fluent-badge-container" TagWhen="@(() => _isAttached)">
+	@if (ChildContent is not null)
+	{
+		@*This is needed to make sure the Avatar renders the initials. It is doing something weird when we just render ChildContent unconditionally *@
+		@ChildContent
+	}
+	<fluent-badge id="@Id"
+				  class="@ClassValue"
+				  style="@StyleValue"
+				  size="@Size.ToAttributeValue()"
+				  positioning="@Positioning.ToAttributeValue()"
+				  aria-label="@_ariaLabel"
+				  @attributes="@AdditionalAttributes">
+		@if (Icon != null)
+		{
+			<FluentIcon Width="@($"{_iconWidth}px")" Value="@Icon" Slot="@FluentSlot.Start" Color="Components.Color.Custom" CustomColor="@GetIconColor()" Style="margin: -1px;" />
+		}
+	</fluent-badge>
+</AddTag>
+