---
description: >-
  This feature allows developers to tailor the appearance and layout of the
  close (X) button on the chip, ensuring it integrates seamlessly with the
  overall design and interactivity of the control.
---

# Close Button Customization

## Overview

The Close Button Customization feature provides a range of properties that enable developers to adjust the visual styling, layout, and behavior of the close button. This includes settings for icon color, size, thickness, padding, and border appearance. These properties ensure that the close button not only fits the design language of the application but also offers a clear, clickable area for chip removal.

| Property                   | Description                                                                                          | Default Value                     | Valid Range / Notes                                |
| -------------------------- | ---------------------------------------------------------------------------------------------------- | --------------------------------- | -------------------------------------------------- |
| CloseIconColor             | Sets the color of the close (X) icon in its normal state.                                            | Color.Black                       | Any valid System.Drawing.Color value.              |
| CloseIconHoverColor        | Defines the color of the close icon when the mouse hovers over it.                                   | Color.FromArgb(255, 64, 64, 64)   | Any valid System.Drawing.Color value.              |
| CloseIconSize              | Determines the size of the clickable close button area in pixels.                                    | 20                                | Minimum 12, maximum 32 pixels.                     |
| CloseIconThickness         | Controls the line thickness of the close icon.                                                       | 1.5f                              | Float value; typically between 1f and 3f.          |
| CloseIconPadding           | Specifies the padding around the close button area relative to the chip’s edges.                     | Padding(8)                        | System.Windows.Forms.Padding value.                |
| CloseIconInnerPadding      | Sets the inner padding for the close icon, affecting the size of the drawn "X" within its container. | 4                                 | Integer value; constrained between 2 and 8 pixels. |
| ShowCloseButtonBorder      | Indicates whether a border is drawn around the close button area.                                    | false                             | Boolean value.                                     |
| CloseButtonBorderColor     | Sets the color of the close button border, if displayed.                                             | Color.FromArgb(128, 128, 128)     | Any valid System.Drawing.Color value.              |
| CloseButtonBorderThickness | Determines the thickness of the border around the close button.                                      | 1f                                | Float value; typically between 0.5f and 2f.        |
| CloseButtonHoverBackColor  | Specifies the background color of the close button area when hovered over.                           | Color.FromArgb(30, 128, 128, 128) | Any valid System.Drawing.Color value.              |

### Key Points

| Aspect              | Details                                                                                                                |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| Visual Consistency  | Ensures the close button can be styled to match the chip and the application’s overall theme.                          |
| Interactive Clarity | Provides visual feedback on hover (via color and background changes) to enhance the user’s awareness of interactivity. |
| Layout Adaptability | Padding and size settings allow the close button to be positioned precisely, ensuring proper spacing and alignment.    |

### Best Practices

| Practice                       | Recommendation                                                                                                                  |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
| Harmonize with Overall Design  | Match the CloseIconColor and CloseButtonBorderColor with your application’s color scheme for a cohesive look.                   |
| Maintain Clickability          | Ensure that CloseIconSize and CloseIconPadding are set to create an ample clickable area, especially for touch interfaces.      |
| Use Hover Feedback Effectively | Customize CloseIconHoverColor and CloseButtonHoverBackColor so that the button provides immediate visual feedback when hovered. |

### Common Pitfalls

| Pitfall                    | Explanation                                                                                                                         |
| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| Insufficient Click Area    | Setting the CloseIconSize too small may make the close button hard to click, especially on high-DPI displays or touch devices.      |
| Overly Prominent Borders   | An excessively thick or contrasting border (when ShowCloseButtonBorder is true) can detract from the overall aesthetic of the chip. |
| Inconsistent Hover Effects | Mismatched hover colors between the icon and its background can confuse users and degrade the visual quality of the interaction.    |

### Usage Scenarios

| Scenario                           | Description                                                                                                                 |
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| Removable List Items               | Use the close button on chips representing removable tags or items, allowing users to delete items with a single click.     |
| Dynamic User Interfaces            | Incorporate the close button in chips that need to be dynamically added or removed, such as filters or selected categories. |
| Mobile and Touch-Optimized Designs | Ensure the close button is sized and padded appropriately to support easy interaction on touch devices.                     |

### Real Life Usage Scenarios

| Scenario                       | Real Life Example                                                                                                                  |
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
| Email Label Management         | In an email client, users can remove labels from messages by clicking a well-styled close button on each chip.                     |
| Task Management Applications   | Users can dismiss or remove tasks represented by chips; clear close button styling reinforces the deletion action.                 |
| Customizable Dashboard Filters | In dashboards, chips with a close button allow users to adjust filters or remove active selections in a visually intuitive manner. |

### Troubleshooting Tips

| Tip                              | Recommendation                                                                                                                                      |
| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| Verify Padding and Size Settings | If the close button appears misaligned or too small, review the CloseIconSize, CloseIconPadding, and CloseIconInnerPadding values.                  |
| Check Hover State Appearance     | Ensure that the hover colors (CloseIconHoverColor and CloseButtonHoverBackColor) are distinct and provide adequate feedback.                        |
| Confirm Border Visibility        | If borders are not displaying as expected, double-check that ShowCloseButtonBorder is set to true and that border color/thickness values are valid. |

### Code Examples

#### Basic Close Button Customization

This example demonstrates how to customize the close button’s appearance, including icon color, size, and hover effects:

```csharp
using System;
using System.Drawing;
using System.Windows.Forms;
using SiticoneNetFrameworkUI;

public class CloseButtonDemoForm : Form
{
    private SiticoneChip chip;

    public CloseButtonDemoForm()
    {
        this.Text = "Close Button Customization Demo";
        this.Size = new Size(400, 250);
        InitializeChip();
    }

    private void InitializeChip()
    {
        chip = new SiticoneChip
        {
            Text = "Removable Chip",
            Location = new Point(50, 50),
            Size = new Size(250, 40),
            // Enable the close button
            ShowCloseButton = true,
            AutoDisposeOnClose = true,
            // Close Button Customization settings
            CloseIconColor = Color.Black,
            CloseIconHoverColor = Color.Red,
            CloseIconSize = 20,
            CloseIconThickness = 2f,
            CloseIconPadding = new Padding(8),
            CloseIconInnerPadding = 4,
            ShowCloseButtonBorder = true,
            CloseButtonBorderColor = Color.Gray,
            CloseButtonBorderThickness = 1f,
            CloseButtonHoverBackColor = Color.LightGray,
            // General appearance settings for consistency
            FillColor = Color.WhiteSmoke,
            BorderColor = Color.DarkGray,
            BorderWidth = 1
        };

        chip.CloseClicked += (s, e) =>
        {
            MessageBox.Show("Close button clicked; chip will be disposed.");
        };

        this.Controls.Add(chip);
    }

    [STAThread]
    public static void Main()
    {
        Application.Run(new CloseButtonDemoForm());
    }
}
```

#### Advanced Customization with Dynamic Behavior

The following example shows how to dynamically change the close button properties at runtime, giving a preview of different styles based on user interaction:

```csharp
using System;
using System.Drawing;
using System.Windows.Forms;
using SiticoneNetFrameworkUI;

public class DynamicCloseButtonDemoForm : Form
{
    private SiticoneChip chip;
    private Button changeStyleButton;

    public DynamicCloseButtonDemoForm()
    {
        this.Text = "Dynamic Close Button Customization";
        this.Size = new Size(500, 300);
        InitializeComponents();
    }

    private void InitializeComponents()
    {
        chip = new SiticoneChip
        {
            Text = "Dynamic Close Button Chip",
            Location = new Point(50, 50),
            Size = new Size(300, 40),
            ShowCloseButton = true,
            AutoDisposeOnClose = false,
            CloseIconColor = Color.DarkBlue,
            CloseIconHoverColor = Color.Orange,
            CloseIconSize = 20,
            CloseIconThickness = 1.5f,
            CloseIconPadding = new Padding(8),
            CloseIconInnerPadding = 4,
            ShowCloseButtonBorder = true,
            CloseButtonBorderColor = Color.Black,
            CloseButtonBorderThickness = 1f,
            CloseButtonHoverBackColor = Color.LightYellow,
            FillColor = Color.White,
            BorderColor = Color.LightGray,
            BorderWidth = 1
        };

        changeStyleButton = new Button
        {
            Text = "Change Close Button Style",
            Location = new Point(50, 120),
            Size = new Size(200, 30)
        };

        changeStyleButton.Click += (s, e) =>
        {
            // Toggle between two sets of close button styles
            if (chip.CloseIconColor == Color.DarkBlue)
            {
                chip.CloseIconColor = Color.Green;
                chip.CloseIconHoverColor = Color.Purple;
                chip.CloseButtonHoverBackColor = Color.LightGreen;
            }
            else
            {
                chip.CloseIconColor = Color.DarkBlue;
                chip.CloseIconHoverColor = Color.Orange;
                chip.CloseButtonHoverBackColor = Color.LightYellow;
            }
            chip.Invalidate();
        };

        this.Controls.Add(chip);
        this.Controls.Add(changeStyleButton);
    }

    [STAThread]
    public static void Main()
    {
        Application.Run(new DynamicCloseButtonDemoForm());
    }
}
```

### Review

<table><thead><tr><th width="262">Aspect</th><th>Review Comments</th></tr></thead><tbody><tr><td>Customization Flexibility</td><td>Offers detailed control over every aspect of the close button, from icon appearance to hover and border styling.</td></tr><tr><td>Integration Simplicity</td><td>The properties are straightforward to apply, making it easy to ensure the close button matches the overall chip design.</td></tr><tr><td>User Experience Impact</td><td>Clear visual cues provided by hover effects and adequate click areas enhance usability, especially in dynamic interfaces.</td></tr></tbody></table>

### Summary

The Close Button Customization feature of the SiticoneChip control empowers developers to design a close button that not only fits seamlessly into their application’s visual language but also provides clear and effective user interaction. By offering detailed settings for icon appearance, sizing, padding, and border styling, this feature ensures that chip removal is both intuitive and visually appealing.

### Additional Useful Sections

#### Integration Checklist

<table><thead><tr><th width="337">Checklist Item</th><th>Status/Recommendation</th></tr></thead><tbody><tr><td>Confirm Close Button Visibility</td><td>Ensure ShowCloseButton is enabled when a close button is required, and validate that AutoDisposeOnClose behaves as expected.</td></tr><tr><td>Validate Padding and Size Settings</td><td>Double-check that CloseIconSize, CloseIconPadding, and CloseIconInnerPadding provide an ample and responsive click area.</td></tr><tr><td>Test Hover and Border Effects</td><td>Verify that hover colors and border settings are consistent with the overall design and provide clear interactive feedback.</td></tr></tbody></table>

#### Demo Tips

<table><thead><tr><th width="304">Tip</th><th>Description</th></tr></thead><tbody><tr><td>Real-Time Style Switching</td><td>Use interactive demos with buttons or sliders to let users modify close button properties and see the effect immediately.</td></tr><tr><td>Highlight Clickable Areas</td><td>Emphasize the clickable region through hover effects and dynamic border changes, particularly on touch-enabled devices.</td></tr><tr><td>Use Logging for Event Feedback</td><td>Implement event logging for CloseClicked to assist in debugging and demonstrating the removal process during demos.</td></tr></tbody></table>

This comprehensive documentation should help developers effectively integrate and customize the Close Button Customization feature of the SiticoneChip control, ensuring that chip removal interactions are both aesthetically pleasing and functionally robust.
