Click counter#
Click or use the keyboard to update an application-owned counter.
button := tree.ID(page, "button")
if f.Button(button, "Click me").Self(flex.Start).Clicked() {
state.clicks++
}Six variants#
Production button variants share the same click counter.
f.Grid(128).Gap(12).Children(func() {
f.Button(tree.ID(page, "default"), "Default").Clicked()
f.Button(tree.ID(page, "destructive"), "Destructive").Destructive().Clicked()
f.Button(tree.ID(page, "outline"), "Outline").Outline().Clicked()
f.Button(tree.ID(page, "secondary"), "Secondary").Secondary().Clicked()
f.Button(tree.ID(page, "ghost"), "Ghost").Ghost().Clicked()
f.Button(tree.ID(page, "link"), "Link").Link().Clicked()
})Disabled variants#
Disabled controls keep their semantics and cannot activate.
f.Grid(128).Gap(12).Children(func() {
f.Button(tree.ID(page, "default"), "Default").Disabled(true).Clicked()
f.Button(tree.ID(page, "destructive"), "Destructive").Destructive().Disabled(true).Clicked()
f.Button(tree.ID(page, "outline"), "Outline").Outline().Disabled(true).Clicked()
f.Button(tree.ID(page, "secondary"), "Secondary").Secondary().Disabled(true).Clicked()
f.Button(tree.ID(page, "ghost"), "Ghost").Ghost().Disabled(true).Clicked()
f.Button(tree.ID(page, "link"), "Link").Link().Disabled(true).Clicked()
})Installation
Copy the recipe into your own project.
go run ./cmd/viva add --out ./components/local buttonUsage#
flex.Frame.Button declares a labeled hit region and paints a source-owned button. Keep the stable ID across repaints; Clicked reports activation in the same declaration.
- Default, Secondary, Outline, Ghost, Destructive and Link share the same interaction model.
- Buttons measure their label by default; set Width to reserve a fixed size.
- XSmall, Small, Large and icon sizes are explicit options. Icon-only controls still need an accessible name.
Keyboard & state#
Tab moves focus; Enter or Space activates the focused enabled button. Pointer focus does not paint a keyboard focus ring.
- Disabled controls cannot activate and are excluded from focus traversal.
- Hover, press and focus are read from Canvas, not stored as duplicate application state.
Keyboard
Use Tab to move between controls and Ctrl/⌘ K to search the catalog. Inside a preview, the Go runtime handles keyboard input.