Button | GistUI

Preview

Loading preview…

$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.

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.

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

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

<GistUI :source="answer" :components="{ Button: MyButton }" />

<GistUI source={answer} components={{ Button: MyButton }} />

<GistUI source={answer()} components={{ Button: MyButton }} />

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

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

See Custom components for the full contract. Style hook: [data-gistui="Button"].