Separator¶

The Separator widget draws a thin line between parts of a page. Use it to mark where one group of content ends and the next begins, for example between a summary block and the table below it, or between two buttons in a row.

See also Spacer for empty space without a line, and Section for grouping content in a card.

Using it¶

Drop a Separator between two widgets. By default it draws a horizontal line that takes the full width. For a vertical line between two side-by-side widgets, set Orientation to Vertical and place the separator inside a row-direction Container, so it has a height to fill.

Options¶

Option	Values	Default	Description
Orientation	Horizontal · Vertical	Horizontal	Which way the line runs
Line thickness	Any CSS length	From theme	The line's height when horizontal, or width when vertical
Line color	Palette or custom	From theme	The colour of the line
Margin / Padding	Any CSS unit	None	Space around the line
Box Style	Sizing and spacing	Minimum height 10px	The box the line sits in

Tips¶

A few things to keep in mind:

A vertical separator needs a container with a height. Put it inside a row-direction Container, not directly on the page.
For blank space with no visible line, use Spacer.