Flexible space to separate content within a layout.
Preview
code
1[A] ─────────── [B]Usage
go
1node := models.WidgetNode{2 Type: models.WidgetNodeTypeSpacer,3 MinSize: 16,4}Props
| Name | Type | Description | Default |
|---|---|---|---|
type | "spacer" | Node type | required |
minSize | number | string | Minimum size the spacer should occupy along the flex direction | - |
Examples
Push Items Apart
go
1{2 Type: models.WidgetNodeTypeRow,3 Children: []models.WidgetNode{4 {Type: models.WidgetNodeTypeBadge, Label: "Left", Variant: "secondary"},5 {Type: models.WidgetNodeTypeSpacer, MinSize: 16},6 {Type: models.WidgetNodeTypeBadge, Label: "Right", Variant: "secondary"},7 },8}Flexible Space
When used without minSize, the spacer will expand to fill available space:
go
1{2 Type: models.WidgetNodeTypeRow,3 Children: []models.WidgetNode{4 {Type: models.WidgetNodeTypeText, Value: "Title"},5 {Type: models.WidgetNodeTypeSpacer},6 {Type: models.WidgetNodeTypeButton, Label: "Action"},7 },8}TypeScript
typescript
1const node: WidgetNode = {2 type: "spacer",3 minSize: 16,4}Best Practices
- Use in Row layouts - Most useful for horizontal spacing
- Prefer gap for uniform spacing - Use
gapon Row/Col for consistent spacing - Use for push layouts - Perfect for "left/right" or "header/actions" layouts