Overview
DaisyAlert displays informational messages, warnings, errors, or success notifications with built-in icons and variant-based styling.
Properties
Variant
Variant
DaisyAlertVariant
default:"Info"
The semantic type of the alert, which determines color and default icon.Available variants:
Info - Information messages (blue)Success - Success messages (green)Warning - Warning messages (yellow/orange)Error - Error messages (red)
Size
Size
DaisySize
default:"Medium"
The size of the alert. Controls padding, icon size, and font size.Available sizes:
ExtraSmallSmallMediumLargeExtraLarge
Icon
Custom icon to display. Accepts Geometry or string path data. If not set, a default icon based on Variant is used.
ShowIcon
Whether to display the icon. Set to false to hide the icon.
Message
Message text to display. Can also be set via Content property.
Usage Examples
XAML - Basic Alerts
<!-- Info alert (default) -->
<controls:DaisyAlert Message="This is an informational message." />
<!-- Success alert -->
<controls:DaisyAlert
Variant="Success"
Message="Operation completed successfully!" />
<!-- Warning alert -->
<controls:DaisyAlert
Variant="Warning"
Message="Please review your settings." />
<!-- Error alert -->
<controls:DaisyAlert
Variant="Error"
Message="An error occurred. Please try again." />
XAML - Custom Content
<controls:DaisyAlert Variant="Info">
<StackPanel Spacing="4">
<TextBlock Text="Important Notice" FontWeight="SemiBold" />
<TextBlock Text="Your session will expire in 5 minutes." TextWrapping="Wrap" />
</StackPanel>
</controls:DaisyAlert>
XAML - Without Icon
<controls:DaisyAlert
Variant="Warning"
ShowIcon="False"
Message="This alert has no icon." />
XAML - Custom Icon
<controls:DaisyAlert
Variant="Info"
Icon="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
Message="Custom checkmark icon" />
XAML - Different Sizes
<StackPanel Spacing="8">
<controls:DaisyAlert
Size="Small"
Message="Small alert" />
<controls:DaisyAlert
Size="Medium"
Message="Medium alert" />
<controls:DaisyAlert
Size="Large"
Message="Large alert" />
</StackPanel>
<controls:DaisyAlert Variant="Warning">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock
Text="Your changes are not saved."
VerticalAlignment="Center"
TextWrapping="Wrap" />
<controls:DaisyButton
Grid.Column="1"
Content="Save Now"
Size="Small"
Variant="Ghost"
Margin="12,0,0,0" />
</Grid>
</controls:DaisyAlert>
XAML - Dismissible Alert
<controls:DaisyAlert x:Name="DismissibleAlert" Variant="Info">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock
Text="This alert can be dismissed."
VerticalAlignment="Center" />
<Button
Grid.Column="1"
Content="✕"
Background="Transparent"
BorderThickness="0"
Click="DismissAlert" />
</Grid>
</controls:DaisyAlert>
private void DismissAlert(object sender, RoutedEventArgs e)
{
DismissibleAlert.Visibility = Visibility.Collapsed;
}
C# - Dynamic Alert
var alert = new DaisyAlert
{
Variant = DaisyAlertVariant.Success,
Message = "Data saved successfully!"
};
C# - Show Temporary Alert
private async void ShowTemporaryAlert(string message, DaisyAlertVariant variant)
{
var alert = new DaisyAlert
{
Variant = variant,
Message = message
};
AlertContainer.Children.Add(alert);
await Task.Delay(3000); // Show for 3 seconds
AlertContainer.Children.Remove(alert);
}
// Usage
ShowTemporaryAlert("File uploaded!", DaisyAlertVariant.Success);
C# - Validation Alerts
private void ShowValidationResult(bool isValid, string message)
{
ValidationAlert.Variant = isValid ? DaisyAlertVariant.Success : DaisyAlertVariant.Error;
ValidationAlert.Message = message;
ValidationAlert.Visibility = Visibility.Visible;
}
Default Icons
Each variant has a default icon:
- Info: Circle with “i” (information)
- Success: Checkmark
- Warning: Triangle with exclamation mark
- Error: X/cross
Common Use Cases
<StackPanel Spacing="12">
<controls:DaisyInput
Label="Email"
PlaceholderText="[email protected]" />
<controls:DaisyAlert
x:Name="EmailValidationAlert"
Variant="Error"
Message="Please enter a valid email address."
Visibility="Collapsed" />
</StackPanel>
Success Confirmation
<controls:DaisyAlert
Variant="Success"
Message="Your profile has been updated successfully!" />
System Status
<controls:DaisyAlert Variant="Warning">
<StackPanel Spacing="4">
<TextBlock Text="System Maintenance" FontWeight="SemiBold" />
<TextBlock
Text="The system will be down for maintenance on Sunday from 2-4 AM."
TextWrapping="Wrap" />
</StackPanel>
</controls:DaisyAlert>
Error Messages
<controls:DaisyAlert Variant="Error">
<StackPanel Spacing="4">
<TextBlock Text="Connection Error" FontWeight="SemiBold" />
<TextBlock
Text="Unable to connect to the server. Please check your internet connection."
TextWrapping="Wrap" />
</StackPanel>
</controls:DaisyAlert>
Notes
- Auto-sizing: Icon, padding, and font sizes automatically scale with the
Size property
- Variant Colors: Background and foreground colors are determined by the
Variant property
- Content Flexibility: Can use
Message for simple text or Content for complex layouts
- Icon Customization: Set
Icon to override the default icon, or ShowIcon="False" to hide it
- Foreground Contrast: Text color automatically contrasts with background for readability
- Border: All alerts have a 2px border matching the variant color
