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

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

Use `alert` for an inline message. `text` supplies the title, and children supply the description. The title appears beside a 16px icon. Set `variant="destructive"` for a warning icon and destructive colors. The element rejects `gap`; wrap multiple description elements in a `column`.

## Markup

```html
<column gap="12" width="380">
  <alert text="A new version of the shell is available.">
    <text wrap="true" foreground="text_muted">Restart the app to finish updating.</text>
  </alert>
  <alert text="Your session has expired. Sign in again." variant="destructive"></alert>
</column>
```

For a dismissible message, render the alert inside an `if` and clear the visibility flag from a button. Use [dialog](/docs/components/dialog), [drawer](/docs/components/drawer), or [sheet](/docs/components/sheet) for a modal message.

## Programmatic construction (Zig)

In a Zig view, the `canvas.Ui` builder constructs the same tree programmatically:

```zig
ui.column(.{ .gap = 12, .width = 380 }, .{
    ui.el(.alert, .{ .text = "A new version of the shell is available." }, .{
        ui.text(.{ .wrap = true, .style_tokens = .{ .foreground = .text_muted } }, "Restart the app to finish updating."),
    }),
    ui.el(.alert, .{ .text = "Your session has expired. Sign in again.", .variant = .destructive }, .{}),
})
```

## Attributes

| Attribute | Description                                                               |
| --------- | ------------------------------------------------------------------------- |
| `text`    | Text value for text-bearing elements; a literal or one \{binding}.        |
| `variant` | Visual variant: default\|primary\|secondary\|outline\|ghost\|destructive. |

---

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)