using Microsoft.AspNetCore.Components; using Radzen.Blazor.Rendering; namespace Radzen.Blazor { /// /// A small label component used to display counts, statuses, or short text labels with semantic color coding. /// RadzenBadge is a compact visual indicator commonly used for notification counts, status indicators, tags, or highlighting important information. /// Supports multiple styles (Primary, Secondary, Success, Info, Warning, Danger, Light, Dark) for semantic coloring, /// variants (Filled, Flat, Outlined, Text) for different appearances, and shapes (standard rectangular or pill-shaped via IsPill). /// Content can be simple text via Text property or custom content via ChildContent. /// Can be absolutely positioned to overlay other elements (e.g., notification icon with count). /// Often used inline with text, on buttons (to show counts), or overlaid on icons (notification badges). /// /// /// Basic badge with text: /// /// <RadzenBadge BadgeStyle="BadgeStyle.Primary" Text="New" /> /// /// Notification count badge: /// /// <div style="position: relative; display: inline-block;"> /// <RadzenIcon Icon="notifications" /> /// <RadzenBadge BadgeStyle="BadgeStyle.Danger" Text="3" IsPill="true" /// Style="position: absolute; top: -8px; right: -8px;" /> /// </div> /// /// Status badge with custom variant: /// /// <RadzenBadge BadgeStyle="BadgeStyle.Success" Variant="Variant.Flat" Text="Active" IsPill="true" /> /// /// public partial class RadzenBadge : RadzenComponent { /// protected override string GetComponentCssClass() => ClassList.Create("rz-badge") .Add($"rz-badge-{BadgeStyle.ToString().ToLowerInvariant()}") .AddVariant(Variant) .AddShade(Shade) .Add("rz-badge-pill", IsPill) .ToString(); /// /// Gets or sets the custom child content to render inside the badge. /// When set, overrides the property for displaying custom markup. /// /// The child content render fragment. [Parameter] public RenderFragment? ChildContent { get; set; } /// /// Gets or sets the text content displayed in the badge. /// Typically used for short text like numbers, single words, or abbreviations. /// /// The badge text. [Parameter] public string? Text { get; set; } /// /// Gets or sets the semantic color style of the badge. /// Determines the badge's color based on its purpose (Primary, Success, Danger, Warning, etc.). /// /// The badge style. Default is . [Parameter] public BadgeStyle BadgeStyle { get; set; } /// /// Gets or sets the design variant that controls the badge's visual appearance. /// Options include Filled (solid background), Flat (subtle background), Outlined (border only), and Text (minimal styling). /// /// The badge variant. Default is . [Parameter] public Variant Variant { get; set; } = Variant.Filled; /// /// Gets or sets the color intensity shade for the badge. /// Works in combination with to adjust the color darkness/lightness. /// /// The color shade. Default is . [Parameter] public Shade Shade { get; set; } = Shade.Default; /// /// Gets or sets whether the badge should have rounded pill-shaped ends instead of rectangular corners. /// Pill badges have a more modern, capsule-like appearance and are often used for tags or status indicators. /// /// true for pill shape; false for rectangular. Default is false. [Parameter] public bool IsPill { get; set; } } }