ButtonGroupNested() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ButtonGroupNested() — ui Function Reference

Dependency Diagram

graph TD
  0bd9b154_6676_2e1e_6baf_58160c5918d8["ButtonGroupNested()"]
  7a4095c4_8b99_8cf4_6e4b_d1e837ede37b["button-group-nested.tsx"]
  0bd9b154_6676_2e1e_6baf_58160c5918d8 -->|defined in| 7a4095c4_8b99_8cf4_6e4b_d1e837ede37b
  style 0bd9b154_6676_2e1e_6baf_58160c5918d8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/examples/button-group-nested.tsx lines 8–38

export default function ButtonGroupNested() {
  return (
    <ButtonGroup>
      <ButtonGroup>
        <Button variant="outline" size="sm">
          1
        </Button>
        <Button variant="outline" size="sm">
          2
        </Button>
        <Button variant="outline" size="sm">
          3
        </Button>
        <Button variant="outline" size="sm">
          4
        </Button>
        <Button variant="outline" size="sm">
          5
        </Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button variant="outline" size="icon-sm" aria-label="Previous">
          <ArrowLeftIcon />
        </Button>
        <Button variant="outline" size="icon-sm" aria-label="Next">
          <ArrowRightIcon />
        </Button>
      </ButtonGroup>
    </ButtonGroup>
  )
}