1. Demo AstrolBadge

The color comes from Status (the same AstrolStatus as AstrolAlert); Brand uses the theme color. Use them in tables, cards or next to a title.

NeutralBrandInfoSuccessWarningDanger

Active Pending Blocked Pro 12

@using Astrol.Component.Basic.Badge

@foreach (var status in Enum.GetValues<AstrolStatus>())

 <AstrolBadge Status="status" Text="@status.ToString()" />

<AstrolBadge Status="AstrolStatus.Success" Dot="true" Text="Active" />

<AstrolBadge Status="AstrolStatus.Warning" Dot="true" Text="Pending" />

<AstrolBadge Status="AstrolStatus.Danger" Icon="astrol-cancel" Text="Blocked" Outline="true" />

<AstrolBadge Status="AstrolStatus.Brand" Icon="astrol-star" Text="Pro" />

<AstrolBadge Text="12" Title="Unread messages" />

Supported parameters

Text (string) or ChildContent (RenderFragment), the text.
Status (AstrolStatus), Neutral (default), Brand, Info, Success, Warning or Danger.
Icon (string), icon before the text; Dot (bool), a colored dot instead.
Outline (bool), border only, no background (default false).
Title (string), text on hover; Class (string).