Spacer

tile/spacer

Adds an empty layout element that creates explicit space or flexible fill between sibling components.

Use a spacer to add explicit, invisible space between sibling components, or to push siblings apart so they sit at opposite edges of their container. A spacer is purely a layout element with no visible appearance and no semantic meaning.

A spacer expands along the parent’s main axis, which results in horizontal spacing inside a row, and vertical spacing inside a column.

To add a fixed amount of vertical space between stacked components, use tile/spacer as a child of tile/column.

1{
2    "definition": "tile/column",
3    "attributes": { "gap": "none" },
4    "children": [
5        { "definition": "tile/text", "attributes": { "text": "Account details" } },
6        { "definition": "tile/spacer", "attributes": { "size": "lg" } },
7        { "definition": "tile/text", "attributes": { "text": "Billing details" } }
8    ]
9}

To pin one component to the start and another to the end of a row, place a fill spacer between them.

1{
2    "definition": "tile/row",
3    "attributes": { "align": "center" },
4    "children": [
5        { "definition": "tile/text", "attributes": { "text": "Page Title", "variant": "h3" } },
6        { "definition": "tile/spacer", "attributes": { "size": "fill" } },
7        { "definition": "tile/button", "attributes": { "label": "Action" } }
8    ]
9}

Use size to control how much space the spacer occupies. Each renderer maps the fixed sizes to its own spacing scale, so exact pixel amounts vary across surfaces.

• xs: Extra small fixed space. Use for the tightest separation between closely related elements.
• sm: Small fixed space.
• md (default): Medium fixed space, the default.
• lg: Large fixed space.
• xl: Extra large fixed space. Use to set apart major sections.
• fill: Grows to consume all remaining space in the parent, pushing adjacent siblings to opposite edges. Multiple fill spacers in the same parent share the remaining space equally. For example, placing one on each side of an element centers it.

Consider these guidelines when working with spacers.

• For uniform spacing between all child content, use gap on the tile/row or tile/column parent container.
• Use a spacer for spacing or for fill behavior that gap can’t express.
• Use size: fill to push siblings to opposite edges of a row or column rather than guessing a fixed size that only works at one width.

Note any limitations that apply to this component.

No known limitations for tile/spacer in Slackbot.

No known limitations for tile/spacer in ChatGPT.

No known limitations for tile/spacer in Agentforce.

• HXL Lightning Types Reference
• HXL Playground: Spacer