FE-647: Add button component

[alex-e-leon]

🌟 What is the purpose of this PR?

• Adds Button component to the DS.
• Adds a new loading spinner variation to be used in Button.
• Updates Button usage in petrinaut to match the new api.

There are more custom buttons in petrinaut that we can port over to this new Button - including all IconButtons, but I'll do that in a follow up PR to keep the PR size more manageable.

I'll also be looking to do a design review with CiaranH. Depending on the discussion there may be follow on updates.

🔗 Related links

Designs

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

• modifies an npm-publishable library and I have added a changeset file(s)

📜 Does this require a change to the docs?

The changes in this PR:

• are internal and do not require a docs change

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hash	Ready	Preview, Comment	May 11, 2026 2:53pm
hashdotdesign-tokens	Ready	Preview, Comment	May 11, 2026 2:53pm
petrinaut	Ready	Preview, Comment	May 11, 2026 2:53pm

[cursor]

PR Summary

Medium Risk
Introduces a brand-new Button implementation (new prop API, styling recipe, and anchor support) and propagates the API changes across Petrinaut UI, which could cause broad UI/interaction regressions if any edge-cases were missed.

Overview
Adds a new design-system Button component built on a slot recipe, supporting new variant/tone combinations, pressed/loading states, optional icon APIs (iconName or prefix/suffix), and rendering as either <button> or <a>.

Extends sizing across the DS with a new xxs size (tokens + formInputSizes), adds xxs support to Icon and LoadingSpinner, and introduces a new LoadingSpinner visual variant (bars) used by the Button loading state.

Updates Ladle stories (Button/Tooltip/LoadingSpinner) and migrates Petrinaut button usages from the legacy variant/colorScheme API to the new variant/tone + prefix/suffix props; also adjusts Turbo codegen outputs and exports LoadingSpinnerVariant from main.ts.

^{Reviewed by Cursor Bugbot for commit abc9787. Bugbot is set up for automated code reviews on this repo. Configure here.}

[augmentcode]

🤖 Augment PR Summary

Summary: This PR introduces a new Design System Button component with an updated API and styling system, and updates Petrinaut usage to match.

Changes:

• Added a new Panda sva-based button recipe (button.recipe.ts) defining size/variant/tone/shape + state styling (loading/pressed/disabled, icon-only, etc.).
• Replaced the legacy Button implementation with a new component supporting both <button> and <a> rendering, plus a new icon API (iconName / prefix/suffix).
• Added a new LoadingSpinner visual variant (bars) and updated spinner recipe/stories to demo variants and dark backgrounds.
• Updated Ladle stories for the Button to reflect the new variants/tones/sizes and demonstrate icons, shapes, loading, pressed, and disabled states.
• Exported LoadingSpinnerVariant from the ds-components package entrypoint.
• Adjusted multiple Petrinaut call sites to the new Button API (variant/tone + prefix/suffix icon props where applicable).
• Updated turbo.json to ensure the fix task depends on codegen in ds-components.

Technical Notes: The new Button relies on recipe-driven slot classes and uses an overlay approach for loading state (spinner + hidden content) to preserve layout while busy.

_{🤖 Was this summary useful? React with 👍 or 👎}

[augmentcode]

Review completed. 5 suggestions posted.

Comment augment review to trigger a new review at any time.

See the output of git range-diff at https://github.com/hashintel/hash/actions/runs/25672807807

See the output of git range-diff at https://github.com/hashintel/hash/actions/runs/25676902013