ButtonGroupSize() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ ButtonGroupSize() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/examples/base/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>
  )
}