Separator
The Avonni Separator provides a horizontal line to separate and structure content visually
The Separator draws a horizontal or vertical dividing line between content sections. It can optionally display a label and an icon to provide context at the divider point. It has no interactions and no output variables.
Overview
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
Configuration
To configure it, click the component on the Flow screen. The Edit Separator Component panel opens on the right with two tabs: Properties and Style. The sections below mirror the Properties tab.
Properties
Label
Text displayed at the divider line. Leave blank for a plain line with no text.
Orientation
Direction of the divider: Horizontal (default) or Vertical.
Align Content
Position of the label and icon along the line: Start, Center (default), or End.
Icon
The Icon group adds an icon beside the label.
Icon Name
A Lightning Design System icon name (e.g., utility:info).
Icon Size
Size of the icon: Xx-Small, X-Small, Small (default), Medium, Large, X-Large, or Xx-Large.
Icon Source
A custom image URL to use instead of a standard icon.
Icon Variant
Shape of the icon container: Square (default) or Circle.
Icon Position
Where the icon appears relative to the label: Left or Right.
Styling
The Style tab gives you fine-grained control over the Separator's appearance. Configure it from the Style tab of the Edit Separator panel.
Controls the outer spacing around the separator, creating space between it and other elements on the screen.
Top / Right / Bottom / Left: Adjust the space on each side of the separator.
Controls the inner spacing between the separator's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Controls the separator's dimensions.
Width / Height: Set fixed dimensions for the separator.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Styles the separator's label text.
Color: Set the label color.
Font Size / Font Style / Font Weight: Control the label typography.
Styles the icon shown on the separator.
Background Color / Foreground Color: Set the icon's background and foreground colors.
Icon Radius: Control the roundness of the icon corners.
Color Border / Border Size / Border Style: Customize the border around the icon.
Customizes the separator's divider line.
Color: Set the line color.
Size: Adjust the line thickness.
Style: Choose a line style (e.g. solid, dashed, dotted).
Last updated
Was this helpful?