Spacer
Spacers add vertical or horizontal whitespace between elements. They do not accept user input, trigger events, or render visible content. Use spacers to control layout flow or alignment in structured UI blocks.
Properties
| Property | Value | Description |
|---|---|---|
| Type | Spacer | UI component type |
| Group | Gap | Belongs to the "Gap" layout group |
| Identifier | 45 | Unique element ID |
| Preview | ✓ | Represents a visual gap, not content |
| Value | No value field | |
| Mandatory | Optional element | |
| Error | No validation logic | |
| Min | No minimum constraint | |
| Max | No maximum constraint | |
| Read-only | Always static | |
| List | Not a list container | |
| Text, Icon | No labels or icons | |
| Children | No nested components | |
| Event | Does not trigger actions | |
| Shade | No background shading |
Usage Example
<Spacer height={16} />
SDK Integration
This element appears in the Availability Status Modal and aligns components that use the SDK method:
Method: /account/doctor/availability-status/cannot-be-changed
Displays a modal when availability cannot be saved due to account restrictions. The spacer separates action buttons and notices for visual clarity.
Example UI Placement
| Level | ID | Type | Value | Description |
|---|---|---|---|---|
1 | spacer | Spacer | — | Adds spacing between rows |
Notes
- Use multiple spacers to create grouped layout blocks.
- Avoid using spacers for fixed positioning. Prefer layout wrappers or containers.
- Does not impact accessibility or form behavior.