Button Group

 1"use client";
 2
 3import {
 4  IconChevronLeft,
 5  IconCopy,
 6  IconDots,
 7  IconFileExport,
 8  IconHistory,
 9  IconShare3,
10  IconTrash,
11} from "@tabler/icons-react";
12import {
13  ButtonGroup,
14  ButtonGroupItem,
15  ButtonGroupMenu,
16  ButtonGroupMenuContent,
17  ButtonGroupMenuItem,
18  ButtonGroupMenuLabel,
19  ButtonGroupMenuSeparator,
20  ButtonGroupMenuTrigger,
21  ButtonGroupSeparator,
22} from "@/components/wensity/button-group";
23
24export function DraftActions() {
25  return (
26    <ButtonGroup aria-label="Draft actions">
27      <ButtonGroupItem size="icon" aria-label="Previous draft">
28        <IconChevronLeft />
29      </ButtonGroupItem>
30      <ButtonGroupSeparator />
31      <ButtonGroupItem>Save draft</ButtonGroupItem>
32      <ButtonGroupSeparator />
33      <ButtonGroupItem>Publish</ButtonGroupItem>
34      <ButtonGroupSeparator />
35      <ButtonGroupItem>Share</ButtonGroupItem>
36      <ButtonGroupSeparator />
37      <ButtonGroupMenu>
38        <ButtonGroupMenuTrigger size="icon" aria-label="More draft actions">
39          <IconDots />
40        </ButtonGroupMenuTrigger>
41        <ButtonGroupMenuContent align="end">
42          <ButtonGroupMenuLabel>Draft</ButtonGroupMenuLabel>
43          <ButtonGroupMenuItem icon={<IconCopy />} shortcut="Cmd+D">
44            Duplicate
45          </ButtonGroupMenuItem>
46          <ButtonGroupMenuItem icon={<IconHistory />}>
47            Version history
48          </ButtonGroupMenuItem>
49          <ButtonGroupMenuItem icon={<IconFileExport />}>
50            Export as PDF
51          </ButtonGroupMenuItem>
52          <ButtonGroupMenuSeparator />
53          <ButtonGroupMenuItem icon={<IconShare3 />}>
54            Copy invite link
55          </ButtonGroupMenuItem>
56          <ButtonGroupMenuSeparator />
57          <ButtonGroupMenuItem destructive icon={<IconTrash />}>
58            Delete draft
59          </ButtonGroupMenuItem>
60        </ButtonGroupMenuContent>
61      </ButtonGroupMenu>
62    </ButtonGroup>
63  );
64}

 1import { IconChevronDown, IconMessageCircle } from "@tabler/icons-react";
 2import {
 3  ButtonGroup,
 4  ButtonGroupItem,
 5  ButtonGroupMenu,
 6  ButtonGroupMenuContent,
 7  ButtonGroupMenuItem,
 8  ButtonGroupMenuTrigger,
 9  ButtonGroupSeparator,
10} from "@/components/wensity/button-group";
11
12export function ConversationActions() {
13  return (
14    <ButtonGroup aria-label="Conversation actions">
15      <ButtonGroupItem leftIcon={<IconMessageCircle />}>
16        Message
17      </ButtonGroupItem>
18      <ButtonGroupSeparator />
19      <ButtonGroupMenu>
20        <ButtonGroupMenuTrigger size="icon" aria-label="Conversation options">
21          <IconChevronDown />
22        </ButtonGroupMenuTrigger>
23        <ButtonGroupMenuContent align="end">
24          <ButtonGroupMenuItem>Rename thread</ButtonGroupMenuItem>
25          <ButtonGroupMenuItem>Copy thread link</ButtonGroupMenuItem>
26        </ButtonGroupMenuContent>
27      </ButtonGroupMenu>
28    </ButtonGroup>
29  );
30}

 1import {
 2  IconChevronLeft,
 3  IconChevronRight,
 4  IconLayoutSidebarLeftCollapse,
 5  IconLayoutSidebarRightCollapse,
 6} from "@tabler/icons-react";
 7import {
 8  ButtonGroup,
 9  ButtonGroupItem,
10  ButtonGroupSeparator,
11} from "@/components/wensity/button-group";
12
13export function PanelActions() {
14  return (
15    <ButtonGroup aria-label="Panel layout">
16      <ButtonGroupItem size="icon" aria-label="Collapse left panel">
17        <IconLayoutSidebarLeftCollapse />
18      </ButtonGroupItem>
19      <ButtonGroupSeparator />
20      <ButtonGroupItem size="icon" aria-label="Previous item">
21        <IconChevronLeft />
22      </ButtonGroupItem>
23      <ButtonGroupSeparator />
24      <ButtonGroupItem size="icon" aria-label="Next item">
25        <IconChevronRight />
26      </ButtonGroupItem>
27      <ButtonGroupSeparator />
28      <ButtonGroupItem size="icon" aria-label="Collapse right panel">
29        <IconLayoutSidebarRightCollapse />
30      </ButtonGroupItem>
31    </ButtonGroup>
32  );
33}

 1import {
 2  ButtonGroup,
 3  ButtonGroupItem,
 4  ButtonGroupSeparator,
 5} from "@/components/wensity/button-group";
 6
 7export function ButtonGroupVariants() {
 8  return (
 9    <ButtonGroup aria-label="View density">
10      <ButtonGroupItem>Default</ButtonGroupItem>
11      <ButtonGroupSeparator />
12      <ButtonGroupItem variant="secondary">Secondary</ButtonGroupItem>
13      <ButtonGroupSeparator />
14      <ButtonGroupItem variant="ghost">Ghost</ButtonGroupItem>
15    </ButtonGroup>
16  );
17}

 1import {
 2  ButtonGroup,
 3  ButtonGroupItem,
 4  ButtonGroupSeparator,
 5} from "@/components/wensity/button-group";
 6
 7export function VerticalActions() {
 8  return (
 9    <ButtonGroup orientation="vertical" aria-label="Stacked actions">
10      <ButtonGroupItem>Rename</ButtonGroupItem>
11      <ButtonGroupSeparator orientation="horizontal" />
12      <ButtonGroupItem>Duplicate</ButtonGroupItem>
13      <ButtonGroupSeparator orientation="horizontal" />
14      <ButtonGroupItem variant="destructive">Delete</ButtonGroupItem>
15    </ButtonGroup>
16  );
17}