Feedback
TwBadge
TwBadge overlays a count, text label or dot on a corner of any content - an icon, avatar or button.
Last updated
Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at
https://github.com/twblazor/twblazor/issues.
Basic usage
Wrap any content and set
Count, Content or Dot to overlay a badge. On a primary/purple button, use Color="Color.Accent" so the badge doesn't blend in.5
New
JD
RAZOR
<div class="flex items-center gap-8">
<TwBadge Count="5"><TwIcon Icon="Icon.Bell" Class="text-2xl" /></TwBadge>
<TwBadge Content="New" Color="Color.Accent"><TwButton Label="Inbox" Color="Color.Primary" /></TwBadge>
<TwBadge Dot><TwAvatar Name="Jane Doe" /></TwBadge>
</div>Count with cap
Use
Max to cap a large count, e.g. 99+.3
99+
10+
RAZOR
<div class="flex items-center gap-8">
<TwBadge Count="3"><TwIcon Icon="Icon.Envelope" Class="text-2xl" /></TwBadge>
<TwBadge Count="150"><TwIcon Icon="Icon.Envelope" Class="text-2xl" /></TwBadge>
<TwBadge Count="120" Max="10"><TwIcon Icon="Icon.Envelope" Class="text-2xl" /></TwBadge>
</div>Placement
Set
Placement to choose the corner. Defaults to BadgePlacement.TopEnd.A1
A1
A1
A1
RAZOR
<div class="flex items-center gap-8">
<TwBadge Count="1" Placement="BadgePlacement.TopStart"><TwAvatar Name="A" /></TwBadge>
<TwBadge Count="1" Placement="BadgePlacement.TopEnd"><TwAvatar Name="A" /></TwBadge>
<TwBadge Count="1" Placement="BadgePlacement.BottomStart"><TwAvatar Name="A" /></TwBadge>
<TwBadge Count="1" Placement="BadgePlacement.BottomEnd"><TwAvatar Name="A" /></TwBadge>
</div>Colors
Badges default to
Color.Primary. Choose any of the theme colors.1
1
1
1
RAZOR
<div class="flex items-center gap-8">
<TwBadge Count="1"><TwIcon Icon="Icon.Bell" Class="text-2xl" /></TwBadge>
<TwBadge Count="1" Color="Color.Success"><TwIcon Icon="Icon.Bell" Class="text-2xl" /></TwBadge>
<TwBadge Count="1" Color="Color.Warning"><TwIcon Icon="Icon.Bell" Class="text-2xl" /></TwBadge>
<TwBadge Count="1" Color="Color.Info"><TwIcon Icon="Icon.Bell" Class="text-2xl" /></TwBadge>
</div>On a purple/primary surface use
Accent, Light or Dark so the badge doesn't blend in.3
3
3
RAZOR
<div class="flex items-center gap-8">
<TwBadge Count="3" Color="Color.Accent"><TwButton Label="Inbox" Color="Color.Primary" /></TwBadge>
<TwBadge Count="3" Color="Color.Light"><TwButton Label="Inbox" Color="Color.Primary" /></TwBadge>
<TwBadge Count="3" Color="Color.Dark"><TwButton Label="Inbox" Color="Color.Primary" /></TwBadge>
</div>Accessibility
The count or label pill is exposed with
role="status". Pass AriaLabel (e.g. <TwBadge Count="3" AriaLabel="3 unread messages" />) so a screen reader announces the count with context rather than a bare number. A Dot badge is decorative and is hidden with aria-hidden.
Theme configuration
Styling is controlled by
TwBlazorTheme.Components (a TwBadgeTheme), configured via the
AddTwBlazor() options callback described on the Get Started page.
Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.
Global Theme Configuration
These reuse shared design tokens configured once on
TwBlazorTheme, rather than being unique to this component.
| Property | Type | Controls |
|---|---|---|
Colors |
TwBlazorPalette |
Full reference: TwBadgeTheme on the API docs.