Variants - Flowery.Uno

Flowery.Uno provides semantic variants that map to your active theme’s color palette. Variants ensure visual consistency across all controls.

Semantic Variants

All controls support a consistent set of semantic variants:

Default

Neutral base color for standard elements

Primary

Main brand/accent color for primary actions

Secondary

Secondary brand color for supporting actions

Accent

Tertiary accent for highlights and emphasis

Neutral

Neutral gray for inactive or subtle elements

Ghost

Transparent/minimal styling

Info

Informational messages and hints

Success

Positive outcomes and confirmations

Warning

Caution and important notices

Error

Errors and destructive actions

Variants Across Controls

Buttons

Buttons support all semantic variants plus special styles:

DaisyButton.cs:12-25

<StackPanel Spacing="8">
    <daisy:DaisyButton Content="Default" Variant="Default" />
    <daisy:DaisyButton Content="Primary" Variant="Primary" />
    <daisy:DaisyButton Content="Secondary" Variant="Secondary" />
    <daisy:DaisyButton Content="Accent" Variant="Accent" />
    <daisy:DaisyButton Content="Ghost" Variant="Ghost" />
    <daisy:DaisyButton Content="Link" Variant="Link" />
    <daisy:DaisyButton Content="Info" Variant="Info" />
    <daisy:DaisyButton Content="Success" Variant="Success" />
    <daisy:DaisyButton Content="Warning" Variant="Warning" />
    <daisy:DaisyButton Content="Error" Variant="Error" />
</StackPanel>

Button Styles
Button Shapes

Default - Solid filled button
Outline - Border only, transparent background
Dash - Dashed border style
Soft - Subtle background with low contrast

Inputs

Input controls use variants for validation states and styling:

DaisyEnums.cs:99-111

<StackPanel Spacing="8">
    <daisy:DaisyInput Variant="Bordered" Placeholder="Bordered input" />
    <daisy:DaisyInput Variant="Ghost" Placeholder="Ghost input" />
    <daisy:DaisyInput Variant="Filled" Placeholder="Filled input" />
    <daisy:DaisyInput Variant="Primary" Placeholder="Primary validation" />
    <daisy:DaisyInput Variant="Success" Placeholder="Success state" />
    <daisy:DaisyInput Variant="Warning" Placeholder="Warning state" />
    <daisy:DaisyInput Variant="Error" Placeholder="Error state" />
</StackPanel>

Bordered, Ghost, and Filled control the base style. Primary, Secondary, Accent, and status colors (Info/Success/Warning/Error) apply semantic colors.

Badges

Badges map variants to theme colors:

DaisyEnums.cs:236-248

<StackPanel Orientation="Horizontal" Spacing="8">
    <daisy:DaisyBadge Text="Default" Variant="Default" />
    <daisy:DaisyBadge Text="Primary" Variant="Primary" />
    <daisy:DaisyBadge Text="Secondary" Variant="Secondary" />
    <daisy:DaisyBadge Text="Accent" Variant="Accent" />
    <daisy:DaisyBadge Text="Ghost" Variant="Ghost" />
    <daisy:DaisyBadge Text="Info" Variant="Info" />
    <daisy:DaisyBadge Text="Success" Variant="Success" />
    <daisy:DaisyBadge Text="Warning" Variant="Warning" />
    <daisy:DaisyBadge Text="Error" Variant="Error" />
</StackPanel>

Alerts

Alerts use status variants for semantic messaging:

DaisyEnums.cs:253-259

<StackPanel Spacing="8">
    <daisy:DaisyAlert Variant="Info" Text="This is informational" />
    <daisy:DaisyAlert Variant="Success" Text="Operation successful" />
    <daisy:DaisyAlert Variant="Warning" Text="Please be careful" />
    <daisy:DaisyAlert Variant="Error" Text="Something went wrong" />
</StackPanel>

Checkboxes & Radios

Form controls support semantic color variants:

DaisyEnums.cs:264-275

<StackPanel Spacing="8">
    <!-- Checkboxes -->
    <daisy:DaisyCheckBox Content="Primary" Variant="Primary" IsChecked="True" />
    <daisy:DaisyCheckBox Content="Secondary" Variant="Secondary" IsChecked="True" />
    <daisy:DaisyCheckBox Content="Accent" Variant="Accent" IsChecked="True" />
    <daisy:DaisyCheckBox Content="Success" Variant="Success" IsChecked="True" />
    
    <!-- Radios -->
    <daisy:DaisyRadio Content="Primary" Variant="Primary" IsChecked="True" />
    <daisy:DaisyRadio Content="Secondary" Variant="Secondary" IsChecked="True" />
    <daisy:DaisyRadio Content="Accent" Variant="Accent" IsChecked="True" />
    <daisy:DaisyRadio Content="Success" Variant="Success" IsChecked="True" />
</StackPanel>

Toggles

Toggle switches use semantic colors for the active state:

DaisyEnums.cs:84-94

<StackPanel Spacing="8">
    <daisy:DaisyToggle Variant="Primary" IsOn="True" />
    <daisy:DaisyToggle Variant="Secondary" IsOn="True" />
    <daisy:DaisyToggle Variant="Accent" IsOn="True" />
    <daisy:DaisyToggle Variant="Success" IsOn="True" />
    <daisy:DaisyToggle Variant="Warning" IsOn="True" />
    <daisy:DaisyToggle Variant="Error" IsOn="True" />
</StackPanel>

Progress Bars

Progress indicators support semantic colors:

DaisyEnums.cs:295-300

<StackPanel Spacing="8">
    <daisy:DaisyProgress Value="50" Variant="Primary" />
    <daisy:DaisyProgress Value="70" Variant="Secondary" />
    <daisy:DaisyProgress Value="90" Variant="Accent" />
    <daisy:DaisyProgress Value="100" Variant="Success" />
    <daisy:DaisyProgress Value="30" Variant="Warning" />
    <daisy:DaisyProgress Value="25" Variant="Error" />
</StackPanel>

Variant Color Mapping

Variants map to theme palette colors defined in DaisyPaletteFactory:

Primary Colors
Status Colors
Base Colors

Variant	Brush Resource	Content Brush
Primary	`DaisyPrimaryBrush`	`DaisyPrimaryContentBrush`
Secondary	`DaisySecondaryBrush`	`DaisySecondaryContentBrush`
Accent	`DaisyAccentBrush`	`DaisyAccentContentBrush`
Neutral	`DaisyNeutralBrush`	`DaisyNeutralContentBrush`

Variant	Brush Resource	Content Brush
Info	`DaisyInfoBrush`	`DaisyInfoContentBrush`
Success	`DaisySuccessBrush`	`DaisySuccessContentBrush`
Warning	`DaisyWarningBrush`	`DaisyWarningContentBrush`
Error	`DaisyErrorBrush`	`DaisyErrorContentBrush`

Variant	Brush Resource	Usage
Default	`DaisyBaseContentBrush`	Default text/foreground
Base200	`DaisyBase200Brush`	Elevated surfaces
Base300	`DaisyBase300Brush`	Borders

Theme Color Examples

Here are sample colors from the “Dark” theme (DaisyPaletteFactory.cs:179-188):

DaisyPaletteFactory.cs:179-188

["Dark"] = new ThemePalette
{
    Primary = "#605DFF", PrimaryFocus = "#4C4ACC", PrimaryContent = "#EDF1FE",
    Secondary = "#F43098", SecondaryFocus = "#C32679", SecondaryContent = "#F9E4F0",
    Accent = "#00D3BB", AccentFocus = "#00A895", AccentContent = "#084D49",
    Neutral = "#09090B", NeutralFocus = "#070708", NeutralContent = "#E4E4E7",
    Base100 = "#1D232A", Base200 = "#191E24", Base300 = "#374151", BaseContent = "#ECF9FF",
    Info = "#00BAFE", InfoContent = "#000000", Success = "#00D390", SuccessContent = "#000000",
    Warning = "#FCB700", WarningContent = "#000000", Error = "#FF627D", ErrorContent = "#000000"
}

Dynamic Variant Behavior

Theme Switching

When you switch themes, variant colors automatically update:

// Switch to Synthwave theme
DaisyThemeManager.ApplyTheme("Synthwave");

// All controls with Variant="Primary" now use Synthwave's primary color
// No code changes needed - variants adapt to the active theme

Runtime Updates

Variants update automatically when themes change because controls use ThemeResource bindings internally:

<!-- This button automatically gets the new Primary color when theme switches -->
<daisy:DaisyButton Content="Primary Action" Variant="Primary" />

Variant colors update instantly when you call DaisyThemeManager.ApplyTheme(). You don’t need to manually update any control properties.

Custom Variant Overrides

You can override variant colors for specific controls:

Instance-Level Override

<daisy:DaisyButton Content="Custom Primary" Variant="Primary">
    <daisy:DaisyButton.Resources>
        <SolidColorBrush x:Key="DaisyButtonPrimaryBackground" Color="#FF6B35" />
        <SolidColorBrush x:Key="DaisyButtonPrimaryForeground" Color="White" />
    </daisy:DaisyButton.Resources>
</daisy:DaisyButton>

Application-Level Override

Override variant colors for all controls in App.xaml:

<Application.Resources>
    <!-- Override Primary variant for all buttons -->
    <SolidColorBrush x:Key="DaisyButtonPrimaryBackground" Color="#FF6B35" />
    <SolidColorBrush x:Key="DaisyButtonPrimaryForeground" Color="White" />
    
    <!-- Override Success variant for all badges -->
    <SolidColorBrush x:Key="DaisyBadgeSuccessBackground" Color="#10B981" />
    <SolidColorBrush x:Key="DaisyBadgeSuccessForeground" Color="White" />
</Application.Resources>

Best Practices

Use Semantic Variants

Choose variants based on meaning, not just color preference. Use Primary for primary actions, Error for destructive actions, etc.

Consistent Across Controls

Use the same variant for related elements. If your submit button is Primary, use Primary for related validation inputs.

Status Colors for Feedback

Use Info, Success, Warning, and Error variants for user feedback to maintain consistency with alerts and notifications.

Test with Multiple Themes

Verify your variant choices work well across light and dark themes. Some variants have better contrast in different themes.

Variant Selection Guide

Use Case	Recommended Variant
Primary action (submit, save)	`Primary`
Secondary action (cancel, back)	`Secondary` or `Ghost`
Destructive action (delete)	`Error`
Success message/confirmation	`Success`
Warning/caution message	`Warning`
Informational message	`Info`
Disabled/inactive state	`Neutral` or `Ghost`
Special emphasis	`Accent`

Variant Support by Control

Not all controls support all variants. Here’s a quick reference:

Control	Variants Supported
DaisyButton	Default, Neutral, Primary, Secondary, Accent, Ghost, Link, Info, Success, Warning, Error
DaisyInput	Bordered, Ghost, Filled, Primary, Secondary, Accent, Info, Success, Warning, Error
DaisyBadge	Default, Neutral, Primary, Secondary, Accent, Ghost, Info, Success, Warning, Error
DaisyAlert	Info, Success, Warning, Error
DaisyCheckBox	Default, Primary, Secondary, Accent, Neutral, Success, Warning, Info, Error
DaisyRadio	Default, Primary, Secondary, Accent, Success, Warning, Info, Error
DaisyToggle	Default, Primary, Secondary, Accent, Success, Warning, Info, Error
DaisyProgress	Default, Primary, Secondary, Accent, Info, Success, Warning, Error

Check individual control documentation for variant-specific behavior and examples.

Get Started

Core Concepts

Components

Advanced Features

Guides

​Semantic Variants

Default

Primary

Secondary

Accent

Neutral

Ghost

Info

Success

Warning

Error

​Variants Across Controls

​Buttons

​Inputs

​Badges

​Alerts

​Checkboxes & Radios

​Toggles

​Progress Bars

​Variant Color Mapping

​Theme Color Examples

​Dynamic Variant Behavior

​Theme Switching

​Runtime Updates

​Custom Variant Overrides

​Instance-Level Override

​Application-Level Override

​Best Practices

Use Semantic Variants

Consistent Across Controls

Status Colors for Feedback

Test with Multiple Themes

​Variant Selection Guide

​Variant Support by Control

Build docs developers (and LLMs) love

Semantic Variants

Variants Across Controls

Buttons

Inputs

Badges

Alerts

Checkboxes & Radios

Toggles

Progress Bars

Variant Color Mapping

Theme Color Examples

Dynamic Variant Behavior

Theme Switching

Runtime Updates

Custom Variant Overrides

Instance-Level Override

Application-Level Override

Best Practices

Variant Selection Guide

Variant Support by Control