# Separator

## **Setting Up Your Separator**

### **Adding a Label (Optional)**

* **Give your separator a descriptive label.** This is useful for providing context or headings for different sections of your page. For example, you might use a separator with the label "Customer Information" to clearly distinguish that section from other parts of the page.

### **Playing with Alignment**

* **Control the separator's position.** You can align the separator and its label to the:
  * **Start:** Left-aligned (for left-to-right languages).
  * **Center:** Centered on the page.
  * **End:** Right-aligned (for left-to-right languages).

### **Adding an Icon (Optional)**

* **Enhance the separator with a visual cue.** Choose an icon that complements the separator's purpose or the content it divides. You can position the icon to the left or right of the label.

## **Styling the Separator**

* **Fine-tune the separator's appearance:**
  * **Label:** Customize the label's font, size, color, and style.
  * **Icon:** Adjust the icon's size, color, and position.
  * **Border:** Customize the separator line's color, thickness, and style (solid, dashed, dotted).

## **No Interactions**

The Separator component is primarily a visual element, so it has no interactive features or actions.