Button Group

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

const ButtonGroupDemo = () => (
  <ButtonGroup>
    <ButtonGroup className="hidden sm:flex">
      <Button variant="outline" size="icon" aria-label="Go Back">
        <ArrowLeftIcon />
      </Button>
    </ButtonGroup>
    <ButtonGroup>
      <Button variant="outline">Archive</Button>
      <ButtonGroupSeparator />
      <Button variant="outline">Report</Button>
    </ButtonGroup>
  </ButtonGroup>
);

export default ButtonGroupDemo;

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

const ButtonGroupDemo = () => (
  <ButtonGroup>
    <ButtonGroup className="hidden sm:flex">
      <Button variant="outline" size="icon" aria-label="Go Back">
        <ArrowLeftIcon />
      </Button>
    </ButtonGroup>
    <ButtonGroup>
      <Button variant="outline">Archive</Button>
      <ButtonGroupSeparator />
      <Button variant="outline">Report</Button>
    </ButtonGroup>
  </ButtonGroup>
);

export default ButtonGroupDemo;

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

const ButtonGroupWithInputDemo = () => (
  <ButtonGroup className="w-full max-w-md">
    <Input placeholder="With Input" />
    <ButtonGroupSeparator />
    <Button variant="outline">Search</Button>
  </ButtonGroup>
);

export default ButtonGroupWithInputDemo;

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

const ButtonGroupSmallSizeDemo = () => (
  <ButtonGroup>
    <Button size="sm" variant="outline">
      Small Size
    </Button>
    <ButtonGroupSeparator />
    <Button size="sm" variant="outline">
      Small Size
    </Button>
  </ButtonGroup>
);

export default ButtonGroupSmallSizeDemo;

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

const ButtonGroupLargeSizeDemo = () => (
  <ButtonGroup>
    <Button size="lg" variant="outline">
      Large Size
    </Button>
    <ButtonGroupSeparator />
    <Button size="lg" variant="outline">
      Large Size
    </Button>
  </ButtonGroup>
);

export default ButtonGroupLargeSizeDemo;

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

const ButtonGroupWithDisabledButtonDemo = () => (
  <ButtonGroup>
    <Button variant="outline">Enabled</Button>
    <ButtonGroupSeparator />
    <Button disabled variant="outline">
      With Disabled Button
    </Button>
  </ButtonGroup>
);

export default ButtonGroupWithDisabledButtonDemo;

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

const ButtonGroupWithStartLabeledTextDemo = () => (
  <ButtonGroup>
    <ButtonGroupText>View</ButtonGroupText>
    <ButtonGroupSeparator />
    <Button variant="outline">Month</Button>
    <ButtonGroupSeparator />
    <Button variant="outline">Week</Button>
  </ButtonGroup>
);

export default ButtonGroupWithStartLabeledTextDemo;

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

const ButtonGroupWithEndTextDemo = () => (
  <ButtonGroup>
    <Button variant="outline">Save</Button>
    <ButtonGroupSeparator />
    <ButtonGroupText>With End Text</ButtonGroupText>
  </ButtonGroup>
);

export default ButtonGroupWithEndTextDemo;

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

const ButtonGroupVertical = () => (
  <ButtonGroup orientation="vertical">
    <Button variant="outline">Vertical</Button>
    <ButtonGroupSeparator orientation="horizontal" />
    <Button variant="outline">Vertical</Button>
    <ButtonGroupSeparator orientation="horizontal" />
    <Button variant="outline">Vertical</Button>
  </ButtonGroup>
);

export default ButtonGroupVertical;

import { PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
import { Input } from "../ui/input";

const ButtonGroupNestedGroupsDemo = () => (
  <ButtonGroup>
    <ButtonGroup>
      <Button variant="outline" size="icon">
        <PlusIcon />
      </Button>
    </ButtonGroup>
    <ButtonGroup>
      <Input placeholder="Send a message..." />
    </ButtonGroup>
  </ButtonGroup>
);

export default ButtonGroupNestedGroupsDemo;

import { ChevronDownIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  ButtonGroup,
  ButtonGroupSeparator,
} from "@/components/ui/button-group";
import {
  Popover,
  PopoverAnchor,
  PopoverDescription,
  PopoverPopup,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover";

const ButtonGroupWithPopupDemo = () => (
  <Popover>
    <PopoverAnchor>
      <ButtonGroup>
        <Button variant="outline">With Popup</Button>
        <ButtonGroupSeparator />
        <PopoverTrigger asChild>
          <Button variant="outline">
            <ChevronDownIcon />
          </Button>
        </PopoverTrigger>
      </ButtonGroup>
    </PopoverAnchor>
    <PopoverPopup className="space-y-1">
      <PopoverTitle>Popup Actions</PopoverTitle>
      <PopoverDescription>
        Quick actions in a grouped trigger.
      </PopoverDescription>
    </PopoverPopup>
  </Popover>
);

export default ButtonGroupWithPopupDemo;

import { SearchIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  ButtonGroup,
  ButtonGroupSeparator,
} from "@/components/ui/button-group";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group";

const ButtonGroupWithInputGroupDemo = () => (
  <InputGroup className="w-full max-w-md">
    <InputGroupAddon>
      <InputGroupText>
        <SearchIcon />
      </InputGroupText>
    </InputGroupAddon>
    <InputGroupInput placeholder="With Input Group" />
    <InputGroupAddon align="inline-end">
      <ButtonGroup>
        <Button size="sm" variant="outline">
          Prev
        </Button>
        <ButtonGroupSeparator />
        <Button size="sm" variant="outline">
          Next
        </Button>
      </ButtonGroup>
    </InputGroupAddon>
  </InputGroup>
);

export default ButtonGroupWithInputGroupDemo;

import { ChevronDownIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  ButtonGroup,
  ButtonGroupSeparator,
} from "@/components/ui/button-group";
import { Menu, MenuItem, MenuPopup, MenuTrigger } from "@/components/ui/menu";

const ButtonGroupWithMenuDemo = () => (
  <Menu>
    <MenuTrigger asChild>
      <ButtonGroup>
        <Button variant="outline">With Menu</Button>
        <ButtonGroupSeparator />
        <Button variant="outline">
          <ChevronDownIcon />
        </Button>
      </ButtonGroup>
    </MenuTrigger>
    <MenuPopup>
      <MenuItem value="rename">Rename</MenuItem>
      <MenuItem value="duplicate">Duplicate</MenuItem>
      <MenuItem value="archive">Archive</MenuItem>
    </MenuPopup>
  </Menu>
);

export default ButtonGroupWithMenuDemo;