Separator

A Separator is a line that creates visual and semantic separation between UI elements or sections.

What the Avonni Separator does

The Separator component visually separates the content into distinct sections. It commonly groups related items or provides a page's visual hierarchy. The separator component is a horizontal line spanning the container's width. It is a simple but effective way to organize and structure content.

---

Changing the Properties

Adding a label

The label field represents the text you want to display in the separator.

Playing with alignment

The separator content can be positioned with values that include start, center and end.

Adding an icon

An icon can be added next to the separator label. The position can be set by changing the Icon Position property.

---

Adding Interactions

No interactions are available.

---

Styling the Separator

From the Styles panel, you can customize styling attributes for the Separator:

• Label: to customize the styling settings of the label.

• Icon: to customize the styling settings of the icon.

• Border: to customize the styling settings of the border line.

You can find the instructions for styling here.

Examples

Property	Value
Label	TODAY
Align Content	Center
Icon Name	standard:service_appointment_capacity_usage
Icon Size	Medium
Icon Position	Left
Style / Label Color	#107cad
Style / Font Size	20px
Style / Font Weight	700 - Bold
Style / Icon Background Color	#2e844a
Style / Border Size	2px
Style / Border Color	#107cad
Style / Border Style	Solid

---

Specifications

Attributes

Name	Type	Description
alignContent	String	Position of the content in the separator. Valid values include start, center and end.
iconName	String	The name of the icon to be used in the format 'utility:down'.
iconPosition	String	Describes the position of the icon. Valid values include left and right.
iconSize	String	The size of the icon. Options include xx-small, x-small, small, medium and large.
label	String	Text to display in the separator.

Events

No events are available.

Styling Hooks

Label

Name	Description
Text Color	Define a text color for the label text
Font Size	Define a font size for the label text
Font Style	Define a font style for the label text
Font Weight	Define a font weight for the label text

Icon

Name	Description
Background Color	Define a background color for the icon
Foreground Color	Define a foreground color for the icon
Foreground Color Default	Define a foreground color default for the icon
Border Radius	Define a border radius size for the icon

Border

Name	Description
Border Color	Define a border color for the border
Border Size	Define a border size for the border
Border Style	Define a border style for the border