Button groups

A joined row of buttons that share an inset-ring border; useful for tab-like toggles or paired prev/next controls.

Preview

React preview

LiveView (HEEx)

alias DesignSystem.UI.ButtonGroups

<ButtonGroups.button_group>
  <:item phx-click="years">Years</:item>
  <:item phx-click="months">Months</:item>
  <:item phx-click="days">Days</:item>
</ButtonGroups.button_group>

<ButtonGroups.button_group>
  <:item phx-click="prev" sr_label="Previous">
    <.icon name="hero-chevron-left-mini" class="size-5" />
  </:item>
  <:item phx-click="next" sr_label="Next">
    <.icon name="hero-chevron-right-mini" class="size-5" />
  </:item>
</ButtonGroups.button_group>

React (JSX)

import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid"
import { ButtonGroup } from "../ui/index.mjs"

<ButtonGroup
  items={[
    { label: "Years", onClick: onYears },
    { label: "Months", onClick: onMonths },
    { label: "Days", onClick: onDays },
  ]}
/>

<ButtonGroup
  items={[
    { srLabel: "Previous", label: <ChevronLeftIcon className="size-5" />, onClick: onPrev },
    { srLabel: "Next",     label: <ChevronRightIcon className="size-5" />, onClick: onNext },
  ]}
/>