ButtonGroupNested() — ui Function Reference

Architecture documentation for the ButtonGroupNested() function in button-group-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ButtonGroupNested() — ui Function Reference

Dependency Diagram

graph TD
  2a347ad9_256d_1eba_ebb7_858be857bd91["ButtonGroupNested()"]
  2a9b7ea2_138d_8063_c68e_fb0dd1342c8c["button-group-example.tsx"]
  2a347ad9_256d_1eba_ebb7_858be857bd91 -->|defined in| 2a9b7ea2_138d_8063_c68e_fb0dd1342c8c
  style 2a347ad9_256d_1eba_ebb7_858be857bd91 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/button-group-example.tsx lines 429–466

function ButtonGroupNested() {
  return (
    <Example title="Nested">
      <ButtonGroup>
        <ButtonGroup>
          <Button variant="outline" size="icon">
            <IconPlaceholder
              lucide="PlusIcon"
              tabler="IconPlus"
              hugeicons="PlusSignIcon"
              phosphor="PlusIcon"
              remixicon="RiAddLine"
            />
          </Button>
        </ButtonGroup>
        <ButtonGroup>
          <InputGroup>
            <InputGroupInput placeholder="Send a message..." />
            <Tooltip>
              <TooltipTrigger asChild>
                <InputGroupAddon align="inline-end">
                  <IconPlaceholder
                    lucide="AudioLinesIcon"
                    tabler="IconHeadphones"
                    hugeicons="AudioWave01Icon"
                    phosphor="MicrophoneIcon"
                    remixicon="RiMicLine"
                  />
                </InputGroupAddon>
              </TooltipTrigger>
              <TooltipContent>Voice Mode</TooltipContent>
            </Tooltip>
          </InputGroup>
        </ButtonGroup>
      </ButtonGroup>
    </Example>
  )
}