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
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
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
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
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
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
Last updated
