Dashes
Dashes are decorative dividers that visually separate structured content within a section. This element helps group financial rows or details in a layout, especially when highlighting a subtotal before showing a final amount.
Properties
| Property | Value | Description |
|---|---|---|
| Type | Dashes | UI component type |
| Group | Gap | Belongs to the "Gap" group in UI catalog |
| Identifier | 8 | Unique element ID |
| Preview | ✓ | See image preview above |
| Value | Not user-editable | |
| Mandatory | Not required for input | |
| Error | Does not show error states | |
| Min | No defined minimum | |
| Max | No defined maximum | |
| Read-only | Always static | |
| Text, Icon | No label or icon | |
| Children | Cannot nest elements | |
| Event | Does not trigger interactive events | |
| Shade | Does not apply shaded styling |
Usage Example
This divider appears between subtotal and total in the Charges section of the Appointment Details screen:
[Appointment fee] [Spacer]
[Subtotal (Highlight)]
[Dashes]
[Total label]
[Total (Highlight)]
SDK Integration
The Appointment Details screen includes this element.
Method: /profile/appointments/{id}/details
Used in the Charges section to visually segment subtotals from the total line.
Example UI Placement
| Level | ID | Type | Description |
|---|---|---|---|
4 | - | Dashes | Divider before total line in Charges section |
Notes
- Purely visual divider
- Commonly used in financial breakdowns
- Does not require input or configuration