Skip to main content

​
Overview

DaisyBadge is a small label component for displaying status, counts, or tags with DaisyUI styling.

​
Properties

​
Variant

​
Variant
DaisyBadgeVariant
default:"Default"
The color variant of the badge.Available variants:
  • Default - Base200 gray
  • Neutral - Neutral dark color
  • Primary - Primary brand color
  • Secondary - Secondary brand color
  • Accent - Accent color
  • Ghost - Base200 ghost style
  • Info - Info blue
  • Success - Success green
  • Warning - Warning yellow/orange
  • Error - Error red

​
Size

​
Size
DaisySize
default:"Medium"
The size of the badge. Controls height, padding, and font size.Available sizes:
  • ExtraSmall
  • Small
  • Medium
  • Large
  • ExtraLarge

​
IsOutline

​
IsOutline
bool
default:"false"
Whether the badge uses outline style (transparent background with colored border).

​
CornerRadius

​
CornerRadius
CornerRadius
Custom corner radius for the badge. If not set, uses size-based token values.

​
BadgeContent

​
BadgeContent
object
The content of the badge (text or other content). Can also be set via Content property.

​
Usage Examples

​
XAML - Basic Badges

<!-- Default badge -->
<controls:DaisyBadge Content="Default" />

<!-- Primary badge -->
<controls:DaisyBadge Variant="Primary" Content="Primary" />

<!-- Success badge -->
<controls:DaisyBadge Variant="Success" Content="Success" />

​
XAML - Color Variants

<StackPanel Orientation="Horizontal" Spacing="8">
    <controls:DaisyBadge Variant="Neutral" Content="Neutral" />
    <controls:DaisyBadge Variant="Primary" Content="Primary" />
    <controls:DaisyBadge Variant="Secondary" Content="Secondary" />
    <controls:DaisyBadge Variant="Accent" Content="Accent" />
</StackPanel>

​
XAML - Semantic Colors

<StackPanel Orientation="Horizontal" Spacing="8">
    <controls:DaisyBadge Variant="Info" Content="Info" />
    <controls:DaisyBadge Variant="Success" Content="Success" />
    <controls:DaisyBadge Variant="Warning" Content="Warning" />
    <controls:DaisyBadge Variant="Error" Content="Error" />
</StackPanel>

​
XAML - Outline Style

<StackPanel Orientation="Horizontal" Spacing="8">
    <controls:DaisyBadge 
        Variant="Primary" 
        IsOutline="True" 
        Content="Outline" />
    <controls:DaisyBadge 
        Variant="Success" 
        IsOutline="True" 
        Content="Success" />
    <controls:DaisyBadge 
        Variant="Error" 
        IsOutline="True" 
        Content="Error" />
</StackPanel>

​
XAML - Sizes

<StackPanel Orientation="Horizontal" Spacing="8" VerticalAlignment="Center">
    <controls:DaisyBadge Size="ExtraSmall" Content="XS" />
    <controls:DaisyBadge Size="Small" Content="SM" />
    <controls:DaisyBadge Size="Medium" Content="MD" />
    <controls:DaisyBadge Size="Large" Content="LG" />
    <controls:DaisyBadge Size="ExtraLarge" Content="XL" />
</StackPanel>

​
XAML - As Status Indicator

<StackPanel Orientation="Horizontal" Spacing="8" VerticalAlignment="Center">
    <TextBlock Text="Status:" VerticalAlignment="Center" />
    <controls:DaisyBadge 
        Variant="Success" 
        Content="Active" 
        Size="Small" />
</StackPanel>

​
XAML - With Icons or Emojis

<StackPanel Orientation="Horizontal" Spacing="8">
    <!-- Text with emoji -->
    <controls:DaisyBadge Content="⭐ Featured" />
    
    <!-- Just a number -->
    <controls:DaisyBadge Variant="Error" Content="99+" />
    
    <!-- Custom content -->
    <controls:DaisyBadge Variant="Info">
        <StackPanel Orientation="Horizontal" Spacing="4">
            <TextBlock Text="🔔" />
            <TextBlock Text="3" />
        </StackPanel>
    </controls:DaisyBadge>
</StackPanel>

​
XAML - Notification Badge

<Grid>
    <controls:DaisyButton Content="Messages" />
    <controls:DaisyBadge 
        Variant="Error" 
        Content="5" 
        Size="Small" 
        HorizontalAlignment="Right" 
        VerticalAlignment="Top" 
        Margin="0,-8,-8,0" />
</Grid>

​
XAML - Custom Corner Radius

<!-- Fully rounded pill -->
<controls:DaisyBadge 
    Content="Rounded" 
    CornerRadius="999" />

<!-- Square badge -->
<controls:DaisyBadge 
    Content="Square" 
    CornerRadius="4" />

​
C# - Dynamic Badge

var badge = new DaisyBadge
{
    Variant = DaisyBadgeVariant.Primary,
    Size = DaisySize.Small,
    Content = "New"
};

​
C# - Status Badge with Updates

var statusBadge = new DaisyBadge
{
    Size = DaisySize.Small
};

void UpdateStatus(string status)
{
    switch (status)
    {
        case "active":
            statusBadge.Variant = DaisyBadgeVariant.Success;
            statusBadge.Content = "Active";
            break;
        case "pending":
            statusBadge.Variant = DaisyBadgeVariant.Warning;
            statusBadge.Content = "Pending";
            break;
        case "error":
            statusBadge.Variant = DaisyBadgeVariant.Error;
            statusBadge.Content = "Error";
            break;
    }
}

​
C# - Notification Counter

var notificationBadge = new DaisyBadge
{
    Variant = DaisyBadgeVariant.Error,
    Size = DaisySize.Small
};

void UpdateNotificationCount(int count)
{
    if (count > 99)
    {
        notificationBadge.Content = "99+";
    }
    else if (count > 0)
    {
        notificationBadge.Content = count.ToString();
        notificationBadge.Visibility = Visibility.Visible;
    }
    else
    {
        notificationBadge.Visibility = Visibility.Collapsed;
    }
}

​
Common Use Cases

​
Status Indicators

<StackPanel Spacing="8">
    <StackPanel Orientation="Horizontal" Spacing="8">
        <TextBlock Text="Server:" Width="100" />
        <controls:DaisyBadge Variant="Success" Content="Online" Size="Small" />
    </StackPanel>
    <StackPanel Orientation="Horizontal" Spacing="8">
        <TextBlock Text="Database:" Width="100" />
        <controls:DaisyBadge Variant="Warning" Content="Slow" Size="Small" />
    </StackPanel>
    <StackPanel Orientation="Horizontal" Spacing="8">
        <TextBlock Text="API:" Width="100" />
        <controls:DaisyBadge Variant="Error" Content="Down" Size="Small" />
    </StackPanel>
</StackPanel>

​
Tags/Labels

<StackPanel Orientation="Horizontal" Spacing="4">
    <controls:DaisyBadge Content="C#" Size="Small" />
    <controls:DaisyBadge Content="WinUI" Size="Small" />
    <controls:DaisyBadge Content="Uno" Size="Small" />
</StackPanel>

​
Version Badge

<controls:DaisyBadge 
    Variant="Info" 
    Content="v1.2.3" 
    Size="Small" />

​
Notes

  • Sizing: Badge automatically scales height, padding, and font size based on Size property
  • Content: Can contain text, numbers, icons, or custom UI elements
  • Outline Style: Provides a lighter alternative with transparent background
  • Corner Radius: Defaults to size-appropriate values, but can be customized
  • Foreground Color: Automatically contrasts with background for readability
  • Cross-Platform: Uses a Border wrapper internally for consistent rendering across all platforms

Build docs developers (and LLMs) love

Get started for freeTalk to us