⬜

Spacer

Empty spacing element. Size controlled via layout.size.

type: "spacer"atomsleaf

16dp Height

Vertical spacer between two items

Above spacer

Below spacer

{
  "type": "column",
  "data": {
    "children": [
      {
        "type": "text",
        "data": {
          "value": "Above spacer",
          "ui": {
            "style": {
              "typography": {
                "style": "body2Regular"
              }
            }
          }
        }
      },
      {
        "type": "spacer",
        "data": {
          "ui": {
            "layout": {
              "size": {
                "height": 16
              }
            }
          }
        }
      },
      {
        "type": "text",
        "data": {
          "value": "Below spacer",
          "ui": {
            "style": {
              "typography": {
                "style": "body2Regular"
              }
            }
          }
        }
      }
    ],
    "ui": {
      "style": {
        "background": {
          "palette": "neutral",
          "shade": 50
        },
        "cornerRadius": 8
      },
      "layout": {
        "padding": {
          "all": 12
        }
      }
    }
  }
}

Quick Start

{
  "type": "spacer",
  "data": {}
}

Style Fields

Layout Fields

Parent Layout Fields

Examples

Fill Width, 8dp Height

Horizontal spacer strip

{
  "type": "spacer",
  "data": {
    "ui": {
      "style": {
        "background": {
          "palette": "neutral",
          "shade": 100
        }
      },
      "layout": {
        "size": {
          "width": "fill",
          "height": 8
        }
      }
    }
  }
}

24×24 Fixed

Square spacer block

{
  "type": "spacer",
  "data": {
    "ui": {
      "style": {
        "background": {
          "palette": "primary",
          "shade": 50
        },
        "cornerRadius": 4
      },
      "layout": {
        "size": {
          "width": 24,
          "height": 24
        }
      }
    }
  }
}

Divider

Box