ButtonGroupNested() — ui Function Reference

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

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ ButtonGroupNested() — ui Function Reference

Dependency Diagram

graph TD
  61c65c0d_ec1a_5256_d52e_d084ba72069c["ButtonGroupNested()"]
  75dc6f80_ab9b_bbd1_9f7b_6877758e50f5["button-group-nested.tsx"]
  61c65c0d_ec1a_5256_d52e_d084ba72069c -->|defined in| 75dc6f80_ab9b_bbd1_9f7b_6877758e50f5
  style 61c65c0d_ec1a_5256_d52e_d084ba72069c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/button-group-nested.tsx lines 16–39

export function ButtonGroupNested() {
  return (
    <ButtonGroup>
      <ButtonGroup>
        <Button variant="outline" size="icon">
          <PlusIcon />
        </Button>
      </ButtonGroup>
      <ButtonGroup>
        <InputGroup>
          <InputGroupInput placeholder="Send a message..." />
          <Tooltip>
            <TooltipTrigger asChild>
              <InputGroupAddon align="inline-end">
                <AudioLinesIcon />
              </InputGroupAddon>
            </TooltipTrigger>
            <TooltipContent>Voice Mode</TooltipContent>
          </Tooltip>
        </InputGroup>
      </ButtonGroup>
    </ButtonGroup>
  )
}