Dividers

The Styled Divider (Horizontal) and Styled Divider (Vertical) widgets create a thin line to visually separate content. While they are two separate widgets in the builder, they share the same styling options. This guide covers the properties for both.

Watch this on Youtube: https://www.youtube.com/watch?v=JOc4ugYcv8U

Core Concept: Horizontal vs. Vertical

The primary difference between the two widgets is their orientation and how they are used in layouts.

• Styled Divider (Horizontal): Use this to separate content vertically (e.g., between items in a Column).

• Styled Divider (Vertical): Use this to separate content horizontally (e.g., between items in a Row).

Using a Horizontal Divider in a Column and a Vertical Divider in a Row.

---

Properties

The Divider's properties are grouped by function.

Layout & Sizing

Property	Description
Thickness	The thickness of the divider line in pixels.
Indent	The amount of empty space at the beginning of the divider (left for horizontal, top for vertical).
End Indent	The amount of empty space at the end of the divider (right for horizontal, bottom for vertical).
Height	The total vertical space the widget occupies. Applicable to the Horizontal Divider.
Width	The total horizontal space the widget occupies. Applicable to the Vertical Divider.

Visual explanation of the Thickness, Indent, and End Indent properties.

Line Style

Property	Description
Line Style	The pattern of the divider line. Options are Solid, Dashed, or Dotted.
Dash Pattern	A custom pattern for dashed lines, defined as an array of dash lengths and gap lengths (e.g., [4, 2] for a 4px dash followed by a 2px gap). Only available when Line Style is Dashed.
Stroke Cap	The style for the ends of the line segments. Options are Butt (flat), Round, or Square. Not applicable when Line Style is Dotted.

Examples of Solid, Dashed, and Dotted line styles.

Color & Fill

You can style the divider with either a solid color or a gradient.

Property	Description
Color	The solid color of the divider.
Gradient	The gradient configuration for the divider. Allows for multi-color effects.

Dividers can be styled with a solid Color or a Gradient.

---

Default Properties

The Divider widget supports all Default Properties.

Use Cases (Horizontal & Vertical)

You’ll typically use a Divider when you want to separate content visually without using heavy borders or boxes.

Horizontal Divider – Use Cases

• Between list items

  • Order list, settings list, notifications list, profile options.

• Section breaks in a page

  • Split “Profile Info”, “Preferences”, “Security” sections.

• Form grouping

  • Separate different form groups (Personal Info vs Payment Info).

• Summary vs details

  • Line between a header/summary row and detailed content below.

Vertical Divider – Use Cases

• Between actions in a row

  • “Call | Message | Block” style actions.

• Split layout

  • Separate two panels: e.g., filters on left, results on right (in wider layouts).

• Toolbar or header actions

  • Visually group icons or buttons in a top bar or bottom bar.