Separator
The Avonni 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, optionally accompanied by a label and an icon.
Overview
The Separator is primarily a visual element. Use it to break a page into clearly delineated sections — for example, a separator with the label "Customer Information" makes that section stand out from the rest of the page. You can control its orientation, the alignment of its content, and enhance it with an icon.
Configuration
To configure the Separator, select it on the canvas. The Edit Separator panel opens on the right with the configuration tabs. The sections below mirror the Properties tab from top to bottom.
Content
Label
Give your separator a descriptive label. This is the text to display in the separator. It's 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.
Orientation
Set the orientation of the component. Choose between Horizontal (default) and Vertical.
Align Content
Control the position of the content in the separator. You can align the separator and its label to the:
Start: Left-aligned (for left-to-right languages).
Center: Centered on the page (default).
End: Right-aligned (for left-to-right languages).
Icon
Enhance the separator with a visual cue. Choose an icon that complements the separator's purpose or the content it divides.
Icon Name
The Lightning Design System name of the icon to display.
Icon Size
The size of the icon. Choose from Xxs, Xs, Small (default), Medium, or Large. Available once an Icon Name is set.
Icon Source
A URL to a custom image to use instead of a standard icon (.apng, .avif, .gif, .jpg, .jpeg, .png, .svg, .webp).
Icon Variant
The shape of the icon. Choose between Circle and Square (default).
Icon Position
Describes the position of the icon — to the Left (default) or Right of the label. Available once an Icon Name is set.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Styling
Configure the Separator's appearance from the Style tab of the Edit Separator panel.
Controls the outer spacing around the separator.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing around the separator.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the separator's dimensions.
Width / Height: Set fixed dimensions.
Styles the separator label.
Color / Font Size / Font Style / Font Weight: Set the label color and typography.
Styles an icon shown on the separator.
Background Color / Foreground Color: Set the icon colors.
Color Border / Border Size / Border Style / Radius: Customize the icon border.
Styles the separator line.
Color / Size / Style: Set the line color, thickness, and style.
Last updated
Was this helpful?