ComponentsData display
Badge
MudBadge pins a count, a short label, a dot or an icon to the corner of another element. Use it for unread counts and small status markers, and give it an accessible label.
Counts, labels, dots and icons
Content takes a number or a short string. Numbers above Max show as Max+. Dot and Icon replace the content. BadgeAriaLabel says what the badge means.
Origins
Origin places the badge on any of nine anchor points. Overlap pulls it inward for round children; Bordered separates it from the element below.
Every color and kind
Color × kind of badge. Default and Dark suit neutral counts; reserve Error for things that need attention.
| Color ↓ · Kind → | Number | Overflow | Text | Dot | Icon |
|---|---|---|---|---|---|
| Default | 7 | 99+ | Beta | ||
| Primary | 7 | 99+ | Beta | ||
| Secondary | 7 | 99+ | Beta | ||
| Tertiary | 7 | 99+ | Beta | ||
| Info | 7 | 99+ | Beta | ||
| Success | 7 | 99+ | Beta | ||
| Warning | 7 | 99+ | Beta | ||
| Error | 7 | 99+ | Beta | ||
| Dark | 7 | 99+ | Beta | ||
| Transparent | 7 | 99+ | Beta | ||
| Inherit | 7 | 99+ | Beta | ||
| Surface | 7 | 99+ | Beta |
On icons, avatars and buttons
Overlap suits circular children such as icon buttons and avatars; rectangular buttons look better without it.
Rye sourdough
€ 3.80 · was € 4.60A live unread count
Visible hides the badge when there is nothing to report, and a status line announces the count without moving focus.
3 unread notices.
Playground
Change any parameter; the markup below updates with only the values that differ from the defaults.
<MudBadge Content="42" Color="Color.Primary" Overlap="true">
<MudIconButton Icon="@Icons.Material.Outlined.Forum" aria-label="Discussions" />
</MudBadge>