---
title: Spacer
url: "https://native-sdk.dev/docs/components/spacer"
docs_index: /llms.txt
lastUpdated: 2026-10-16
---

> For an index of all documentation, see [/llms.txt](/llms.txt).

Use `spacer` for empty space between siblings. `grow` fills unused space on the main axis, which can push toolbar actions to the trailing edge. Set `width` or `height` for a fixed gap. Use [separator](/docs/components/separator) for a visible dividing line.

## Markup

```html
<panel width="340" padding="12">
  <row gap="12" cross="center">
    <text>Docs</text>
    <text foreground="text_muted">Source</text>
    <spacer grow="1"></spacer>
    <button size="sm" variant="secondary" on-press="open_changelog">Changelog</button>
  </row>
</panel>
```

## Programmatic construction (Zig)

In a Zig view, the `canvas.Ui` builder constructs the same tree programmatically. `ui.spacer(1)` is the builder shorthand for a grow-1 spacer.

```zig
ui.panel(.{ .width = 340, .padding = 12 }, .{
    ui.row(.{ .gap = 12, .cross = .center }, .{
        ui.text(.{}, "Docs"),
        ui.text(.{ .style_tokens = .{ .foreground = .text_muted } }, "Source"),
        ui.spacer(1),
        ui.button(.{ .size = .sm, .variant = .secondary, .on_press = .open_changelog }, "Changelog"),
    }),
})
```

## Attributes

| Attribute | Description                                                                                                                                      |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `width`   | Definite width (plain number): the element is exactly this wide; content neither shrinks nor overflows it. On resizable it is the initial width. |
| `height`  | Definite height (plain number): the element is exactly this tall; content neither shrinks nor overflows it.                                      |
| `grow`    | Flex grow factor; give spacer one.                                                                                                               |

---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)