Button Group

import { Button, ButtonGroup } from "@glinui/ui"


export function Demo() {
  return (
    <div className="grid gap-3">
      <ButtonGroup variant="glinr" aria-label="Glinr"><Button>One</Button><Button>Two</Button></ButtonGroup>
      <ButtonGroup variant="solid" aria-label="Solid"><Button>One</Button><Button>Two</Button></ButtonGroup>
      <ButtonGroup variant="plain" aria-label="Plain"><Button>One</Button><Button>Two</Button></ButtonGroup>
      <ButtonGroup variant="outline" aria-label="Outline"><Button>One</Button><Button>Two</Button></ButtonGroup>
    </div>
  )
}

import { Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@glinui/ui"


// Glass needs a colorful or photographic backdrop to read.
export function Demo() {
  return (
    <ButtonGroup variant="glass" aria-label="Zoom">
      <Button>-</Button>
      <ButtonGroupText>100%</ButtonGroupText>
      <ButtonGroupSeparator />
      <Button>+</Button>
    </ButtonGroup>
  )
}

"use client"


import { useState } from "react"
import { Minus, Plus } from "@phosphor-icons/react"
import { Button, ButtonGroup } from "@glinui/ui"


export function ToggleStepper() {
  const [qty, setQty] = useState(2)
  return (
    <ButtonGroup aria-label="Quantity" variant="outline">
      <Button size="icon" aria-label="Decrease quantity" onClick={() => setQty((value) => Math.max(1, value - 1))}>
        <Minus weight="bold" />
      </Button>
      <Button aria-live="polite" tabIndex={-1} className="min-w-12 tabular-nums">{qty}</Button>
      <Button size="icon" aria-label="Increase quantity" onClick={() => setQty((value) => value + 1)}>
        <Plus weight="bold" />
      </Button>
    </ButtonGroup>
  )
}