Button Group

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

<ButtonGroup>
  <Button variant="outline">Previous</Button>
  <Button variant="outline">Next</Button>
</ButtonGroup>

<ButtonGroup orientation="vertical">
  <Button variant="outline">Profile</Button>
  <Button variant="outline">Billing</Button>
  <Button variant="outline">Settings</Button>
</ButtonGroup>

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

<ButtonGroup>
  <Button variant="outline">Previous</Button>
  <Button variant="outline">Next</Button>
</ButtonGroup>

// 중첩 그룹은 gap-2 로 분리되어 툴바를 구성
<ButtonGroup>
  <ButtonGroup>
    <Button variant="outline" size="icon">B</Button>
    <Button variant="outline" size="icon">I</Button>
  </ButtonGroup>
  <ButtonGroup>
    <Button variant="outline">Left</Button>
    <Button variant="outline">Center</Button>
  </ButtonGroup>
</ButtonGroup>

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

<ButtonGroup>
  <Button>Save</Button>
  <ButtonGroupSeparator />
  <Button size="icon" aria-label="More">▾</Button>
</ButtonGroup>

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

<ButtonGroup>
  <ButtonGroupText>https://</ButtonGroupText>
  <Input placeholder="groudit.com" />
  <Button variant="outline">Go</Button>
</ButtonGroup>

<ButtonGroup>
  <Button variant="outline">Export</Button>
  <Select defaultValue="csv">
    <SelectTrigger className="rounded-l-none">
      <SelectValue />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="csv">CSV</SelectItem>
      <SelectItem value="json">JSON</SelectItem>
    </SelectContent>
  </Select>
</ButtonGroup>