Line
Line elements render a horizontal divider used to visually separate content blocks. Unlike the Bar or Spacer, a Line draws a distinct visual break without structural padding. It provides a simple and accessible way to delineate grouped UI content.
Properties
| Property | Value | Description |
|---|---|---|
| Type | Line | UI component type |
| Group | Gap | Belongs to the Gap group |
| Identifier | 29 | Unique element ID |
| Preview | ✓ | See image preview above |
| Read-only | Static display element | |
| Children | Not a container | |
| Event | Does not emit events | |
| Value | Not applicable | |
| Text, Icon | Not applicable | |
| Shade | No background fill |
Usage Example
<>
<Section title="Session Notes" />
<Regular>Details about the appointment...</Regular>
<Line />
<Section title="Charges" />
<Regular>Breakdown of cost and entries...</Regular>
</>
SDK Integration
The Message Chat View uses the Line element to visually separate blocks of incoming and outgoing messages, as well as to mark unread transitions. Linked to:
Method: /messages/user-chat
This route initializes the appointment support chat interface and inserts Line components as dividers across message history and content threads.
Example UI Placement
| Level | ID | Type | Description |
|---|---|---|---|
2 | new-message-line (top) | Line | Divider above unread banner |
2 | new-message-line (bottom) | Line | Divider below unread banner |
1 | line (divider) | Line | Message group separator |
Notes
- Use to divide sections inside scrollable or chat views.
- Combine with
Spacerfor extra margin above or below. - Does not support interactivity, text, or icons.