Blazorise Badge component
Badges are used to draw attention and display statuses or counts.
<Badge> component is used to convey small pieces of information. They are used for labeling content, displaying metadata and/or highlighting information. Using the
CloseClicked property, the badge becomes interactive, allowing user interaction.
BasicSimply set the
Colorattribute and you’re good to go.
ColorsAdd any of the following variants via the
Colorparameter to change the appearance of a
<Badge Color="Color.Primary">Primary</Badge> <Badge Color="Color.Secondary">Secondary</Badge> <Badge Color="Color.Success">Success</Badge> <Badge Color="Color.Danger">Danger</Badge> <Badge Color="Color.Warning">Warning</Badge> <Badge Color="Color.Info">Info</Badge> <Badge Color="Color.Light">Light</Badge> <Badge Color="Color.Dark">Dark</Badge>
Pillparameter produces a badge with rounded corners. It can aid in making badges and buttons more distinct from one another.
<Badge Color="Color.Primary" Pill>Pending</Badge> <Badge Color="Color.Success" Pill>Confirmed</Badge> <Badge Color="Color.Danger" Pill>Denied</Badge> <Badge Color="Color.Secondary" Pill>On hold</Badge>
Icon-onlyBadges can also be used with icons without a label. For accessibility, a Tooltip and
aria-labelattribute is recommended to ensure that all users can identify their meaning.
<Badge Color="Color.Success"> <Tooltip Text="Confirmed"> <Icon Name="IconName.Check" aria-label="Confirmed" /> </Tooltip> </Badge> <Badge Color="Color.Danger"> <Tooltip Text="Cancelled"> <Icon Name="IconName.Times" aria-label="Cancelled" /> </Tooltip> </Badge>
With close buttonTo enable close button you only need to define the
CloseClickedevent. Blazorise will automatically pickup and show close button.
<Badge Color="Color.Primary" CloseClicked="@(()=>Console.WriteLine("closed"))">Primary</Badge>
Badge vs Button
Badges and Buttons are similar in appearance. This might lead users to think that badges are interactive.
Placement, language, shape, and color can all help mitigate any confusion. First, badges should not be labeled with active verbs. This is because they are not actions but relatively static text/content. Second, avoid placing badges directly next to Buttons, in particular, if they are using similar themes. The pill theme variant may aid in making badges and Buttons more distinct from one another.
||Makes badges more rounded.||
||Create a badge link and provide actionable badges with hover and focus states.||
||Component visual or contextual style variants.||
||Occurs on close button click.||