---
title: Status Bar
url: "https://native-sdk.dev/docs/components/status-bar"
docs_index: /llms.txt
lastUpdated: 2026-10-16
---

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

Use `status-bar` for a text status line. It accepts text content with model interpolation and no child elements. Place it after a growing content area in the root column to position it at the bottom of the window.

## Markup

```html
<column grow="1">
  <column grow="1" padding="32" main="center" cross="center">
    <text foreground="text_muted">Window content</text>
  </column>
  <status-bar>Ready — 3 notes synced</status-bar>
</column>
```

## Programmatic construction (Zig)

In a Zig view, the `canvas.Ui` builder constructs the same tree programmatically. The builder models it as a text leaf: `ui.statusBar(options, text)`.

```zig
ui.column(.{ .grow = 1 }, .{
    ui.column(.{ .grow = 1, .padding = 32, .main = .center, .cross = .center }, .{
        ui.text(.{ .style_tokens = .{ .foreground = .text_muted } }, "Window content"),
    }),
    ui.statusBar(.{}, "Ready — 3 notes synced"),
})
```

## Attributes

| Attribute        | Description                                                                                                                                                                                                                                                                                   |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `text`           | Text value for text-bearing elements; a literal or one \{binding}.                                                                                                                                                                                                                            |
| `text-alignment` | Horizontal alignment of text content: start\|center\|end. Consumed by text (plain and wrapped), status-bar, and surface titles; controls that own their label placement (button, badge) ignore it. On a bubble's reactions child it names the pill's dock (end is the default trailing dock). |

---

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)