Button Groups

import { Button } from "@/components/ui/button";

export default function Basic() {
  return (
    <>
      <div className="isolate flex -space-x-px">
        <Button variant="outline" className="rounded-r-none focus:z-10">
          Prev
        </Button>
        <Button variant="outline" className="rounded-l-none focus:z-10">
          Next
        </Button>
      </div>
      <div className="isolate flex -space-x-px">
        <Button variant="outline" className="rounded-r-none focus:z-10">
          Prev
        </Button>
        <Button variant="outline" className="rounded-none focus:z-10">
          Now
        </Button>
        <Button variant="outline" className="rounded-l-none focus:z-10">
          Next
        </Button>
      </div>
    </>
  );
}

import { Button } from "@/components/ui/button";
import { ChevronDown } from "@mynaui/icons-react";

export default function SplitButton() {
  return (
    <div className="flex -space-x-px">
      <Button variant="outline" className="rounded-r-none">
        Send Now
      </Button>
      <Button variant="outline" className="rounded-l-none">
        <ChevronDown className="size-4" />
      </Button>
    </div>
  );
}

import { Button } from "@/components/ui/button";
import {
  ChevronLeft,
  ChevronRight,
  TextAlignCenter,
  TextAlignLeft,
  TextAlignRight,
} from "@mynaui/icons-react";

export default function SharedBorder() {
  return (
    <>
      <div className="relative z-0 flex space-x-0.5 rounded border border-border p-1">
        <Button>
          <ChevronLeft className="size-5" />
        </Button>
        <Button variant="ghost">
          <ChevronRight className="size-5" />
        </Button>
      </div>
      <div className="relative z-0 flex space-x-0.5 rounded border border-border p-1">
        <Button>
          <TextAlignLeft className="size-5" />
        </Button>
        <Button variant="ghost">
          <TextAlignCenter className="size-5" />
        </Button>
        <Button variant="ghost">
          <TextAlignRight className="size-5" />
        </Button>
      </div>
    </>
  );
}

import { Button } from "@/components/ui/button";
import { BrandFacebook, BrandGithub, BrandGoogle } from "@mynaui/icons-react";

export default function ButtonGroups4() {
  return (
    <>
      <div className="isolate flex gap-2">
        <Button variant="outline">
          <BrandGoogle className="stroke-2" />
          Google
        </Button>
        <Button variant="outline">
          <BrandFacebook className="stroke-2" />
          Facebook
        </Button>
        <Button variant="outline">
          <BrandGithub className="stroke-2" />
          GitHub
        </Button>
      </div>
    </>
  );
}

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Badge } from "@/components/ui/badge";
import { ChevronDown, Eye, GitBranch, Star } from "@mynaui/icons-react";
import { Pin } from "@mynaui/icons-react";

export default function ButtonGroups5() {
  const [watchCount, setWatchCount] = useState(1);
  const [starCount, setStarCount] = useState(8);
  const [isPinned, setIsPinned] = useState(false);
  const [isWatching, setIsWatching] = useState(false);
  const [isStarred, setIsStarred] = useState(false);

  const handlePin = () => {
    setIsPinned(!isPinned);
  };

  const handleWatch = () => {
    if (!isWatching) {
      setWatchCount(watchCount + 1);
    } else {
      setWatchCount(Math.max(0, watchCount - 1));
    }
    setIsWatching(!isWatching);
  };

  const handleStar = () => {
    if (!isStarred) {
      setStarCount(starCount + 1);
    } else {
      setStarCount(Math.max(0, starCount - 1));
    }
    setIsStarred(!isStarred);
  };

  return (
    <div className="flex flex-wrap gap-2 p-4">
      <Button
        onClick={handlePin}
        variant={isPinned ? "default" : "outline"}
        className="flex items-center gap-2 h-9 px-4"
      >
        <Pin className="size-4 stroke-2" />
        <span>Pin</span>
      </Button>

      <div className="flex">
        <Button
          onClick={handleWatch}
          variant={isWatching ? "default" : "outline"}
          className="flex items-center gap-2 h-9 px-4 rounded-r-none border-r-0"
        >
          <Eye className="size-4 stroke-2" />
          <span>Watch</span>
          <Badge
            variant={isWatching ? "secondary" : "outline"}
            className="font-mono -me-1"
          >
            {watchCount}
          </Badge>
        </Button>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" className="h-9 px-2 rounded-l-none">
              <ChevronDown className="size-4 stroke-2" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem>Participating</DropdownMenuItem>
            <DropdownMenuItem>All Activity</DropdownMenuItem>
            <DropdownMenuItem>Ignore</DropdownMenuItem>
            <DropdownMenuItem>Custom</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

      <div className="flex">
        <Button
          variant="outline"
          className="flex items-center gap-2 h-9 px-4 rounded-r-none border-r-0"
        >
          <GitBranch className="size-4 stroke-2" />
          <span>Fork</span>
          <Badge
            variant="outline"
            className="font-mono -me-1"
          >
            14
          </Badge>
        </Button>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" className="h-9 px-2 rounded-l-none">
              <ChevronDown className="size-4 stroke-2" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem>Create a new fork</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

      <div className="flex">
        <Button
          onClick={handleStar}
          variant={isStarred ? "default" : "outline"}
          className="flex items-center gap-2 h-9 px-4 rounded-r-none border-r-0"
        >
          <Star
            className="size-4 stroke-2"
            fill={isStarred ? "currentColor" : "none"}
          />
          <span>Starred</span>
          <Badge
            variant={isStarred ? "secondary" : "outline"}
            className="font-mono -me-1"
          >
            {starCount}
          </Badge>
        </Button>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" className="h-9 px-2 rounded-l-none">
              <ChevronDown className="size-4 stroke-2" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem>Set repository to public</DropdownMenuItem>
            <DropdownMenuItem>Add to list</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  );
}