Badge Examples
Default badges #
Here's a list of Badge component examples where you can use the Color property to change the color of the badge. Primary is the default color.
Primary
Info
Gray
Failure
Success
Warning
Indigo
Purple
Pink
<div class="flex flex-wrap gap-2">
<Badge>Primary</Badge>
<Badge Color="@BadgeColor.Info">Info</Badge>
<Badge Color="@BadgeColor.Gray">Gray</Badge>
<Badge Color="@BadgeColor.Failure">Failure</Badge>
<Badge Color="@BadgeColor.Success">Success</Badge>
<Badge Color="@BadgeColor.Warning">Warning</Badge>
<Badge Color="@BadgeColor.Indigo">Indigo</Badge>
<Badge Color="@BadgeColor.Purple">Purple</Badge>
<Badge Color="@BadgeColor.Pink">Pink</Badge>
</div>Badge as link #
Use the badge as a link component by adding the Href property.
Badge with icon #
Add an icon to the badge by using the Icon property. This can be used to show status or notifications.
Primary
Gray
Success
<div class="flex flex-wrap gap-2">
<Badge Icon="@_checkIcon">Primary</Badge>
<Badge Color="@BadgeColor.Gray" Icon="@_clockIcon">Gray</Badge>
<Badge Color="@BadgeColor.Success" Icon="@_checkCircleIcon">Success</Badge>
</div>Badge with icon only #
Show only an icon without any text by using just the Icon property.
<div class="flex flex-wrap gap-2">
<Badge Icon="@_checkIcon" />
<Badge Icon="@_checkIcon" Color="@BadgeColor.Gray" />
<Badge Icon="@_checkIcon" Size="@BadgeSize.Small" />
<Badge Color="@BadgeColor.Gray" Icon="@_checkIcon" Size="@BadgeSize.Small" />
</div>Sizes #
Update the size of the badge component by using the Size property. Choose from ExtraSmall and Small sizes.
Primary
Primary
Icon
Icon
<div class="flex flex-wrap items-center gap-2">
<Badge Size="@BadgeSize.ExtraSmall">Primary</Badge>
<Badge Size="@BadgeSize.Small">Primary</Badge>
<Badge Size="@BadgeSize.ExtraSmall" Icon="@_checkIcon">Icon</Badge>
<Badge Size="@BadgeSize.Small" Icon="@_checkIcon">Icon</Badge>
</div>