Button component

[mathieusouflis]

What to build

An accessible, themeable button built on ArkUI's button primitive styled via a PandaCSS cva recipe.

Set up:

• Button component using ArkUI's button primitive for keyboard accessibility, focus ring, and disabled states
• PandaCSS cva recipe with:
  • variant: primary, ghost, outline
  • size: sm, md, lg
  • isIconOnly: applies equal padding and circular border radius
  • isLoading: shows a spinner (using Icon), disables interaction
• All colors reference semantic tokens — no hardcoded values
• Full TypeScript props with JSDoc
• Storybook stories: one story per variant × size combination, plus isLoading and isIconOnly states

Tests (Vitest + Testing Library):

• Disabled state prevents click handler from firing
• isLoading renders a spinner and disables interaction
• All variant/size combinations render without errors

Acceptance criteria

• All three variants (primary, ghost, outline) render correctly in light and dark mode
• isLoading shows a spinner and the button is not clickable
• isIconOnly applies equal padding on all sides
• Keyboard focus ring is visible (accessible)
• All tests pass

Blocked by

• Token system + PandaCSS preset #3 (Token system + PandaCSS preset)
• ThemeProvider + useTheme hook #4 (ThemeProvider + useTheme hook)