button-group-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group-example",
  "title": "Button Group",
  "registryDependencies": [
    "button",
    "button-group",
    "dropdown-menu",
    "field",
    "input",
    "input-group",
    "label",
    "popover",
    "select",
    "tooltip",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-maia/examples/button-group-example.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-maia/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport { Label } from \"@/registry/radix-maia/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText asChild>\n            <Label htmlFor=\"input-text\">GPU Size</Label>\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeOffIcon\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                    phosphor=\"SpeakerSlashIcon\"\n                    remixicon=\"RiVolumeMuteLine\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                    phosphor=\"UserMinusIcon\"\n                    remixicon=\"RiUserUnfollowLine\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelect() {\n  const [currency, setCurrency] = useState(\"$\")\n\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select value={currency} onValueChange={setCurrency}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectGroup>\n                <SelectItem value=\"$\">$</SelectItem>\n                <SelectItem value=\"€\">€</SelectItem>\n                <SelectItem value=\"£\">£</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n              remixicon=\"RiArrowLeftRightLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n              remixicon=\"RiRefreshLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n                phosphor=\"MinusIcon\"\n                remixicon=\"RiSubtractLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button variant=\"outline\" asChild size=\"icon\" className=\"w-12\">\n          <span>1.2K</span>\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select defaultValue=\"hours\">\n          <SelectTrigger id=\"duration\">\n            <SelectValue placeholder=\"Select duration\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectGroup>\n              <SelectItem value=\"hours\">Hours</SelectItem>\n              <SelectItem value=\"days\">Days</SelectItem>\n              <SelectItem value=\"weeks\">Weeks</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconHeadphones\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                    remixicon=\"RiMicLine\"\n                  />\n                </InputGroupAddon>\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            remixicon=\"RiArrowLeftLine\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n              phosphor=\"MinusIcon\"\n              remixicon=\"RiSubtractLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n              phosphor=\"CopyIcon\"\n              remixicon=\"RiFileCopyLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n              phosphor=\"ShareIcon\"\n              remixicon=\"RiShareLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n              remixicon=\"RiArrowLeftRightLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n              remixicon=\"RiRefreshLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n              phosphor=\"TrashIcon\"\n              remixicon=\"RiDeleteBinLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}