Action Components

Action components handle user interactions and trigger behaviors in your application.

DaisyButton

Versatile button control with 11 variants, multiple styles, shapes, and sizes.

Basic Usage

<daisy:DaisyButton Content="Default Button" />
<daisy:DaisyButton Content="Primary" Variant="Primary" />
<daisy:DaisyButton Content="Secondary" Variant="Secondary" />
<daisy:DaisyButton Content="Accent" Variant="Accent" />

Variants

Solid
Outline
Ghost & Link

<daisy:DaisyButton Content="Neutral" Variant="Neutral" />
<daisy:DaisyButton Content="Primary" Variant="Primary" />
<daisy:DaisyButton Content="Secondary" Variant="Secondary" />
<daisy:DaisyButton Content="Accent" Variant="Accent" />
<daisy:DaisyButton Content="Info" Variant="Info" />
<daisy:DaisyButton Content="Success" Variant="Success" />
<daisy:DaisyButton Content="Warning" Variant="Warning" />
<daisy:DaisyButton Content="Error" Variant="Error" />

<daisy:DaisyButton Content="Outline Primary" 
                   Variant="Primary" 
                   ButtonStyle="Outline" />
<daisy:DaisyButton Content="Outline Secondary" 
                   Variant="Secondary" 
                   ButtonStyle="Outline" />

<daisy:DaisyButton Content="Ghost" Variant="Ghost" />
<daisy:DaisyButton Content="Link" Variant="Link" />

Sizes

<daisy:DaisyButton Content="Extra Small" Size="ExtraSmall" Variant="Primary" />
<daisy:DaisyButton Content="Small" Size="Small" Variant="Primary" />
<daisy:DaisyButton Content="Medium" Size="Medium" Variant="Primary" />
<daisy:DaisyButton Content="Large" Size="Large" Variant="Primary" />
<daisy:DaisyButton Content="Extra Large" Size="ExtraLarge" Variant="Primary" />

Shapes

<daisy:DaisyButton Content="Wide" Shape="Wide" Variant="Primary" />
<daisy:DaisyButton Content="Block" Shape="Block" Variant="Primary" />
<daisy:DaisyButton Content="■" Shape="Square" Variant="Primary" />
<daisy:DaisyButton Content="●" Shape="Circle" Variant="Primary" />

Styles

<daisy:DaisyButton Content="Default" ButtonStyle="Default" Variant="Primary" />
<daisy:DaisyButton Content="Outline" ButtonStyle="Outline" Variant="Primary" />
<daisy:DaisyButton Content="Soft" ButtonStyle="Soft" Variant="Primary" />
<daisy:DaisyButton Content="Dash" ButtonStyle="Dash" Variant="Primary" />

Properties

Property	Type	Default	Description
`Variant`	`DaisyButtonVariant`	`Default`	Color variant (Primary, Secondary, etc.)
`ButtonStyle`	`DaisyButtonStyle`	`Default`	Visual style (Outline, Soft, Dash)
`Shape`	`DaisyButtonShape`	`Default`	Button shape (Wide, Block, Square, Circle)
`Size`	`DaisySize`	`Medium`	Button size
`IsActive`	`bool`	`false`	Shows active/pressed state
`NoAnimation`	`bool`	`false`	Disables click animation

DaisyFab

Floating Action Button with speed dial support for multiple actions.

Basic Usage

<daisy:DaisyFab Icon="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" 
                Variant="Primary" />

With Multiple Actions (Speed Dial)

<daisy:DaisyFab Icon="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" Variant="Primary">
  <daisy:DaisyFab.Actions>
    <daisy:DaisyFabAction Icon="..." Label="Edit" Click="OnEditClick" />
    <daisy:DaisyFabAction Icon="..." Label="Delete" Click="OnDeleteClick" />
    <daisy:DaisyFabAction Icon="..." Label="Share" Click="OnShareClick" />
  </daisy:DaisyFab.Actions>
</daisy:DaisyFab>

Properties

Property	Type	Default	Description
`Variant`	`DaisyButtonVariant`	`Primary`	Color variant
`Icon`	`string`	`null`	SVG path data for icon
`Size`	`DaisySize`	`Large`	FAB size
`Position`	`DaisyFabPosition`	`BottomRight`	Screen position

DaisyModal

Dialog box with backdrop overlay, keyboard support, and optional dragging.

Basic Usage

<daisy:DaisyModal x:Name="MyModal" IsOpen="False">
  <StackPanel Spacing="16" Padding="24">
    <TextBlock Text="Modal Title" FontSize="24" FontWeight="Bold" />
    <TextBlock Text="Modal content goes here" />
    <daisy:DaisyButton Content="Close" Click="OnCloseClick" />
  </StackPanel>
</daisy:DaisyModal>

Opening and Closing

// Open modal
MyModal.IsOpen = true;

// Close modal
MyModal.IsOpen = false;

Standard
With Backdrop
Draggable

<daisy:DaisyModal IsOpen="True">
  <TextBlock Text="Standard modal" />
</daisy:DaisyModal>

<daisy:DaisyModal IsOpen="True" 
                  ShowBackdrop="True" 
                  CloseOnBackdropClick="True">
  <TextBlock Text="Click outside to close" />
</daisy:DaisyModal>

<daisy:DaisyModal IsOpen="True" 
                  IsDraggable="True" 
                  ShowGrabBar="True">
  <TextBlock Text="Drag me around!" />
</daisy:DaisyModal>

Properties

Property	Type	Default	Description
`IsOpen`	`bool`	`false`	Controls modal visibility
`ShowBackdrop`	`bool`	`true`	Shows dimmed backdrop overlay
`CloseOnBackdropClick`	`bool`	`true`	Closes when clicking backdrop
`CloseOnEscape`	`bool`	`true`	Closes on Escape key
`IsDraggable`	`bool`	`false`	Enables modal dragging
`ShowGrabBar`	`bool`	`false`	Shows drag handle
`BackdropOpacity`	`double`	`0.5`	Backdrop opacity (0-1)

Events

MyModal.Opened += (s, e) => { /* Modal opened */ };
MyModal.Closed += (s, e) => { /* Modal closed */ };

DaisySwap

Toggle control that swaps between two content states with optional animations.

Basic Usage

<daisy:DaisySwap IsSwapped="False">
  <daisy:DaisySwap.OnContent>
    <TextBlock Text="🌙" FontSize="32" />
  </daisy:DaisySwap.OnContent>
  <daisy:DaisySwap.OffContent>
    <TextBlock Text="☀️" FontSize="32" />
  </daisy:DaisySwap.OffContent>
</daisy:DaisySwap>

With Effects

Rotate
Flip

<daisy:DaisySwap Effect="Rotate" IsSwapped="{x:Bind IsActive, Mode=TwoWay}">
  <daisy:DaisySwap.OnContent>
    <TextBlock Text="✓" FontSize="24" />
  </daisy:DaisySwap.OnContent>
  <daisy:DaisySwap.OffContent>
    <TextBlock Text="✗" FontSize="24" />
  </daisy:DaisySwap.OffContent>
</daisy:DaisySwap>

<daisy:DaisySwap Effect="Flip" IsSwapped="{x:Bind IsFlipped, Mode=TwoWay}">
  <daisy:DaisySwap.OnContent>
    <Border Background="{ThemeResource DaisyPrimaryBrush}" 
            Width="100" Height="100">
      <TextBlock Text="Front" />
    </Border>
  </daisy:DaisySwap.OnContent>
  <daisy:DaisySwap.OffContent>
    <Border Background="{ThemeResource DaisySecondaryBrush}" 
            Width="100" Height="100">
      <TextBlock Text="Back" />
    </Border>
  </daisy:DaisySwap.OffContent>
</daisy:DaisySwap>

Properties

Property	Type	Default	Description
`IsSwapped`	`bool`	`false`	Current swap state
`Effect`	`DaisySwapEffect`	`None`	Animation effect (None, Rotate, Flip)
`OnContent`	`object`	`null`	Content shown when swapped
`OffContent`	`object`	`null`	Content shown when not swapped

Events

MySwap.Swapped += (s, e) => 
{
  bool isSwapped = MySwap.IsSwapped;
  // Handle state change
};

Get Started

Core Concepts

Components

Advanced Features

Guides

DaisyButton

Basic Usage

Variants

Sizes

Shapes

Styles

Properties

DaisyFab

Basic Usage

With Multiple Actions (Speed Dial)

Properties

DaisyModal

Basic Usage

Opening and Closing

Properties

Events

DaisySwap

Basic Usage

With Effects

Properties

Events

Next Steps

Data Display

Data Input

Build docs developers (and LLMs) love

Get Started

Core Concepts

Components

Advanced Features

Guides

​DaisyButton

​Basic Usage

​Variants

​Sizes

​Shapes

​Styles

​Properties

​DaisyFab

​Basic Usage

​With Multiple Actions (Speed Dial)

​Properties

​DaisyModal

​Basic Usage

​Opening and Closing

​Modal Variants

​Properties

​Events

​DaisySwap

​Basic Usage

​With Effects

​Properties

​Events

​Next Steps

Data Display

Data Input

Build docs developers (and LLMs) love

DaisyButton

Basic Usage

Variants

Sizes

Shapes

Styles

Properties

DaisyFab

Basic Usage

With Multiple Actions (Speed Dial)

Properties

DaisyModal

Basic Usage

Opening and Closing

Modal Variants

Properties

Events

DaisySwap

Basic Usage

With Effects

Properties

Events

Next Steps