---
title: "Button"
description: "Do: runs steps, opens:dialog, close, href link; else sends its label."
---

> Documentation Index
> Fetch the complete documentation index at: https://gistui.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Button

```gistui
$n = 0
root = Stack(Buttons(Button("Primary"), Button("Secondary", v:secondary), Button("Ghost", v:ghost), Button("Delete", v:danger, icon:alert-triangle)), Row(Button("Count up", do:[@set($n, $n + 1)], v:accent), "Pressed **" + $n + "** times", align:center, gap:md))
```

A button without `do:` sends its label to `onAction`. With `do:` it runs the steps in order.

## Signature

This is the line a model reads in the system prompt.

```gistui
Button(label, do:[@step…], opens:Dialog, type:button|submit|reset|draft, v:primary|accent|secondary|ghost|link|danger, icon:Icon2, href:str, size:Size, close, full, iconOnly, disabled)
```

- **Group:** Forms
- **Children:** No
- **Positional arguments:** `label` (a trailing `?` means it may be left out)

## Props

| Prop | Type | How to write it | Notes |
|---|---|---|---|
| `label` | string | positional, required |  |
| `do` | action list | named: `do:…` | steps run on click |
| `opens` | component (Dialog) | named: `opens:…` | id of a Dialog to open |
| `close` | flag | bare word: `close` | closes the dialog it is in |
| `type` | `button` · `submit` · `reset` · `draft` | named: `type:…` | in a Form, primary buttons submit |
| `v` | `primary` · `accent` · `secondary` · `ghost` · `link` · `danger` | named: `v:…` | Default `"primary"`. |
| `icon` | name (open list) | named: `icon:…` | Also accepts `money`, `revenue`, `price`, `cost`, `payment`, `chart`, `analytics`, `trend`, `growth`, `decline`, `people`, `team`, `customers`, `person`, `company`, `office`, `location`, `place`, `travel`, `flight`, `food`, `restaurant`, `time`, `date`, `email`, `chat`, `security`, `idea`, `ai`, `launch`, `speed`, `energy`, `warning`, `error`, `success`, `video`, `movie`, `streaming`, `game`, `education`, `nature`, `health`, `legal`, `document`, `photo`, `shop`, `shopping`, `house`, `storage`, `api`, `winner`, `goal`, `sunny`, `clear`, `cloudy`, `partly-cloudy`, `rain`, `rainy`, `snow`, `storm`, `thunder`, `temperature`, `takeoff`, `departure`, `landing`, `arrival`, `baggage`, `seat`, `bag`. |
| `href` | string | named: `href:…` |  |
| `size` | `sm` · `md` · `lg` | named: `size:…` | Also accepts `small`, `medium`, `large`. |
| `full` | flag | bare word: `full` |  |
| `iconOnly` | flag | bare word: `iconOnly` | hides the label (kept as tooltip): icon buttons, swatches |
| `disabled` | flag | bare word: `disabled` |  |

## Use your own component

Keep the name and schema, swap what is drawn. The prompt and the model's output do not change.

### React

```tsx
import { ui } from "@gistui/react/ui";

const lib = ui.extend({ Button: MyButton });
<GistUI library={lib} stream={response.body} />;
```
### Vue

```vue
<GistUI :source="answer" :components="{ Button: MyButton }" />
```
### Svelte

```svelte
<GistUI source={answer} components={{ Button: MyButton }} />
```
### Solid

```tsx
<GistUI source={answer()} components={{ Button: MyButton }} />
```
### Vanilla

```ts
import { ui } from "@gistui/vanilla/ui";

const lib = ui.extend({ Button: (ctx) => ({ el: myElement(ctx) }) });
```

See [Custom components](/docs/guides/custom-components/) for the full contract. Style hook: `[data-gistui="Button"]`.

Source: https://gistui.com/docs/components/forms/button/index.mdx