ButtonIconGroup

import { ButtonIconGroup } from "@fanvue/ui";
import type { ButtonIconGroupOrientation, ButtonIconGroupProps } from "@fanvue/ui";

import { ButtonIconGroup, HeartIcon, IconButton, ReplyIcon, ShareIcon } from "@fanvue/ui";

<ButtonIconGroup aria-label="Post actions">
  <IconButton key="like" variant="tertiary" size="48" icon={<HeartIcon />} aria-label="Like" />
  <IconButton
    key="reply"
    variant="tertiary"
    size="48"
    icon={<ReplyIcon />}
    aria-label="Reply"
  />
  <IconButton
    key="share"
    variant="tertiary"
    size="48"
    icon={<ShareIcon />}
    aria-label="Share"
  />
</ButtonIconGroup>

import { ButtonIconGroup, HeartIcon, IconButton, ReplyIcon, ShareIcon } from "@fanvue/ui";

<ButtonIconGroup aria-label="Post actions">
  <IconButton
    key="like"
    variant="secondary"
    size="40"
    icon={<HeartIcon />}
    aria-label="Like"
  />
  <IconButton
    key="reply"
    variant="secondary"
    size="40"
    icon={<ReplyIcon />}
    aria-label="Reply"
  />
  <IconButton
    key="share"
    variant="secondary"
    size="40"
    icon={<ShareIcon />}
    aria-label="Share"
  />
</ButtonIconGroup>

import { ButtonIconGroup, CopyIcon, EditIcon, IconButton, TrashBinIcon } from "@fanvue/ui";

<ButtonIconGroup aria-label="Editing tools">
  <IconButton
    key="edit"
    variant="tertiary"
    size="48"
    icon={<EditIcon />}
    aria-label="Edit"
    disabled
  />
  <IconButton
    key="copy"
    variant="tertiary"
    size="48"
    icon={<CopyIcon />}
    aria-label="Copy"
    disabled
  />
  <IconButton
    key="delete"
    variant="tertiary"
    size="48"
    icon={<TrashBinIcon />}
    aria-label="Delete"
    disabled
  />
</ButtonIconGroup>

import {
  ButtonIconGroup,
  ForwardIcon,
  IconButton,
  PauseIcon,
  PlayIcon,
  RepeatIcon,
} from "@fanvue/ui";

<ButtonIconGroup aria-label="Media controls">
  <IconButton key="play" variant="tertiary" size="48" icon={<PlayIcon />} aria-label="Play" />
  <IconButton
    key="pause"
    variant="tertiary"
    size="48"
    icon={<PauseIcon />}
    aria-label="Pause"
  />
  <IconButton
    key="forward"
    variant="tertiary"
    size="48"
    icon={<ForwardIcon />}
    aria-label="Skip forward"
  />
  <IconButton
    key="repeat"
    variant="tertiary"
    size="48"
    icon={<RepeatIcon />}
    aria-label="Repeat"
  />
</ButtonIconGroup>

import { ButtonIconGroup, CopyIcon, EditIcon, IconButton, TrashBinIcon } from "@fanvue/ui";

<ButtonIconGroup aria-label="Editing tools">
  <IconButton key="edit" variant="tertiary" size="48" icon={<EditIcon />} aria-label="Edit" />
  <IconButton key="copy" variant="tertiary" size="48" icon={<CopyIcon />} aria-label="Copy" />
  <IconButton
    key="delete"
    variant="tertiary"
    size="48"
    icon={<TrashBinIcon />}
    aria-label="Delete"
  />
</ButtonIconGroup>