Button Group

"use client";

import { ButtonGroup, ButtonGroupItem } from "@/components/miyuki-ui/button-group";

export default function ButtonGroupDemo() {
  return (
    <ButtonGroup
      aria-label="Forecast range"
      selectionMode="single"
      disallowEmptySelection
      defaultSelectedKeys={["week"]}
    >
      <ButtonGroupItem id="day">Day</ButtonGroupItem>
      <ButtonGroupItem id="week">Week</ButtonGroupItem>
      <ButtonGroupItem id="month">Month</ButtonGroupItem>
    </ButtonGroup>
  );
}

"use client";

import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";
import { ButtonGroup, ButtonGroupItem } from "@/components/miyuki-ui/button-group";

export default function ButtonGroupIconsDemo() {
  return (
    <ButtonGroup aria-label="Text alignment" selectionMode="multiple" defaultSelectedKeys={["left"]}>
      <ButtonGroupItem id="left" aria-label="Align left" iconStart={<AlignLeft aria-hidden="true" />} />
      <ButtonGroupItem id="center" aria-label="Align centre" iconStart={<AlignCenter aria-hidden="true" />} />
      <ButtonGroupItem id="right" aria-label="Align right" iconStart={<AlignRight aria-hidden="true" />} />
    </ButtonGroup>
  );
}

"use client";

import { ChevronDown, Save } from "lucide-react";
import { Button } from "@/components/miyuki-ui/button";
import { ButtonGroup } from "@/components/miyuki-ui/button-group";

export default function ButtonGroupSplitDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4">
      <ButtonGroup aria-label="Save route">
        <Button iconStart={<Save aria-hidden="true" />}>Save</Button>
        <Button aria-label="More ways to save" iconStart={<ChevronDown aria-hidden="true" />} />
      </ButtonGroup>
      <ButtonGroup aria-label="Save draft">
        <Button variant="secondary">Save draft</Button>
        <Button variant="secondary" aria-label="More ways to save" iconStart={<ChevronDown aria-hidden="true" />} />
      </ButtonGroup>
    </div>
  );
}