گروه دکمه‌ها (Button Group)

1import { Button, ButtonGroup } from "@/components/ui/button-group";
2
3export default function BasicExample() {
4  return (
5    <ButtonGroup>
6      <Button>دکمه ۱</Button>
7      <Button>دکمه ۲</Button>
8    </ButtonGroup>
9  );
10}
11

1import { Button, ButtonGroup } from "@/components/ui/button-group";
2
3export default function OrientationExample() {
4  return (
5    <div className="flex flex-col gap-4">
6      <ButtonGroup orientation="horizontal">
7        <Button>چپ</Button>
8        <Button>وسط</Button>
9        <Button>راست</Button>
10      </ButtonGroup>
11
12      <ButtonGroup orientation="vertical">
13        <Button>بالا</Button>
14        <Button>وسط</Button>
15        <Button>پایین</Button>
16      </ButtonGroup>
17    </div>
18  );
19}
20

1import {
2  Button,
3  ButtonGroup,
4  ButtonGroupSeparator,
5} from "@/components/ui/button-group";
6
7export default function SeparatorExample() {
8  return (
9    <ButtonGroup>
10      <Button variant="outline">آرشیو</Button>
11      <ButtonGroupSeparator />
12      <Button variant="outline">حذف</Button>
13    </ButtonGroup>
14  );
15}
16

1import { ChevronDown } from "lucide-react";
2import {
3  Button,
4  ButtonGroup,
5  ButtonGroupSeparator,
6} from "@/components/ui/button-group";
7
8export default function SplitExample() {
9  return (
10    <ButtonGroup>
11      <Button>اقدام اصلی</Button>
12      <ButtonGroupSeparator />
13      <Button variant="outline" aria-label="گزینه‌های بیشتر">
14        <ChevronDown className="w-4 h-4" />
15      </Button>
16    </ButtonGroup>
17  );
18}
19

1import { Button, ButtonGroup, Input } from "@/components/ui/button-group";
2
3export default function InputExample() {
4  return (
5    <ButtonGroup>
6      <Button variant="outline">جستجو</Button>
7      <Input placeholder="عبارت مورد نظر را وارد کنید..." className="max-w-xs" />
8    </ButtonGroup>
9  );
10}
11