fix(perf): Button loading UX, iconOnly prop, requireConfirm pattern; AssetBadge fallback

[Anichris-koded]

Summary

Closes #211

Addresses all three issues from the description plus the perf fixes named in the issue title.

---

Changes

Button — 3 behaviour fixes + 1 perf fix

1. Loading state keeps label visible (spinner in icon slot)

Previously the spinner was injected next to children, causing layout shift on short labels. The spinner now occupies the leading icon slot and the label is always rendered in a <span> beside it — matching the GitHub-style pattern described in the issue.

Before: [spinner] Send would shift layout on short labels.
After: spinner in icon slot, label always visible beside it.

2. iconOnly prop — square button, no horizontal padding

<Button iconOnly size="sm" aria-label="Refresh"><RefreshIcon /></Button>

Applies h-N w-N (no px-) at all three sizes. Icon-only buttons now use the Button primitive consistently instead of raw <button> elements, giving them correct focus rings and hover states.

3. requireConfirm + confirmLabel — two-click confirmation

<Button variant="destructive" requireConfirm confirmLabel="Delete account?">
  Delete
</Button>

• First click: label switches to confirmLabel (default: "Are you sure?"), onClick is not fired
• Second click: onClick fires, state resets
• Blur: pending confirmation is cancelled (user tabbed/clicked away)

Perf: variants, sizes, iconOnlySizes hoisted to module scope — objects are never recreated on render.

---

AssetBadge — perf fix

getAssetColor previously returned { bg: "bg-surface-2", text: "text-ink-2" } as a new object literal on every call for unknown assets. A stable ASSET_COLOR_FALLBACK constant is now hoisted to module scope — same reference on every cache miss.

---

Badge — confirmed correct

variants and dots were already module-level constants. No change needed.

---

Acceptance criteria

Criterion	Evidence
Loading state keeps label visible with spinner in icon position	Test: keeps the label visible when loading ✅
iconOnly makes button square with no horizontal padding	Tests: applies square size classes, does not apply horizontal padding ✅
requireConfirm triggers two-click confirmation	Tests: does not fire onClick on first click, shows confirmLabel after first click, fires onClick on second click, resets on blur ✅
All existing Button usages work	SorobanInvokeButton 10/10 ✅
tsc --noEmit passes	exit 0 ✅

---

Test plan

npm test -- --run src/components/ui/Button.test.tsx src/components/AssetBadge.test.tsx src/components/ui/Badge.test.tsx

22 Button + 14 AssetBadge + 4 Badge = 40 tests, all passing.

[drips-wave]

@Anichris-koded Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits