Badge

A count, a dot or an icon over the top right corner of its content.

ExampleInteractive

Badge — Avalonia UIKit

<StackPanel Orientation="Horizontal" Spacing="24" Margin="0,8,12,0" HorizontalAlignment="Left">
  <uikit:Badge Count="3">
    <Border Width="32" Height="32" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
  <uikit:Badge IsDot="True">
    <PathIcon Classes="large" Data="{StaticResource UIKit.Icon.Bell}" />
  </uikit:Badge>
  <uikit:Badge Icon="{StaticResource UIKit.Icon.Check}">
    <uikit:Avatar UserName="Jason Lee" />
  </uikit:Badge>
</StackPanel>

Usage

uikit:Badge wraps its content and draws over its top right corner, taking no room of its own: the Count on a pill at least 14px wide, a 6px dot with IsDot="True", or an Icon in a ringed circle at the bottom right. A count of 0 shows nothing; past Maximum (99 by default) it reads "99+". An icon takes precedence over the dot, which takes precedence over the count. The color is BadgeBackground, the theme's red by default (not Background, which belongs to the content). The sizes small, the default medium and large move the count and resize the icon's circle.

Property	Effect
`Count`	The number shown; 0 hides the badge.
`Maximum`	The largest number shown as is; beyond it, "Maximum+".
`IsDot`	A 6px dot instead of the count.
`Icon`	A geometry in a 10, 16 or 24px circle (by size) at the bottom right.
`BadgeBackground`	The badge's brush.

Examples

Counts of 3, 12 and 100 (shown as 99+), and 12 with Maximum="9".

CountInteractive

<StackPanel Orientation="Horizontal" Spacing="24" Margin="0,8,12,0" HorizontalAlignment="Left">
  <uikit:Badge Count="3">
    <Border Width="32" Height="32" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
  <uikit:Badge Count="12">
    <Border Width="32" Height="32" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
  <uikit:Badge Count="100">
    <Border Width="32" Height="32" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
  <uikit:Badge Count="12" Maximum="9">
    <Border Width="32" Height="32" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
</StackPanel>

small and large on the badge, with a count and with a dot; the dot stays 6px.

SizesInteractive

<StackPanel Orientation="Horizontal" Spacing="24" Margin="0,8,12,0" HorizontalAlignment="Left">
  <uikit:Badge Classes="small" Count="3" VerticalAlignment="Bottom">
    <Border Width="24" Height="24" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
  <uikit:Badge Count="3" VerticalAlignment="Bottom">
    <Border Width="32" Height="32" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
  <uikit:Badge Classes="large" Count="3" VerticalAlignment="Bottom">
    <Border Width="48" Height="48" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
  <uikit:Badge Classes="small" IsDot="True" VerticalAlignment="Bottom">
    <Border Width="24" Height="24" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
  <uikit:Badge Classes="large" IsDot="True" VerticalAlignment="Bottom">
    <Border Width="48" Height="48" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
</StackPanel>

BadgeBackground takes any brush, such as the theme's palette colors.

ColorsInteractive

<StackPanel Orientation="Horizontal" Spacing="24" Margin="0,8,12,0" HorizontalAlignment="Left">
  <uikit:Badge Count="5" BadgeBackground="{DynamicResource UIKit.Blue}">
    <Border Width="32" Height="32" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
  <uikit:Badge Count="5" BadgeBackground="{DynamicResource UIKit.Green}">
    <Border Width="32" Height="32" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
  <uikit:Badge Count="5" BadgeBackground="{DynamicResource UIKit.Yellow}">
    <Border Width="32" Height="32" CornerRadius="6" Background="{DynamicResource UIKit.Secondary}" />
  </uikit:Badge>
  <uikit:Badge IsDot="True" BadgeBackground="{DynamicResource UIKit.Green}">
    <PathIcon Classes="large" Data="{StaticResource UIKit.Icon.Bell}" />
  </uikit:Badge>
</StackPanel>

Not covered

Nothing: the control covers the component.

Badge

#Usage

#Examples

#Not covered

Usage

Examples

Not covered