ButtonGroup

Attached controls: one shared border, square inner corners.

Children sit edge-to-edge — neighbors overlap by 1dp so their borders collapse to a single line, inner corners render square, and only the group's outer corners keep the radius. Slots hold buttons, a separator seam, or any widget (an input) with flex weight.

Installation

Use the module import (the default), or own the source: lotusui add vendors the component into your app and lotusui update keeps the copy mergeable — see Registry.

go get github.com/ikaito-com/lotusui

# or vendor the source into your app:
go run github.com/ikaito-com/lotusui/cmd/lotusui add button-group

Usage

open demo ↗

lotusui.ButtonGroup(th, lotusui.ButtonGroupProps{},
	lotusui.ButtonGroupItem{Btn: &archive, Label: "Archive", Props: lotusui.ButtonProps{Variant: lotusui.ButtonOutline}},
	lotusui.ButtonGroupItem{Btn: &report, Label: "Report", Props: lotusui.ButtonProps{Variant: lotusui.ButtonOutline}},
	lotusui.ButtonGroupItem{Btn: &snooze, Label: "Snooze", Props: lotusui.ButtonProps{Variant: lotusui.ButtonOutline}},
)

Orientation

Vertical stacks the group top-to-bottom.

open demo ↗

lotusui.ButtonGroup(th, lotusui.ButtonGroupProps{Vertical: true}, plus, minus)

Sizes

Size the items — the group follows.

open demo ↗

lotusui.ButtonGroupItem{Btn: &b, Label: "Small",
	Props: lotusui.ButtonProps{Variant: lotusui.ButtonOutline, Size: lotusui.SizeSM}}

Separator

ButtonGroupSeparator() renders the hairline seam between attached neighbors.

open demo ↗

lotusui.ButtonGroup(th, lotusui.ButtonGroupProps{},
	copyItem, lotusui.ButtonGroupSeparator(), pasteItem)

Split

The split button: a main action and an attached icon action across a seam.

open demo ↗

lotusui.ButtonGroup(th, lotusui.ButtonGroupProps{},
	mainItem, lotusui.ButtonGroupSeparator(), iconItem)

With input

A flexed Widget slot carries any control — the search-and-go row.

open demo ↗

lotusui.ButtonGroup(th, lotusui.ButtonGroupProps{},
	lotusui.ButtonGroupItem{Flex: 1, Widget: searchInput},
	lotusui.ButtonGroupItem{Btn: &go_, Props: lotusui.ButtonProps{Variant: lotusui.ButtonOutline, IconStart: lotusui.IconSearch}},
)

API

Option	Type	Description
`ButtonGroupProps.Vertical`	`bool`	Stack the group top-to-bottom.
`ButtonGroupItem.Btn / Label / Props`	`…`	A button slot; the group sets Props.Attached.
`ButtonGroupItem.Separator`	`bool`	The hairline seam (ButtonGroupSeparator()).
`ButtonGroupItem.Widget / Flex`	`layout.Widget / float32`	Arbitrary content; flexed weight.
`ButtonProps.Attached`	`AttachedEdges`	Squares the corners on attached sides — set by the group.