Badges

Badges are versatile components used to display labels, counts, or statuses. They can be styled with various colors, sizes, and icons to convey different meanings and actions within the user interface.

Default Badge

Default badges are simple labels that convey information without additional styling or icons. They are ideal for displaying static text or statuses.

Source

<RzBadge Color="SemanticColor.Surface">Badge</RzBadge>
<RzBadge Color="SemanticColor.SurfaceAlt">Badge</RzBadge>
<RzBadge Color="SemanticColor.Primary">Badge</RzBadge>
<RzBadge Color="SemanticColor.Secondary">Badge</RzBadge>
<RzBadge Color="SemanticColor.Info">Badge</RzBadge>
<RzBadge Color="SemanticColor.Danger">Badge</RzBadge>
<RzBadge Color="SemanticColor.Warning">Badge</RzBadge>
<RzBadge Color="SemanticColor.Success">Badge</RzBadge>

Soft Badge

Soft badges have a lighter appearance, utilizing semi-transparent backgrounds to subtly highlight information without overwhelming the interface. They are perfect for secondary actions or less critical statuses.

Source

<RzBadge Color="SemanticColor.Surface" Soft>Badge</RzBadge>
<RzBadge Color="SemanticColor.SurfaceAlt" Soft>Badge</RzBadge>
<RzBadge Color="SemanticColor.Primary" Soft>Badge</RzBadge>
<RzBadge Color="SemanticColor.Secondary" Soft>Badge</RzBadge>
<RzBadge Color="SemanticColor.Info" Soft>Badge</RzBadge>
<RzBadge Color="SemanticColor.Danger" Soft>Badge</RzBadge>
<RzBadge Color="SemanticColor.Warning" Soft>Badge</RzBadge>
<RzBadge Color="SemanticColor.Success" Soft>Badge</RzBadge>

Badge with Indicator

Badges with indicators include a small icon or dot to signify status changes, notifications, or alerts. This enhances the visual feedback and draws attention to important information.

Source

<RzBadge Color="SemanticColor.Surface" Soft>
    <Blazicon Svg="MdiIcon.CircleMedium" />
    Badge
</RzBadge>
<RzBadge Color="SemanticColor.SurfaceAlt" Soft>
    <Blazicon Svg="MdiIcon.CircleMedium" />
    Badge
</RzBadge>
<RzBadge Color="SemanticColor.Primary" Soft>
    <Blazicon Svg="MdiIcon.CircleMedium" />
    Badge
</RzBadge>
<RzBadge Color="SemanticColor.Secondary" Soft>
    <Blazicon Svg="MdiIcon.CircleMedium" />
    Badge
</RzBadge>
<RzBadge Color="SemanticColor.Info" Soft>
    <Blazicon Svg="MdiIcon.CircleMedium"/>
    Badge
</RzBadge>
<RzBadge Color="SemanticColor.Danger" Soft>
    <Blazicon Svg="MdiIcon.CircleMedium" />
    Badge
</RzBadge>
<RzBadge Color="SemanticColor.Warning" Soft>
    <Blazicon Svg="MdiIcon.CircleMedium" />
    Badge
</RzBadge>
<RzBadge Color="SemanticColor.Success" Soft>
    <Blazicon Svg="MdiIcon.CircleMedium" />
    Badge
</RzBadge>

Badge with Icon

Badges can include various icons to represent actions, statuses, or categories. Icons enhance the badge's meaning and provide visual cues for better user experience.

Source

<RzBadge Color="SemanticColor.Surface" Soft>
    <Blazicon Svg="MdiIcon.Tag" />
    Tag
</RzBadge>
<RzBadge Color="SemanticColor.SurfaceAlt" Soft Icon="MdiIcon.Tag" Text="Tag"/>
<RzBadge Color="SemanticColor.Primary" Soft Icon="MdiIcon.Check" Text="Approved"/>
<RzBadge Color="SemanticColor.Secondary" Soft Icon="MdiIcon.Close" Text="Rejected"/>
<RzBadge Color="SemanticColor.Info" Soft Icon="MdiIcon.Information" Text="Info"/>
<RzBadge Color="SemanticColor.Danger" Soft Icon="MdiIcon.RzAlert" Text="RzAlert"/>
<RzBadge Color="SemanticColor.Warning" Soft Icon="MdiIcon.RzAlertCircle" Text="Caution"/>
<RzBadge Color="SemanticColor.Success" Soft Icon="MdiIcon.CheckCircle" Text="Success"/>