Button

Build a shadcn/ui Button component styled for the **Clinic Admin** design system.

**Brand tokens:**
- Primary color: #70C4CA (Clinic Teal) — use for primary variant background; text must be white (#FFFFFF)
- Secondary surface: #F3F4F6 — for secondary variant; text #353D4A
- Destructive: #F7A9AA (Blush Pink) — for destructive variant; text #5c1e1f
- Outline/ghost border: use teal (#70C4CA) for outline stroke; ghost has no background
- Border radius: 10px (default), 8px (sm), 12px (lg)
- Font: Nunito Sans, 14px, weight 600

**Variants to implement:** primary | secondary | outline | ghost | destructive | link
**Sizes:** xs, sm, default, lg, icon-xs, icon-sm, icon, icon-lg (square icon buttons)

**Design preview to replicate exactly:**
- Size: Rows of outline buttons — "Extra Small" + icon-xs, "Small" + icon-sm, "Default" + icon, "Large" + icon-lg
- Default: primary button label "Button"
- Outline: label "Outline", Secondary: "Secondary", Ghost: "Ghost", Destructive: "Destructive", Link: "Link"
- Icon: outline icon button with plus icon, aria-label "Add"
- With Icon: outline sm button with arrow icon + "New Branch"
- Default (fallback): "Book Appointment" (primary), "Secondary", "View Report" (outline), "Cancel" (ghost), "Delete Record" (destructive)

Return a complete React component with TypeScript props (variant, size, disabled, asChild, className). Use shadcn/ui Button as the base with cn() for class merging and Tailwind CSS for all styles.