BeepButton

Overview

BeepButton is a modern, themeable button control that extends the standard Windows Forms Button with React-style variants, Material Design principles, and advanced features like SVG icon support, ripple effects, and comprehensive theming capabilities.

Built on the BeepControl foundation, BeepButton provides multiple visual variants, size options, and color schemes that automatically adapt to your application's theme while maintaining consistent behavior and accessibility.

Key Features

Basic Usage

// Create a basic button
var button = new BeepButton
{
    Text = "Click Me!",
    Size = new Size(120, 36),
    Location = new Point(10, 10)
};

// Add to form
this.Controls.Add(button);

// Create a primary contained button
var primaryButton = new BeepButton
{
    Text = "Primary Action",
    UIVariant = ReactUIVariant.Contained,
    UIColor = ReactUIColor.Primary,
    UISize = ReactUISize.Large,
    Size = new Size(150, 48),
    Location = new Point(10, 10)
};

// Create an outlined secondary button
var secondaryButton = new BeepButton
{
    Text = "Secondary Action",
    UIVariant = ReactUIVariant.Outlined,
    UIColor = ReactUIColor.Secondary,
    UISize = ReactUISize.Medium,
    Size = new Size(140, 40),
    Location = new Point(170, 10)
};

this.Controls.AddRange(new Control[] { primaryButton, secondaryButton });

Button Variants

UI Variants

UI Colors

UI Sizes

Properties

React-Style Properties

Content Properties

Events

var button = new BeepButton
{
    Text = "Save Document",
    UIVariant = ReactUIVariant.Contained,
    UIColor = ReactUIColor.Success
};

// Click event handler
button.Click += async (sender, e) => {
    button.IsLoading = true;
    button.Text = "Saving...";
    
    try
    {
        await SaveDocumentAsync();
        ShowSuccessMessage("Document saved successfully!");
    }
    catch (Exception ex)
    {
        ShowErrorMessage($"Failed to save: {ex.Message}");
    }
    finally
    {
        button.IsLoading = false;
        button.Text = "Save Document";
    }
};

// Hover effects
button.MouseEnter += (s, e) => {
    button.UISize = ReactUISize.Large; // Slightly larger on hover
};

button.MouseLeave += (s, e) => {
    button.UISize = ReactUISize.Medium; // Return to normal size
};

Examples

private void CreateButtonToolbar()
{
    var toolbar = new FlowLayoutPanel
    {
        Dock = DockStyle.Top,
        Height = 60,
        FlowDirection = FlowDirection.LeftToRight,
        Padding = new Padding(10)
    };

    // Primary action buttons
    var newButton = new BeepButton
    {
        Text = "New",
        UIVariant = ReactUIVariant.Contained,
        UIColor = ReactUIColor.Primary,
        UISize = ReactUISize.Medium,
        Margin = new Padding(0, 0, 10, 0)
    };

    var openButton = new BeepButton
    {
        Text = "Open",
        UIVariant = ReactUIVariant.Outlined,
        UIColor = ReactUIColor.Primary,
        UISize = ReactUISize.Medium,
        Margin = new Padding(0, 0, 10, 0)
    };

    var saveButton = new BeepButton
    {
        Text = "Save",
        UIVariant = ReactUIVariant.Contained,
        UIColor = ReactUIColor.Success,
        UISize = ReactUISize.Medium,
        Margin = new Padding(0, 0, 20, 0)
    };

    // Utility buttons
    var settingsButton = new BeepButton
    {
        Text = "Settings",
        UIVariant = ReactUIVariant.Text,
        UIColor = ReactUIColor.Secondary,
        UISize = ReactUISize.Medium,
        Margin = new Padding(0, 0, 10, 0)
    };

    toolbar.Controls.AddRange(new Control[] 
    { 
        newButton, openButton, saveButton, settingsButton 
    });

    this.Controls.Add(toolbar);
}

private void CreateFormActionButtons()
{
    var buttonPanel = new Panel
    {
        Dock = DockStyle.Bottom,
        Height = 80,
        Padding = new Padding(20)
    };

    var submitButton = new BeepButton
    {
        Text = "Submit",
        UIVariant = ReactUIVariant.Contained,
        UIColor = ReactUIColor.Primary,
        UISize = ReactUISize.Large,
        Size = new Size(120, 48),
        Anchor = AnchorStyles.Bottom | AnchorStyles.Right
    };
    submitButton.Location = new Point(buttonPanel.Width - 140 - 20, 16);

    var cancelButton = new BeepButton
    {
        Text = "Cancel",
        UIVariant = ReactUIVariant.Outlined,
        UIColor = ReactUIColor.Secondary,
        UISize = ReactUISize.Large,
        Size = new Size(120, 48),
        Anchor = AnchorStyles.Bottom | AnchorStyles.Right
    };
    cancelButton.Location = new Point(buttonPanel.Width - 270 - 20, 16);

    // Event handlers
    submitButton.Click += SubmitForm_Click;
    cancelButton.Click += (s, e) => this.Close();

    buttonPanel.Controls.AddRange(new Control[] { submitButton, cancelButton });
    this.Controls.Add(buttonPanel);
}

private void CreateIconButtons()
{
    // Play button with SVG icon
    var playButton = new BeepButton
    {
        SVGIcon = @"",
        UIVariant = ReactUIVariant.Floating,
        UIColor = ReactUIColor.Primary,
        UISize = ReactUISize.Large,
        Size = new Size(56, 56),
        Location = new Point(50, 50)
    };

    // Settings button with text and icon
    var settingsButton = new BeepButton
    {
        Text = "Settings",
        SVGIcon = @"",
        IconPosition = IconPosition.Left,
        UIVariant = ReactUIVariant.Outlined,
        UIColor = ReactUIColor.Secondary,
        UISize = ReactUISize.Medium,
        Size = new Size(140, 40),
        Location = new Point(50, 120)
    };

    this.Controls.AddRange(new Control[] { playButton, settingsButton });
}

Theming

BeepButton integrates seamlessly with the Beep theming system, automatically adapting colors, fonts, and visual effects based on your application's active theme.

// Apply theme to individual button
button.Theme = "DarkTheme";
button.ApplyTheme();

// Apply theme to all buttons in a container
private void ApplyThemeToButtons(Control container, string themeName)
{
    foreach (Control control in container.Controls)
    {
        if (control is BeepButton button)
        {
            button.Theme = themeName;
            button.ApplyTheme();
        }
        
        // Recursively apply to nested containers
        if (control.HasChildren)
        {
            ApplyThemeToButtons(control, themeName);
        }
    }
}

Theme-Aware Properties

Best Practices

🎨 Visual Design

• Use Primary for main actions: Reserve primary colored buttons for the most important action on a screen
• Maintain visual hierarchy: Use Contained > Outlined > Text variants to establish importance
• Consistent sizing: Use the same UISize within related button groups
• Meaningful icons: When using SVG icons, ensure they clearly represent the action

⚡ Performance

• Batch theme changes: Apply themes to multiple buttons at once using container-level operations
• Optimize SVG icons: Use simple, optimized SVG paths for better rendering performance
• Avoid excessive animations: Limit ripple effects and hover animations for better responsiveness

♿ Accessibility

• Provide tooltips: Use ToolTipText for buttons with icons only
• Keyboard navigation: Ensure buttons are accessible via Tab navigation
• High contrast support: Test buttons with high contrast themes
• Focus indicators: Ensure focused buttons have clear visual indicators