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
  9703c515_714c_bd91_1828_88e0095ec46f["ButtonSize()"]
  2bb0e86d_b508_b8f7_12ec_3268de3c1af3["button-size.tsx"]
  9703c515_714c_bd91_1828_88e0095ec46f -->|defined in| 2bb0e86d_b508_b8f7_12ec_3268de3c1af3
  style 9703c515_714c_bd91_1828_88e0095ec46f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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