Skip to content

ButtonGroup: connected buttons

Build connected buttons with ButtonGroup. This page includes a runnable example, all props, and behavior constraints.

Complete example

Complete environment setup first. Copy this complete main.go and run go run ..

go
package main

import (
	"github.com/dxui-org/dxui"
	"log"
)

func main() {
	choice := "A"
	app := dxui.NewApp(dxui.AppOptions{
		Title:      "ButtonGroup",
		Width:      640,
		Height:     480,
		Background: dxui.RGBA(248, 250, 252, 255),
	})
	if err := app.Run(func() dxui.View {
		return dxui.Box(
			dxui.BoxProps{
				Gap: 16,
				Style: dxui.Style{
					Padding: dxui.Padding(24),
				},
			},
			dxui.Box(
				dxui.BoxProps{
					Gap: 12,
				},
				dxui.Label(choice),
				dxui.ButtonGroup(
					dxui.ButtonGroupProps{
						Dividers: true,
					},
					dxui.TextButton(
						dxui.ButtonProps{
							OnPress: func() {
								choice = "A"
							},
						},
						"A",
					),
					dxui.TextButton(
						dxui.ButtonProps{
							OnPress: func() {
								choice = "B"
							},
						},
						"B",
					),
				),
			),
		)
	}); err != nil {

		log.Fatal(err)
	}
}

Parameters and API

go
func ButtonGroup(props ButtonGroupProps, buttons ...View) View
FieldTypePurpose, defaults, and constraints
KeystringStable unique identity within one parent; empty by default. Use business IDs in dynamic lists, not changing indices.
StyleStyleLocal layout, paint, and text styling; zero uses intrinsic sizes and theme defaults.
TokenComponentTokenComponent theme entry; empty selects its default.
StatesStateStylesPaint patches for actual interaction states; cannot fabricate state or change layout.
PointerPointerBehaviorDefaults to PointerAuto; PointerNone excludes the entire subtree from pointer participation, unlike Disabled.
OrientationButtonGroupOrientationDefaults to horizontal; see behavior below.
DividersboolDefaults to false; true draws themed separators.

Behavior and limitations

Accepts only Button (including TextButton), with zero children allowed. Horizontal without dividers by default; ButtonGroupVertical selects vertical. Dividers overlaps theme borders so each shared edge is painted once. No group focus; buttons retain Disabled, callbacks, and source-order Tab behavior. No arrow navigation. Vertical auto-width aligns to the widest button; explicit child Width wins.

All components share identity, style, and pointer rules. See full declarations for referenced enums, structs, and comments. Running examples explains build verification.