Overview
DaisyButton is a versatile button control that provides DaisyUI styling with support for multiple visual variants, sizes, shapes, and styles including Outline, Soft, and Dash variants.
Properties
Variant
Variant
DaisyButtonVariant
default:"Default"
The color variant of the button.Available variants:
Default - Standard button appearanceNeutral - Neutral color schemePrimary - Primary brand colorSecondary - Secondary brand colorAccent - Accent colorGhost - Transparent background with hover effectLink - Link-style button with no backgroundInfo - Information blueSuccess - Success greenWarning - Warning yellow/orangeError - Error red
Size
Size
DaisySize
default:"Medium"
The size of the button. Controls height, font size, padding, and icon sizing.Available sizes:
ExtraSmallSmallMediumLargeExtraLarge
ButtonStyle
DaisyButtonStyle
default:"Default"
The visual style of the button.Available styles:
Default - Solid filled backgroundOutline - Transparent background with colored borderDash - Dashed border outlineSoft - Semi-transparent filled background
Shape
Shape
DaisyButtonShape
default:"Default"
The shape and layout of the button.Available shapes:
Default - Standard rectangular buttonWide - Extended width (200px minimum)Block - Stretches to fill container widthSquare - Equal width and height (1:1 aspect ratio)Circle - Fully circular button
Icon Properties
Windows Symbol to display as the button icon. Auto-sized based on button Size. Inherits Foreground color.
Path data string (from a 24x24 viewBox) to display as the button icon. Auto-scaled using Viewbox. Inherits Foreground color.
IconPlacement
IconPlacement
default:"Left"
Position of the icon relative to the button content.Options: Neumorphic Properties
Enable or disable neumorphic shadow effect for this button. Overrides global setting.
The neumorphic rendering mode.Options:
None - No neumorphic effectRaised - Elevated appearanceInset - Pressed/sunken appearance
Shadow intensity from 0.0 (subtle) to 1.0 (strong). Values are clamped to this range.
Blur radius for neumorphic shadows.
Offset distance for neumorphic shadows.
NeumorphicDarkShadowColor
Custom color for the dark shadow component.
NeumorphicLightShadowColor
Custom color for the light shadow component.
NeumorphicRimLightEnabled
Enable rim light effect for neumorphic styling.
NeumorphicSurfaceGradientEnabled
Enable surface gradient for neumorphic styling.
Methods
RefreshNeumorphicEffect()
Manually refresh the neumorphic shadow effect. Useful when changing neumorphic properties programmatically.
public void RefreshNeumorphicEffect()
Usage Examples
XAML - Basic Variants
<!-- Primary button -->
<controls:DaisyButton Variant="Primary" Content="Primary" />
<!-- Secondary button -->
<controls:DaisyButton Variant="Secondary" Content="Secondary" />
<!-- Outline style -->
<controls:DaisyButton Variant="Primary" ButtonStyle="Outline" Content="Outline" />
<!-- Ghost button -->
<controls:DaisyButton Variant="Ghost" Content="Ghost" />
<!-- Link button -->
<controls:DaisyButton Variant="Link" Content="Link" />
XAML - Sizes
<controls:DaisyButton Size="ExtraSmall" Content="XS" />
<controls:DaisyButton Size="Small" Content="Small" />
<controls:DaisyButton Size="Medium" Content="Medium" />
<controls:DaisyButton Size="Large" Content="Large" />
<controls:DaisyButton Size="ExtraLarge" Content="XL" />
XAML - Shapes
<!-- Wide button -->
<controls:DaisyButton Shape="Wide" Content="Wide Button" />
<!-- Block button (full width) -->
<controls:DaisyButton Shape="Block" Content="Block Button" />
<!-- Square button -->
<controls:DaisyButton Shape="Square" Content="□" />
<!-- Circular button -->
<controls:DaisyButton Shape="Circle" IconSymbol="Add" />
XAML - With Icons
<!-- Using IconSymbol (Windows Symbol) -->
<controls:DaisyButton
Variant="Primary"
IconSymbol="Save"
Content="Save" />
<!-- Using IconData (Path data) -->
<controls:DaisyButton
Variant="Secondary"
IconData="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
Content="Add" />
<!-- Icon placement -->
<controls:DaisyButton
IconSymbol="Send"
IconPlacement="Right"
Content="Send" />
<!-- Default (solid) -->
<controls:DaisyButton Variant="Primary" Content="Solid" />
<!-- Outline -->
<controls:DaisyButton
Variant="Primary"
ButtonStyle="Outline"
Content="Outline" />
<!-- Soft (semi-transparent) -->
<controls:DaisyButton
Variant="Primary"
ButtonStyle="Soft"
Content="Soft" />
<!-- Dashed border -->
<controls:DaisyButton
Variant="Primary"
ButtonStyle="Dash"
Content="Dash" />
XAML - Semantic Colors
<controls:DaisyButton Variant="Info" Content="Info" />
<controls:DaisyButton Variant="Success" Content="Success" />
<controls:DaisyButton Variant="Warning" Content="Warning" />
<controls:DaisyButton Variant="Error" Content="Error" />
XAML - Neumorphic Styling
<!-- Enable neumorphic effect -->
<controls:DaisyButton
NeumorphicEnabled="True"
NeumorphicMode="Raised"
Content="Raised" />
<!-- Inset (pressed) appearance -->
<controls:DaisyButton
NeumorphicEnabled="True"
NeumorphicMode="Inset"
Content="Inset" />
<!-- Custom intensity -->
<controls:DaisyButton
NeumorphicEnabled="True"
NeumorphicIntensity="0.5"
Content="Subtle" />
C# - Dynamic Configuration
var button = new DaisyButton
{
Variant = DaisyButtonVariant.Primary,
Size = DaisySize.Large,
ButtonStyle = DaisyButtonStyle.Outline,
IconSymbol = Symbol.Save,
Content = "Save"
};
button.Click += (s, e) =>
{
// Handle click
};
C# - Programmatic Icon Update
// Using Windows Symbol
button.IconSymbol = Symbol.Download;
// Using path data
button.IconData = "M12 2L2 7l10 5 10-5-10-5z";
// Change icon placement
button.IconPlacement = IconPlacement.Right;
Notes
- Icon Sizing: Icons automatically scale based on the button’s
Size property
- Color Inheritance: Icon colors automatically inherit from the button’s
Foreground
- Shape Behavior:
Square and Circle shapes automatically sync width to heightBlock shape stretches to fill available widthWide shape sets minimum width to 200px
- Link Variant: Has no background or padding by default
- Neumorphic Effects: Require platform-specific support and may fall back to standard shadows on some platforms
