ButtonGroupSize() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ButtonGroupSize() — ui Function Reference

Dependency Diagram

graph TD
  6111c2cf_ba6d_435a_aa99_1d9c97aa6178["ButtonGroupSize()"]
  fb2e0800_d13a_ac3b_c95c_f22a3cf315ac["button-group-size.tsx"]
  6111c2cf_ba6d_435a_aa99_1d9c97aa6178 -->|defined in| fb2e0800_d13a_ac3b_c95c_f22a3cf315ac
  style 6111c2cf_ba6d_435a_aa99_1d9c97aa6178 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/examples/button-group-size.tsx lines 6–47

export default function ButtonGroupSize() {
  return (
    <div className="flex flex-col items-start gap-8">
      <ButtonGroup>
        <Button variant="outline" size="sm">
          Small
        </Button>
        <Button variant="outline" size="sm">
          Button
        </Button>
        <Button variant="outline" size="sm">
          Group
        </Button>
        <Button variant="outline" size="icon-sm">
          <PlusIcon />
        </Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button variant="outline">Default</Button>
        <Button variant="outline">Button</Button>
        <Button variant="outline">Group</Button>
        <Button variant="outline" size="icon">
          <PlusIcon />
        </Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button variant="outline" size="lg">
          Large
        </Button>
        <Button variant="outline" size="lg">
          Button
        </Button>
        <Button variant="outline" size="lg">
          Group
        </Button>
        <Button variant="outline" size="icon-lg">
          <PlusIcon />
        </Button>
      </ButtonGroup>
    </div>
  )
}