ButtonSize() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ButtonSize() — ui Function Reference

Dependency Diagram

graph TD
  542439a4_7728_db96_c73f_97bd1bbf29b3["ButtonSize()"]
  6b3e17de_fbee_c067_38cb_dbf5f8e587bb["button-size.tsx"]
  542439a4_7728_db96_c73f_97bd1bbf29b3 -->|defined in| 6b3e17de_fbee_c067_38cb_dbf5f8e587bb
  style 542439a4_7728_db96_c73f_97bd1bbf29b3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/examples/button-size.tsx lines 5–32

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