Bar
Bars are horizontal visual dividers that separate content within sections or screens. Use Bar components to visually group related UI elements and create layout rhythm, especially between form blocks or content groups.
Properties
| Property | Value | Description |
|---|---|---|
| Type | Bar | UI component type |
| Group | Gap | Part of the layout spacing group |
| Identifier | 18 | Unique element ID |
| Preview | ✓ | See image preview above |
| Read-only | Y | Static element with no interactivity |
| Children | Does not contain nested elements | |
| Event | No event behavior | |
| Value | Not value-based | |
| Mandatory | Not applicable | |
| Error | Not applicable | |
| Min | Not applicable | |
| Max | Not applicable | |
| List | Not a list container | |
| Text, Icon | No label or icon | |
| Shade | May render as a shaded horizontal line |
Usage Example
<>
<Section title="Charges" />
<Edit label="Service" />
<Edit label="Amount" />
<Bar />
<Section title="Documents" />
</>
SDK Integration
The Visit Took Place wizard uses Bar components between the "Summary," "Charges," and "Documents" sections. These Bars do not contain data and serve as visual layout markers only.
Method: /account/reset-password
Use Bars to visually separate blocks without using additional headings or structural containers.
Example UI Placement
| Level | Reference | Type | Description |
|---|---|---|---|
2 | bar | Bar | Separates summary from charges |
2 | header-spacer | Spacer | Follows Bar for layout spacing |
2 | charges-header | Section | Charge section title |
Notes
- Do not use Bar to substitute for semantic structure.
- Use Spacer components before or after a Bar to adjust layout spacing.
- Combine with Section, Group, or Tabs for clean visual hierarchy.