gsxui

Button-group

Basic

42
// Package buttongroup holds the site's example gsx components for
// ui/button-group.
package buttongroup

import (
	"github.com/gsxhq/gsxui/ui"
	"github.com/gsxhq/gsxui/ui/icon"
)

// Basic renders four realistic groups: a horizontal outline pair (NO
// separator — adjacent outline buttons already share a single hairline via
// the border-l-0 collapse; inserting a ButtonGroupSeparator there stacks
// the button's own border on top of the separator's 1px and doubles the
// divider), a secondary pair split by a ButtonGroupSeparator (shadcn's own
// button-group-separator demo shape: the separator exists for borderLESS
// variants), a quantity stepper showing ButtonGroupText between two icon
// buttons, and a vertical secondary pair split by a horizontal separator.
component Basic() {
	<div class="flex flex-wrap items-start gap-6">
		<ui.ButtonGroup>
			<ui.Button variant="outline">Archive</ui.Button>
			<ui.Button variant="outline">Report</ui.Button>
		</ui.ButtonGroup>
		<ui.ButtonGroup>
			<ui.Button variant="secondary">Copy</ui.Button>
			<ui.ButtonGroupSeparator/>
			<ui.Button variant="secondary">Paste</ui.Button>
		</ui.ButtonGroup>
		<ui.ButtonGroup aria-label="Quantity">
			<ui.Button variant="outline" size="icon" aria-label="Decrease quantity">
				<icon.Minus/>
			</ui.Button>
			<ui.ButtonGroupText>42</ui.ButtonGroupText>
			<ui.Button variant="outline" size="icon" aria-label="Increase quantity">
				<icon.Plus/>
			</ui.Button>
		</ui.ButtonGroup>
		<ui.ButtonGroup orientation="vertical" aria-label="Media controls" class="h-fit">
			<ui.Button variant="secondary" size="icon">
				<icon.Plus/>
			</ui.Button>
			<ui.ButtonGroupSeparator orientation="horizontal"/>
			<ui.Button variant="secondary" size="icon">
				<icon.Minus/>
			</ui.Button>
		</ui.ButtonGroup>
	</div>
}

RTL

42
package buttongroup

import (
	"github.com/gsxhq/gsxui/ui"
	"github.com/gsxhq/gsxui/ui/icon"
)

// Rtl mirrors Basic's outline-pair and quantity-stepper groups, translated
// to Arabic and wrapped in dir="rtl" — the back-arrow icon flips via
// rtl:rotate-180 like shadcn's own button-group-rtl demo. That upstream
// demo also nests a DropdownMenu (with a radio-group submenu) inside a
// ButtonGroup; gsxui's button-group example set doesn't compose
// dropdown-menu (see Basic), so this example keeps the two established
// group shapes instead of introducing that composition here.
component Rtl() {
	<div dir="rtl" lang="ar" class="flex flex-wrap items-start gap-6">
		<ui.ButtonGroup>
			<ui.Button variant="outline" size="icon" aria-label="Go Back">
				<icon.ArrowLeft class="rtl:rotate-180"/>
			</ui.Button>
		</ui.ButtonGroup>
		<ui.ButtonGroup>
			<ui.Button variant="outline">أرشفة</ui.Button>
			<ui.Button variant="outline">تقرير</ui.Button>
		</ui.ButtonGroup>
		<ui.ButtonGroup aria-label="Quantity">
			<ui.Button variant="outline" size="icon" aria-label="Decrease quantity">
				<icon.Minus/>
			</ui.Button>
			<ui.ButtonGroupText>42</ui.ButtonGroupText>
			<ui.Button variant="outline" size="icon" aria-label="Increase quantity">
				<icon.Plus/>
			</ui.Button>
		</ui.ButtonGroup>
	</div>
}