ButtonDemo() — ui Function Reference

Architecture documentation for the ButtonDemo() function in button-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ ButtonDemo() — ui Function Reference

Dependency Diagram

graph TD
  b723ad27_d792_6ee7_a7ba_bbc28356ec3f["ButtonDemo()"]
  141a627a_c0ab_2ebc_73e5_0812309026d9["button-demo.tsx"]
  b723ad27_d792_6ee7_a7ba_bbc28356ec3f -->|defined in| 141a627a_c0ab_2ebc_73e5_0812309026d9
  style b723ad27_d792_6ee7_a7ba_bbc28356ec3f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/button-demo.tsx lines 5–105

export function ButtonDemo() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-wrap items-center gap-2 md:flex-row">
        <Button size="xs">Extra Small</Button>
        <Button variant="outline" size="xs">
          Outline
        </Button>
        <Button variant="ghost" size="xs">
          Ghost
        </Button>
        <Button variant="destructive" size="xs">
          Destructive
        </Button>
        <Button variant="secondary" size="xs">
          Secondary
        </Button>
        <Button variant="link" size="xs">
          Link
        </Button>
        <Button variant="outline" size="xs">
          <SendIcon /> Send
        </Button>
      </div>
      <div className="flex flex-wrap items-center gap-2 md:flex-row">
        <Button size="sm">Small</Button>
        <Button variant="outline" size="sm">
          Outline
        </Button>
        <Button variant="ghost" size="sm">
          Ghost
        </Button>
        <Button variant="destructive" size="sm">
          Destructive
        </Button>
        <Button variant="secondary" size="sm">
          Secondary
        </Button>
        <Button variant="link" size="sm">
          Link
        </Button>
        <Button variant="outline" size="sm">
          <SendIcon /> Send
        </Button>
      </div>
      <div className="flex flex-wrap items-center gap-2 md:flex-row">
        <Button>Button</Button>
        <Button variant="outline">Outline</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="destructive">Destructive</Button>
        <Button variant="secondary">Secondary</Button>
        <Button variant="link">Link</Button>
        <Button variant="outline">
          <SendIcon /> Send
        </Button>
        <Button variant="outline">
          Learn More <ArrowRightIcon />
        </Button>
        <Button disabled variant="outline">
          <Loader2Icon className="animate-spin" />
          Please wait
        </Button>
      </div>
      <div className="flex flex-wrap items-center gap-2 md:flex-row">
        <Button size="lg">Large</Button>
        <Button variant="outline" size="lg">
          Outline
        </Button>
        <Button variant="ghost" size="lg">
          Ghost
        </Button>
        <Button variant="destructive" size="lg">
          Destructive
        </Button>
        <Button variant="secondary" size="lg">
          Secondary
        </Button>
        <Button variant="link" size="lg">
          Link
        </Button>
        <Button variant="outline" size="lg">