ButtonGroupNested() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ButtonGroupNested() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/button-group-example.tsx lines 447–482

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 render={<InputGroupAddon align="inline-end" />}>
                <IconPlaceholder
                  lucide="AudioLinesIcon"
                  tabler="IconHeadphones"
                  hugeicons="AudioWave01Icon"
                  phosphor="MicrophoneIcon"
                  remixicon="RiMicLine"
                />
              </TooltipTrigger>
              <TooltipContent>Voice Mode</TooltipContent>
            </Tooltip>
          </InputGroup>
        </ButtonGroup>
      </ButtonGroup>
    </Example>
  )
}