ButtonSize() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ ButtonSize() — ui Function Reference

Dependency Diagram

graph TD
  21ff2acd_1ac5_f5d3_e3c8_062ba6ff5af6["ButtonSize()"]
  1196e73c_c50b_f0f2_5cf0_c75f25843755["button-size.tsx"]
  21ff2acd_1ac5_f5d3_e3c8_062ba6ff5af6 -->|defined in| 1196e73c_c50b_f0f2_5cf0_c75f25843755
  style 21ff2acd_1ac5_f5d3_e3c8_062ba6ff5af6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/button-size.tsx lines 4–39

export default function ButtonSize() {
  return (
    <div className="flex flex-col items-start gap-8 sm:flex-row">
      <div className="flex items-start gap-2">
        <Button size="xs" variant="outline">
          Extra Small
        </Button>
        <Button size="icon-xs" aria-label="Submit" variant="outline">
          <ArrowUpRightIcon />
        </Button>
      </div>
      <div className="flex items-start gap-2">
        <Button size="sm" variant="outline">
          Small
        </Button>
        <Button size="icon-sm" aria-label="Submit" variant="outline">
          <ArrowUpRightIcon />
        </Button>
      </div>
      <div className="flex items-start gap-2">
        <Button variant="outline">Default</Button>
        <Button size="icon" aria-label="Submit" variant="outline">
          <ArrowUpRightIcon />
        </Button>
      </div>
      <div className="flex items-start gap-2">
        <Button variant="outline" size="lg">
          Large
        </Button>
        <Button size="icon-lg" aria-label="Submit" variant="outline">
          <ArrowUpRightIcon />
        </Button>
      </div>
    </div>
  )
}