# Reusable Button Component Prompt

Create or improve a reusable `Button` component for `fe-digitaltwin-v2`.
Inspect `src/shared/components/ui/button.tsx`, `cn()`, and nearby usages first.
Extend the existing primitive instead of creating a competing button.

## React contract

- Extend native `button` attributes.
- Forward an `HTMLButtonElement` ref.
- Accept `className`, `children`, `type`, and typed `variant`/`size` props.
- Preserve `asChild` composition if the current primitive supports it.
- Add only these requested additions: `<new variants or behavior, or "none">`.
- Keep navigation outside the component; links compose through `asChild`.

## Styling theme: decisive action

- Primary buttons are visually prominent but compact.
- Secondary, outline, ghost, link, and destructive variants communicate action
  hierarchy through semantic project tokens.
- Use the existing rounded shape and Sora medium-weight label.
- Hover changes color subtly; active may compress slightly without layout shift.
- Focus uses `focus-visible:ring-2 focus-visible:ring-ring`.
- Disabled and loading states remain readable and cannot trigger duplicate
  actions.
- Icon-only buttons have a square touch target and an accessible label.

## Required states and behavior

- `<default label and optional leading/trailing icon>`
- Loading: `<loading label or spinner behavior>`
- Disabled: native `disabled` behavior and no click callback.
- Keyboard: Space and Enter follow native button behavior.
- Dark mode: rely on semantic tokens rather than raw colors.

## Acceptance criteria

1. Existing button usages remain compatible.
2. Every variant has default, hover, focus-visible, active, and disabled styling.
3. Loading content does not significantly change the button width.
4. Icon-only usage requires an accessible name.
5. The implementation is typed, ref-forwarding, and composable.

Run focused linting allowed by the repository instructions and finish with a
simple **TL;DR**.