Badges

Badges are versatile components used to display labels, counts, or statuses. They can be styled with various variants, 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 Variant="ThemeVariant.Default">Badge</RzBadge>
<RzBadge Variant="ThemeVariant.Secondary">Badge</RzBadge>
<RzBadge Variant="ThemeVariant.Primary">Badge</RzBadge>
<RzBadge Variant="ThemeVariant.Accent">Badge</RzBadge>
<RzBadge Variant="ThemeVariant.Information">Badge</RzBadge>
<RzBadge Variant="ThemeVariant.Destructive">Badge</RzBadge>
<RzBadge Variant="ThemeVariant.Warning">Badge</RzBadge>
<RzBadge Variant="ThemeVariant.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 Variant="ThemeVariant.Default" Soft>Badge</RzBadge>
<RzBadge Variant="ThemeVariant.Secondary" Soft>Badge</RzBadge>
<RzBadge Variant="ThemeVariant.Primary" Soft>Badge</RzBadge>
<RzBadge Variant="ThemeVariant.Accent" Soft>Badge</RzBadge>
<RzBadge Variant="ThemeVariant.Information" Soft>Badge</RzBadge>
<RzBadge Variant="ThemeVariant.Destructive" Soft>Badge</RzBadge>
<RzBadge Variant="ThemeVariant.Warning" Soft>Badge</RzBadge>
<RzBadge Variant="ThemeVariant.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 Variant="ThemeVariant.Default" Soft>
    <Blazicon Svg="MdiIcon.CircleMedium" />
    Badge
</RzBadge>
<RzBadge Variant="ThemeVariant.Secondary" Soft>
    <Blazicon Svg="MdiIcon.CircleMedium" />
    Badge
</RzBadge>
<RzBadge Variant="ThemeVariant.Primary" Soft>
    <Blazicon Svg="MdiIcon.CircleMedium" />
    Badge
</RzBadge>
<RzBadge Variant="ThemeVariant.Accent" Soft>
    <Blazicon Svg="MdiIcon.CircleMedium" />
    Badge
</RzBadge>
<RzBadge Variant="ThemeVariant.Information" Soft>
    <Blazicon Svg="MdiIcon.CircleMedium"/>
    Badge
</RzBadge>
<RzBadge Variant="ThemeVariant.Destructive" Soft>
    <Blazicon Svg="MdiIcon.CircleMedium" />
    Badge
</RzBadge>
<RzBadge Variant="ThemeVariant.Warning" Soft>
    <Blazicon Svg="MdiIcon.CircleMedium" />
    Badge
</RzBadge>
<RzBadge Variant="ThemeVariant.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 Variant="ThemeVariant.Default" Soft>
    <Blazicon Svg="MdiIcon.Tag" />
    Tag
</RzBadge>
<RzBadge Variant="ThemeVariant.Secondary" Soft Icon="MdiIcon.Tag" Label="Tag"/>
<RzBadge Variant="ThemeVariant.Primary" Soft Icon="MdiIcon.Check" Label="Approved"/>
<RzBadge Variant="ThemeVariant.Accent" Soft Icon="MdiIcon.Close" Label="Rejected"/>
<RzBadge Variant="ThemeVariant.Information" Soft Icon="MdiIcon.Information" Label="Info"/>
<RzBadge Variant="ThemeVariant.Destructive" Soft Icon="MdiIcon.RzAlert" Label="RzAlert"/>
<RzBadge Variant="ThemeVariant.Warning" Soft Icon="MdiIcon.RzAlertCircle" Label="Caution"/>
<RzBadge Variant="ThemeVariant.Success" Soft Icon="MdiIcon.CheckCircle" Label="Success"/>

Badge Component Parameters

Property	Description	Type	Default
`Variant`	`ThemeVariant` – The theme variant of the badge.	`ThemeVariant`	`ThemeVariant.Default`
`Soft`	`bool` – When set to true, applies a softer styling to the badge.	`bool`	`false`
`Icon`	`SvgIcon?` – Optional icon to display within the badge.	`SvgIcon?`	`null`
`Label`	`string` – Optional text label for the badge. Used if ChildContent is not provided.	`string`	`string.Empty`
`ChildContent`	`RenderFragment?` – Child content for the badge, allowing for text and additional elements. Overrides Label if set.	`RenderFragment?`	`null`