"use client";

import { ToggleGroup, ToggleGroupItem } from "@countryclub/ui-react";
import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from "lucide-react";

export default function ToggleGroupDemo() {
  return (
    // Single-select by default; pass `multiple` to allow several pressed items.
    <ToggleGroup defaultValue={["left"]} variant="outline">
      <ToggleGroupItem aria-label="Align left" value="left">
        <AlignLeftIcon />
      </ToggleGroupItem>
      <ToggleGroupItem aria-label="Align center" value="center">
        <AlignCenterIcon />
      </ToggleGroupItem>
      <ToggleGroupItem aria-label="Align right" value="right">
        <AlignRightIcon />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}
Toggle Group

Import

Default
