fix(perf): AssetBadge ASSET_COLORS lookup in render causes new object per render, Badge variants object recreated, Button sizes object recreated

[k-deejah]

Problem

Three issues in the Button component affect the loading indicator, icon-only usage, and the destructive variant context.

1. Button loading spinner replaces the button label text — users lose context

When loading={true}, the spinner renders and children still render beside it. But if the button label is short (e.g. "Send"), the spinner + "Send" layout shifts the text. A pattern where the spinner overlays the icon position and the label remains visible (like GitHub's buttons) would be less disorienting.

2. No icon-only Button variant or size modifier

Button has no iconOnly prop that removes horizontal padding and makes the button square. Icon-only buttons (like the FeeEstimator refresh button) use raw <button> elements with custom classes instead of the Button primitive, leading to inconsistent focus styles and hover states.

3. destructive variant has no confirm UX pattern built in

The destructive variant is used for dangerous actions (delete, reset). There is no built-in optional two-step confirmation (like the disconnect button proposal in issue #18). An onClickConfirm pattern where the button switches to "Are you sure?" on first click would standardise dangerous action patterns.

Solution

1. Change the loading state to render the spinner in place of a leading icon slot, keeping the label visible.
2. Add iconOnly?: boolean prop that applies aspect-square and removes horizontal padding.
3. Add requireConfirm?: boolean and confirmLabel?: string props to Button that trigger the two-click pattern.

Acceptance Criteria

• Loading state keeps the button label visible with spinner in icon position
• iconOnly prop makes button square with no horizontal padding
• requireConfirm triggers two-click confirmation pattern
• All existing Button usages work correctly after changes
• npm run build and tsc --noEmit pass

---

Note for Contributors: Write a clear PR description. Include before/after screenshots of the loading state and the icon-only button variant.

[manasehstephen131-ops]

@manasehstephen131-ops has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hello maintainer please i would like to work on this issue I am a Motivated developer experienced in debugging, resolving issues, and contributing to projects. I work with JavaScript, React, Next.js, Node.js, and Rust, among other tools and I’m comfortable navigating and improving existing codebases.

Quick to learn, proactive, and focused on delivering quality work.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @manasehstephen131-ops to this issue.

[Anichris-koded]

@Anichris-koded has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi maintainer, i would love to work on this issue.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Anichris-koded to this issue.

[Jumongweb]

@Jumongweb has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi maintainer, i will like to solve this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Jumongweb to this issue.

[emteebug12-jpg]

@emteebug12-jpg has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi maintainers! I’d love to help out with this issue. I’ve checked the current codebase/documentation and know exactly what needs to be updated to make this clearer. I will ensure everything aligns perfectly with your existing contribution guidelines.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @emteebug12-jpg to this issue.

[drips-wave]

Congratulations, @Anichris-koded! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @Anichris-koded: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊