The badge component is used to display small indicators like status,
counts, or notifications, typically attached to another element.
<LumexBadge Text="5" Color="@ThemeColor.Primary">
<LumexAvatar Radius="@Radius.Medium"
Size="@Size.Large"
Src="https://i.pravatar.cc/150?img=2" />
</LumexBadge>
Use Size parameter to adjust the badge size.
<div class="flex gap-3 items-center">
<LumexBadge Text="5" Color="@ThemeColor.Primary" Size="@Size.Small">
<LumexAvatar Radius="@Radius.Medium" Src="https://i.pravatar.cc/150?img=2" />
</LumexBadge>
<LumexBadge Text="5" Color="@ThemeColor.Primary" Size="@Size.Medium">
<LumexAvatar Radius="@Radius.Medium" Src="https://i.pravatar.cc/150?img=6" />
</LumexBadge>
<LumexBadge Text="5" Color="@ThemeColor.Primary" Size="@Size.Large">
<LumexAvatar Radius="@Radius.Medium" Src="https://i.pravatar.cc/150?img=9" />
</LumexBadge>
</div>
Use Color parameter to set the badge color.
<div class="flex gap-3 items-center">
<LumexBadge Text="5" Color="@ThemeColor.Default">
<LumexAvatar Radius="@Radius.Medium" Src="https://i.pravatar.cc/150?img=2" />
</LumexBadge>
<LumexBadge Text="5" Color="@ThemeColor.Primary">
<LumexAvatar Radius="@Radius.Medium" Src="https://i.pravatar.cc/150?img=6" />
</LumexBadge>
<LumexBadge Text="5" Color="@ThemeColor.Secondary">
<LumexAvatar Radius="@Radius.Medium" Src="https://i.pravatar.cc/150?img=9" />
</LumexBadge>
<LumexBadge Text="5" Color="@ThemeColor.Warning">
<LumexAvatar Radius="@Radius.Medium" Src="https://i.pravatar.cc/150?img=11" />
</LumexBadge>
<LumexBadge Text="5" Color="@ThemeColor.Success">
<LumexAvatar Radius="@Radius.Medium" Src="https://i.pravatar.cc/150?img=12" />
</LumexBadge>
<LumexBadge Text="5" Color="@ThemeColor.Danger">
<LumexAvatar Radius="@Radius.Medium" Src="https://i.pravatar.cc/150?img=24" />
</LumexBadge>
<LumexBadge Text="5" Color="@ThemeColor.Info">
<LumexAvatar Radius="@Radius.Medium" Src="https://i.pravatar.cc/150?img=43" />
</LumexBadge>
</div>
Use Variant parameter to change the badge variant.
<div class="flex gap-3 items-center">
<LumexBadge Text="5" Color="@ThemeColor.Warning" Variant="@BadgeVariant.Solid">
<LumexAvatar Radius="@Radius.Medium" Src="https://i.pravatar.cc/150?img=6" />
</LumexBadge>
<LumexBadge Text="5" Color="@ThemeColor.Warning" Variant="@BadgeVariant.Flat">
<LumexAvatar Radius="@Radius.Medium" Src="https://i.pravatar.cc/150?img=2" />
</LumexBadge>
<LumexBadge Text="5" Color="@ThemeColor.Warning" Variant="@BadgeVariant.Shadow">
<LumexAvatar Radius="@Radius.Medium" Src="https://i.pravatar.cc/150?img=9" />
</LumexBadge>
</div>
Use Placement parameter to control the badge position.
<div class="flex gap-3 items-center">
<LumexBadge Text="5" Color="@ThemeColor.Danger" Placement="@BadgePlacement.TopStart">
<LumexAvatar Radius="@Radius.Medium" Src="https://i.pravatar.cc/150?img=2" />
</LumexBadge>
<LumexBadge Text="5" Color="@ThemeColor.Danger" Placement="@BadgePlacement.TopEnd">
<LumexAvatar Radius="@Radius.Medium" Src="https://i.pravatar.cc/150?img=6" />
</LumexBadge>
<LumexBadge Text="5" Color="@ThemeColor.Danger" Placement="@BadgePlacement.BottomStart">
<LumexAvatar Radius="@Radius.Medium" Src="https://i.pravatar.cc/150?img=9" />
</LumexBadge>
<LumexBadge Text="5" Color="@ThemeColor.Danger" Placement="@BadgePlacement.BottomEnd">
<LumexAvatar Radius="@Radius.Medium" Src="https://i.pravatar.cc/150?img=11" />
</LumexBadge>
</div>
Use Invisible parameter to show or hide the badge.
@using LumexUI.Shared.Icons
<div class="space-y-4">
<div class="flex items-center gap-4">
<LumexBadge Text="@("99+")"
Color="@ThemeColor.Danger"
Invisible="@(!_isVisible)">
<BellFilledIcon Size="32" />
</LumexBadge>
<LumexBadge Text="5"
Color="@ThemeColor.Danger"
Invisible="@(!_isVisible)">
<ShoppingCartIcon Size="32" />
</LumexBadge>
</div>
<LumexSwitch @bind-Value="@_isVisible">Show badge</LumexSwitch>
</div>
@code {
private bool _isVisible;
}
By default, the badge has an outline.
Use ShowOutline parameter to disable it.
<div class="flex items-center gap-3">
<LumexBadge Text="5" Color="@ThemeColor.Primary">
<LumexAvatar Radius="@Radius.Medium"
Size="@Size.Large"
Src="https://i.pravatar.cc/150?img=2" />
</LumexBadge>
<LumexBadge Text="5" ShowOutline="@false" Color="@ThemeColor.Primary">
<LumexAvatar Radius="@Radius.Medium"
Size="@Size.Large"
Src="https://i.pravatar.cc/150?img=6" />
</LumexBadge>
</div>
@using LumexUI.Shared.Icons
<div class="flex gap-6 items-center">
<LumexBadge Text="5" Color="@ThemeColor.Danger">
<LumexAvatar Radius="@Radius.Medium" Src="https://i.pravatar.cc/150?img=2" />
</LumexBadge>
<LumexBadge Color="@ThemeColor.Success" Placement="@BadgePlacement.BottomEnd">
<LumexAvatar Radius="@Radius.Full" Src="https://i.pravatar.cc/150?img=6" />
</LumexBadge>
<LumexBadge Text="@("new")" Color="@ThemeColor.Danger" Size="@Size.Small">
<LumexAvatar Bordered="@true"
Radius="@Radius.Medium"
Color="@ThemeColor.Danger"
Src="https://i.pravatar.cc/150?img=9" />
</LumexBadge>
<LumexBadge OneChar="@true"
Color="@ThemeColor.Success"
Placement="@BadgePlacement.BottomEnd">
<Content>
<CheckIcon />
</Content>
<ChildContent>
<LumexAvatar Bordered="@true"
Color="@ThemeColor.Success"
Radius="@Radius.Medium"
Src="https://i.pravatar.cc/150?img=11" />
</ChildContent>
</LumexBadge>
</div>
This component supports named slots, which allow custom
styles to be applied to specific parts of the component:
- Base: The main container that wraps the badge and its anchor element.
- Badge: The element representing the badge itself.
You can customize the component(s) by passing
any Tailwind CSS classes to the following component parameters:
Badge
Class: The CSS class names to style the badge.Classes: The CSS class names to style the slots.
See the API references below for a complete guide to all the
parameters available for the components mentioned here.