Separator

The Separator component helps you visually divide sections of your user interface, improving organization and readability. It's like drawing a clear line between different parts of your content.

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.