ButtonGroupSize() — ui Function Reference

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

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ ButtonGroupSize() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/examples/radix/button-group-size.tsx lines 5–46

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>
  )
}