button-group-basic-demo

1import {
2  ArchiveIcon,
3  EditIcon,
4  EllipsisIcon,
5  FilesIcon,
6  FilmIcon,
7  ShareIcon,
8  TrashIcon,
9} from "lucide-react";
10
11import { Button } from "@/registry/pure-ui/ui/button";
12import { ButtonGroup } from "@/registry/pure-ui/ui/button-group";
13import {
14  Menu,
15  MenuItem,
16  MenuPopup,
17  MenuTrigger,
18} from "@/registry/pure-ui/ui/menu";
19
20export function ButtonGroupBasicDemo() {
21  return (
22    <ButtonGroup aria-label="File actions">
23      <Button variant="outline">
24        <FilesIcon />
25        Files
26      </Button>
27      <Button variant="outline">
28        <FilmIcon />
29        Media
30      </Button>
31      <Menu>
32        <MenuTrigger
33          render={<Button aria-label="Menu" size="icon" variant="outline" />}
34        >
35          <EllipsisIcon className="size-4" />
36        </MenuTrigger>
37        <MenuPopup align="end">
38          <MenuItem>
39            <EditIcon />
40            Edit
41          </MenuItem>
42          <MenuItem>
43            <ArchiveIcon />
44            Archive
45          </MenuItem>
46          <MenuItem>
47            <ShareIcon />
48            Share
49          </MenuItem>
50          <MenuItem>
51            <TrashIcon />
52            Delete
53          </MenuItem>
54        </MenuPopup>
55      </Menu>
56    </ButtonGroup>
57  );
58}