Feedback Components - Flowery.Uno

Feedback components provide visual feedback about application state and ongoing processes.

DaisyIndicator

Utility to position a badge on the corner of another element.

Basic Usage

<daisy:DaisyIndicator>
  <daisy:DaisyIndicator.Indicator>
    <daisy:DaisyBadge Content="99+" Variant="Error" Size="Small" />
  </daisy:DaisyIndicator.Indicator>
  <daisy:DaisyIndicator.Content>
    <daisy:DaisyButton Content="Notifications" Variant="Primary" />
  </daisy:DaisyIndicator.Content>
</daisy:DaisyIndicator>

Position Variants

<!-- Top-right corner (default) -->
<daisy:DaisyIndicator Position="TopEnd">
  <daisy:DaisyIndicator.Indicator>
    <daisy:DaisyBadge Content="5" Variant="Primary" />
  </daisy:DaisyIndicator.Indicator>
  <daisy:DaisyIndicator.Content>
    <daisy:DaisyAvatar ImageSource="/Assets/user.png" />
  </daisy:DaisyIndicator.Content>
</daisy:DaisyIndicator>

<!-- Bottom-right corner -->
<daisy:DaisyIndicator Position="BottomEnd">
  <daisy:DaisyIndicator.Indicator>
    <Border Width="12" Height="12" CornerRadius="6" 
            Background="Green" BorderBrush="White" BorderThickness="2" />
  </daisy:DaisyIndicator.Indicator>
  <daisy:DaisyIndicator.Content>
    <daisy:DaisyAvatar ImageSource="/Assets/user.png" Size="Large" />
  </daisy:DaisyIndicator.Content>
</daisy:DaisyIndicator>

DaisyLoading

Animated loading indicators with multiple variants.

Variants

Spinner
Dots
Ring
Ball
Bars

<daisy:DaisyLoading Variant="Spinner" 
                    Size="Large" 
                    Color="{ThemeResource DaisyPrimaryBrush}" />

<daisy:DaisyLoading Variant="Dots" 
                    Size="Large" 
                    Color="{ThemeResource DaisyAccentBrush}" />

<daisy:DaisyLoading Variant="Ring" 
                    Size="Large" 
                    Color="{ThemeResource DaisySecondaryBrush}" />

<daisy:DaisyLoading Variant="Ball" 
                    Size="Large" 
                    Color="{ThemeResource DaisyInfoBrush}" />

<daisy:DaisyLoading Variant="Bars" 
                    Size="Large" 
                    Color="{ThemeResource DaisyWarningBrush}" />

Sizes

<daisy:DaisyLoading Variant="Spinner" Size="ExtraSmall" />
<daisy:DaisyLoading Variant="Spinner" Size="Small" />
<daisy:DaisyLoading Variant="Spinner" Size="Medium" />
<daisy:DaisyLoading Variant="Spinner" Size="Large" />
<daisy:DaisyLoading Variant="Spinner" Size="ExtraLarge" />

With Text

<StackPanel Spacing="12" HorizontalAlignment="Center">
  <daisy:DaisyLoading Variant="Spinner" Size="Large" />
  <TextBlock Text="Loading..." HorizontalAlignment="Center" />
</StackPanel>

DaisyMask

Applies shapes to content (Circle, Heart, Hexagon, etc.).

Basic Usage

<daisy:DaisyMask Shape="Circle" Width="100" Height="100">
  <Image Source="/Assets/photo.jpg" />
</daisy:DaisyMask>

Available Shapes

<StackPanel Orientation="Horizontal" Spacing="16">
  <daisy:DaisyMask Shape="Circle" Width="80" Height="80">
    <Image Source="/Assets/photo.jpg" />
  </daisy:DaisyMask>
  
  <daisy:DaisyMask Shape="Squircle" Width="80" Height="80">
    <Image Source="/Assets/photo.jpg" />
  </daisy:DaisyMask>
  
  <daisy:DaisyMask Shape="Heart" Width="80" Height="80">
    <Image Source="/Assets/photo.jpg" />
  </daisy:DaisyMask>
  
  <daisy:DaisyMask Shape="Hexagon" Width="80" Height="80">
    <Image Source="/Assets/photo.jpg" />
  </daisy:DaisyMask>
  
  <daisy:DaisyMask Shape="Star" Width="80" Height="80">
    <Image Source="/Assets/photo.jpg" />
  </daisy:DaisyMask>
</StackPanel>

Shape Options

Circle
Squircle
Heart
Hexagon
Star
Triangle
Pentagon
Diamond

DaisyProgress

Linear progress bar with variants.

Basic Usage

<daisy:DaisyProgress Value="70" Maximum="100" Variant="Primary" />

Indeterminate

<daisy:DaisyProgress IsIndeterminate="True" Variant="Primary" />

Variants

<StackPanel Spacing="16">
  <daisy:DaisyProgress Value="25" Variant="Primary" />
  <daisy:DaisyProgress Value="50" Variant="Secondary" />
  <daisy:DaisyProgress Value="75" Variant="Accent" />
  <daisy:DaisyProgress Value="100" Variant="Success" />
</StackPanel>

Properties

Property	Type	Default	Description
`Value`	`double`	`0`	Current progress value
`Maximum`	`double`	`100`	Maximum value
`IsIndeterminate`	`bool`	`false`	Shows loading animation
`Variant`	`DaisyProgressVariant`	`Default`	Color variant
`Size`	`DaisySize`	`Medium`	Progress bar height

DaisyRadialProgress

Circular progress indicator.

Basic Usage

<daisy:DaisyRadialProgress Value="75" 
                           Maximum="100" 
                           Size="Large" 
                           Variant="Primary" />

With Label

<daisy:DaisyRadialProgress Value="{x:Bind DownloadProgress, Mode=OneWay}" 
                           Maximum="100" 
                           Size="Large" 
                           Variant="Primary">
  <daisy:DaisyRadialProgress.Label>
    <TextBlock Text="{x:Bind DownloadProgress, Mode=OneWay}" 
               FontSize="20" 
               FontWeight="Bold" />
  </daisy:DaisyRadialProgress.Label>
</daisy:DaisyRadialProgress>

Variants

<StackPanel Orientation="Horizontal" Spacing="24">
  <daisy:DaisyRadialProgress Value="25" Variant="Primary" />
  <daisy:DaisyRadialProgress Value="50" Variant="Secondary" />
  <daisy:DaisyRadialProgress Value="75" Variant="Accent" />
  <daisy:DaisyRadialProgress Value="100" Variant="Success" />
</StackPanel>

DaisySkeleton

Animated placeholder for loading states.

Basic Usage

<daisy:DaisySkeleton Width="200" Height="20" />

Loading Card

<daisy:DaisyCard Padding="16">
  <StackPanel Spacing="12">
    <daisy:DaisySkeleton Width="100" Height="100" Shape="Circle" />
    <daisy:DaisySkeleton Width="200" Height="20" />
    <daisy:DaisySkeleton Width="300" Height="16" />
    <daisy:DaisySkeleton Width="250" Height="16" />
  </StackPanel>
</daisy:DaisyCard>

Shapes

<StackPanel Spacing="16">
  <daisy:DaisySkeleton Width="300" Height="20" Shape="Rectangle" />
  <daisy:DaisySkeleton Width="100" Height="100" Shape="Circle" />
  <daisy:DaisySkeleton Width="100" Height="100" Shape="Square" />
</StackPanel>

Properties

Property	Type	Default	Description
`Shape`	`DaisySkeletonShape`	`Rectangle`	Skeleton shape
`AnimationDuration`	`TimeSpan`	`1.5s`	Pulse animation duration

DaisyToast

Container for stacking alert messages with fixed positioning.

Basic Usage

<daisy:DaisyToast x:Name="ToastContainer" 
                  Position="TopEnd" 
                  MaxItems="5" />

Adding Toasts

// Show success toast
ToastContainer.Show(
  new DaisyAlert 
  { 
    Variant = DaisyAlertVariant.Success, 
    Message = "Operation completed successfully!" 
  },
  duration: TimeSpan.FromSeconds(3)
);

// Show error toast
ToastContainer.Show(
  new DaisyAlert 
  { 
    Variant = DaisyAlertVariant.Error, 
    Message = "An error occurred" 
  },
  duration: TimeSpan.FromSeconds(5)
);

Positions

<!-- Top positions -->
<daisy:DaisyToast Position="TopStart" />
<daisy:DaisyToast Position="TopCenter" />
<daisy:DaisyToast Position="TopEnd" />

<!-- Bottom positions -->
<daisy:DaisyToast Position="BottomStart" />
<daisy:DaisyToast Position="BottomCenter" />
<daisy:DaisyToast Position="BottomEnd" />

Properties

Property	Type	Default	Description
`Position`	`DaisyToastPosition`	`TopEnd`	Toast stack position
`MaxItems`	`int`	`5`	Maximum visible toasts
`DefaultDuration`	`TimeSpan`	`3s`	Auto-dismiss duration

Loading State Patterns

Loading Overlay

<Grid>
  <!-- Main content -->
  <Border>
    <!-- Your content here -->
  </Border>
  
  <!-- Loading overlay -->
  <Border Background="#80000000" 
          Visibility="{x:Bind IsLoading, Mode=OneWay}">
    <StackPanel Spacing="16" 
                HorizontalAlignment="Center" 
                VerticalAlignment="Center">
      <daisy:DaisyLoading Variant="Spinner" Size="ExtraLarge" />
      <TextBlock Text="Loading..." 
                 Foreground="White" 
                 FontSize="18" />
    </StackPanel>
  </Border>
</Grid>

Skeleton Loading

<Grid>
  <!-- Actual content (hidden when loading) -->
  <StackPanel Visibility="{x:Bind IsLoaded, Mode=OneWay}">
    <Image Source="{x:Bind ImageUrl}" />
    <TextBlock Text="{x:Bind Title}" />
  </StackPanel>
  
  <!-- Skeleton (shown when loading) -->
  <StackPanel Visibility="{x:Bind IsLoading, Mode=OneWay}" Spacing="12">
    <daisy:DaisySkeleton Width="300" Height="200" />
    <daisy:DaisySkeleton Width="250" Height="24" />
  </StackPanel>
</Grid>

Get Started

Core Concepts

Components

Advanced Features

Guides

​DaisyIndicator

​Basic Usage

​Position Variants

​DaisyLoading

​Variants

​Sizes

​With Text

​DaisyMask

​Basic Usage

​Available Shapes

​Shape Options

​DaisyProgress

​Basic Usage

​Indeterminate

​Variants

​Properties

​DaisyRadialProgress

​Basic Usage

​With Label

​Variants

​DaisySkeleton

​Basic Usage

​Loading Card

​Shapes

​Properties

​DaisyToast

​Basic Usage

​Adding Toasts

​Positions

​Properties

​Loading State Patterns

​Loading Overlay

​Skeleton Loading

​Next Steps

Components Overview

Theming

Build docs developers (and LLMs) love

DaisyIndicator

Basic Usage

Position Variants

DaisyLoading

Variants

Sizes

With Text

DaisyMask

Basic Usage

Available Shapes

Shape Options

DaisyProgress

Basic Usage

Indeterminate

Variants

Properties

DaisyRadialProgress

Basic Usage

With Label

Variants

DaisySkeleton

Basic Usage

Loading Card

Shapes

Properties

DaisyToast

Basic Usage

Adding Toasts

Positions

Properties

Loading State Patterns

Loading Overlay

Skeleton Loading

Next Steps