fix(design): a toggle is pressed, never a bare aria-pressed; static labels are flat Badges with a tone, edged label spans lint-refused (E28)

frontend/src/components/ui/Button.tsx

@@ -15,7 +15,9 @@ import { buttonClass, isLinkVariant, type ButtonSize, type ButtonVariant } from
 // No focus-visible here on purpose: @layer base in index.css already rings every <button> for keyboard
 // users. Adding one would double the ring.
 
-interface ButtonOwnProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+// A toggle says so through `pressed`, never a bare `aria-pressed`: the prop also paints the pressed
+// state (B3), and a raw attribute left the Server log's Live toggle looking like any outline button.
+interface ButtonOwnProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-pressed"> {
   variant?: ButtonVariant;
   /** Defaults to "md", except for the link variants, whose default is "none" (a link owns no box). */
   size?: ButtonSize;
@@ -28,6 +30,8 @@ interface ButtonOwnProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   loading?: boolean;
   /** A toggle: sets aria-pressed and paints the pressed state (the solid accent). */
   pressed?: boolean;
+  /** Not accepted: a toggle is `pressed` (JSX lets any undeclared `aria-*` through, so it is `never`). */
+  "aria-pressed"?: never;
   /** Sits on a picture (a thumbnail, a poster) or inside a pill field: the pill shape. Implied by the
    *  `media` variant. */
   round?: boolean;